In-browser color picker, palette studio, and OKLCH converter.

To extract a complete, harmonious color palette from any image using Real Colour Picker:

1. Upload or Paste Your Image: Drag and drop any image file (PNG, JPG, WebP, SVG) onto the canvas workspace, click "Upload Image" to browse your disk, or press Ctrl+V (Cmd+V on macOS) to paste a screenshot directly from your clipboard.
2. Navigate to Palette Studio: Scroll down to the Palette Studio section immediately beneath the image loupe. The studio automatically runs an optimized median-cut color quantization algorithm across your image pixels.
3. Review Dominant Swatches: The engine presents 6 dominant swatches showing their exact HEX codes, proportional coverage percentage, and lightness values.
4. Explore Harmonies: Click any extracted color swatch to generate complementary, analogous, triadic, tetradic, and split-complementary color schemes with live UI mockup previews.
5. Export Production Tokens: Click "Export" to copy your palette formatted as Tailwind CSS v4 @theme tokens, CSS custom properties (--color-* variables), or structured JSON arrays.

To extract the exact color code from any specific point or pixel in an image:

1. Open the Image: Drag your picture onto the workspace or paste a screenshot using Ctrl+V.
2. Inspect with the Zoom Loupe: Hover your cursor over the specific pixel you want to sample. The optical loupe magnifies pixels at 8× or 16× zoom with centered crosshairs.
3. Nudge Pixel by Pixel: For fine anti-aliased typography or 1px UI borders, use keyboard arrow keys (↑, ↓, ←, →) to step coordinates by exactly 1 pixel.
4. Click to Lock Color: Click the pixel (or tap on mobile touchscreens) to sample it.
5. Copy Color Values: The Color Inspector immediately displays real-time codes for HEX (#3B82F6), 8-digit HEX with alpha (#3B82F6FF), RGB (rgb(59, 130, 246)), HSL, CMYK, and CSS Color 4 OKLCH. Click the copy icon next to any format to copy it to your clipboard.

To find your personal color palette or extract a signature aesthetic scheme from a photography portrait or mood board:

1. Use a Natural Light Photo: Upload a clear, high-resolution portrait taken in indirect natural daylight without beauty filters or artificial colored lighting. For landscape or interior design, upload your source reference shot.
2. Sample Undertones & Key Features: Use the 8×/16× optical zoom loupe to pinpoint your skin undertone (sample from the jawline or collarbone where light is even), iris color, and natural hair highlights.
3. Inspect Extracted Color Clusters: The Palette Studio automatically clusters the dominant color values from your photo into proportional swatches, revealing the overall warmth, coolness, and value depth of your composition.
4. Identify Your Seasonal Palette Type: Compare your sampled skin and hair undertones: cool blue/pink undertones with high contrast indicate a Winter palette; cool soft undertones indicate Summer; warm golden undertones with rich earthy hues indicate Autumn; and warm clear undertones indicate Spring.
5. Audit Contrast & Harmonies: Test potential clothing, makeup, or UI accent colors against your sampled skin tones using the integrated WCAG 2.2 Contrast Checker to ensure strong visual harmony and flattering contrast.

Pantone Matching System (PMS) colors are proprietary physical spot-color ink formulations used in offset printing, which cannot be natively output by web browsers without licensed color books. However, you can accurately map any image color to its closest commercial Pantone equivalent using Real Colour Picker:

1. Sample Precise Color Coordinates: Use the loupe eyedropper to lock onto the exact pixel region you want to match, extracting its 24-bit sRGB (rgb(R, G, B)) and HEX codes.
2. Review CMYK Separation Values: The inspector automatically translates the sampled color into 4-color process CMYK percentages (Cyan, Magenta, Yellow, Key/Black) used by professional print production presses.
3. Cross-Reference Pantone Color Bridges: Input your extracted HEX or RGB values into standard Pantone Color Bridge conversion guides or digital swatch libraries to find the closest certified Pantone Solid Coated (e.g. PMS 286 C) or Uncoated swatch with minimal color delta.

Yes. Real Colour Picker is a completely free, browser-based color palette studio and eyedropper application designed for designers, developers, and digital creators. Key capabilities include:

• 100% Free with No Restrictions: No subscriptions, no paywalled features, no usage limits, and no account signup or email required.
• Runs on Any Device: Operates natively in your browser on desktop and mobile (Windows, macOS, Linux, ChromeOS, iOS, Android) across Chrome, Safari, Firefox, and Edge.
• Unified Professional Suite: Combines an 8×/16× optical loupe eyedropper, instant Ctrl+V clipboard pasting, automated median-cut dominant palette extraction, WCAG 2.2 Level AA/AAA contrast testing, and CSS Color 4 OKLCH conversion.
• Developer-Ready Export: Instantly export generated palettes to Tailwind CSS v4 @theme blocks, CSS custom properties, and JSON token arrays at zero cost.

The pixel magnifier loupe achieves sub-pixel targeting through a dedicated client-side HTML5 Canvas rendering pipeline:

• Nearest-Neighbor Magnification: Standard browser scaling uses bilinear interpolation that blurs adjacent pixel colors together along high-contrast borders. Real Colour Picker explicitly disables smoothing (imageSmoothingEnabled = false) on the loupe context, delivering crisp 8× or 16× nearest-neighbor magnification with an aligned pixel grid overlay.
• Exact Integer Raster Mapping: Mouse and touch coordinates are translated through inverse CSS transform matrices into the source image's native bitmap coordinates, ensuring the central crosshair targets the exact pixel byte in the image buffer.
• Hardware-Accelerated 60 FPS Render Loop: Pointer updates are synced to the monitor's refresh rate via requestAnimationFrame, eliminating cursor lag.
• Arrow Key Micro-Stepping: When inspecting fine details, keyboard arrow keys (↑, ↓, ←, →) nudge the sampling coordinates by exactly 1 native pixel per tap, providing sub-pixel accuracy along anti-aliased vectors and typography.

No. Uploaded images, screenshots, and clipboard buffers are never sent to a remote server.

Real Colour Picker is built with a zero-upload, 100% client-side privacy architecture:

• In-Memory Processing: Every file you upload or paste via Ctrl+V is read locally into your browser's RAM via the HTML5 File and Canvas APIs.
• Zero Cloud Transmissions: Pixel sampling, zoom rendering, color quantization, and palette generation execute purely on your local device CPU and GPU. No binary image payloads, filenames, or analytics tracking are transmitted across the network.
• Confidential Design Safety: You can safely inspect unreleased product mockups, proprietary brand identity files, sensitive client assets, and personal photos with complete privacy and confidentiality.

The automatic palette engine detects dominant colors using an optimized median-cut color quantization algorithm:

1. Pixel Buffer Sampling: The engine reads raw RGBA pixel data from the canvas, filtering out fully transparent or near-transparent pixels that should not affect color clustering.
2. 3D Color Cube Enclosure: Remaining pixels are plotted into a 3-dimensional RGB color space bounding box spanning red, green, and blue axes.
3. Median Splitting: The algorithm finds the color axis with the largest dynamic range (greatest spread between minimum and maximum color values), sorts the pixels along that axis, and splits the box at the median into two equal sub-boxes.
4. Iterative Partitioning: This median-split process repeats recursively until the target number of discrete color clusters is formed.
5. Centroid Averaging & Frequency Scoring: For each cluster, the engine calculates the weighted average color centroid to determine the representative swatch, measures its percentage coverage across the canvas, and enforces perceptual distance thresholds (Delta E) to ensure swatches are distinctly varied rather than near-duplicates.

Yes. You can paste images and screenshots directly from your clipboard without saving them to your hard drive.

To paste from your clipboard:

1. Capture Your Screen: Capture any portion of your screen (press Win + Shift + S on Windows, or Cmd + Shift + 4 on macOS). You can also right-click any image in your browser and choose "Copy Image".
2. Paste onto the Studio: Focus on the Real Colour Picker tab and press Ctrl+V (Cmd+V on macOS).
3. Instant Rendering: The studio intercepts the global paste event, extracts the bitmap blob from event.clipboardData, and immediately mounts it onto the loupe canvas for instant color sampling and palette extraction.

The studio computes OKLCH (CSS Color Module Level 4) values alongside HEX and RGB because OKLCH addresses crucial perceptual limitations of legacy digital color models:

• Perceptual Lightness Uniformity: In sRGB and HSL, colors with identical lightness numbers do not have equal brightness to human eyes. For example, pure yellow (hsl(60, 100%, 50%)) appears glaringly bright, while pure blue (hsl(240, 100%, 50%)) appears dark. In OKLCH, a Lightness (L) of 0.70 looks equally bright regardless of hue, preventing unintended contrast shifts when swapping palette hues.
• Consistent Accessibility & Contrast: Because OKLCH lightness mirrors human visual perception, UI designers can build accessible button states, dark/light theme ladders, and hover variants with mathematically predictable WCAG contrast.
• Wide Gamut (Display P3) Spectrum: High-end smartphone and laptop screens support Wide Gamut P3 colors that cannot be expressed in standard sRGB. OKLCH unlocks these vibrant, high-chroma tones without color clipping.
• Modern Web & Tailwind v4 Standard: OKLCH is supported across all major evergreen browsers and serves as the core color standard for Tailwind CSS v4 themes and modern CSS design systems.