Image Color Picker: Extract HEX, RGB, HSL & Dominant Palettes

Sample any pixel from a photograph, UI screenshot, or brand logo to inspect its exact HEX, RGB, and HSL color values, or automatically extract a deduplicated 5, 10, or 20-color palette. Every pixel lookup and palette calculation runs on an HTML5 Canvas inside your browser tab without uploading your image.

Drop a JPG, PNG, or WebP image here, or paste from clipboard (Ctrl+V)

Click any pixel to inspect exact HEX, RGB, RGBA, and HSL codes with a live cursor magnifier, or extract 5, 10, or 20 dominant palette swatches.

Supports JPG, JPEG, PNG & WebP up to 50 MB · 100% local browser processing

Loading image color picker…

Your image is decoded onto a local HTML5 Canvas in this browser tab and is never uploaded to a server. Pixel sampling and palette clustering stay in device memory until you replace the image or close the tab.

How to pick pixel colors and extract a palette from an image

1Drop a JPG, JPEG, PNG, or WebP file into the upload box, browse from your device, or press Ctrl+V (Cmd+V on macOS) to paste an image directly from your clipboard.
2Move your cursor across the canvas to preview live pixel coordinates (X, Y) inside the magnified loupe, then click or tap any point to lock that pixel as your selected color.
3Use the Zoom controls (100% to 400%) when sampling thin typography, 1-pixel borders, or anti-aliased icon edges, and click Copy next to the HEX, RGB, or HSL value.
4Switch the Dominant Color Palette selector between 5, 10, and 20 swatches to cluster the image's primary tones with near-duplicate shades automatically merged.
5Click any palette swatch or pinned history chip to inspect its contrast ratio against white and black text, or export the full palette as a PNG swatch card, JSON data file, or CSS custom properties.

Key features of the browser-based color picker

Pixel-level canvas eyedropper with cursor magnifier

Reads raw 8-bit RGBA channel values from the exact (X, Y) pixel coordinate you click on the HTML5 Canvas, accompanied by a live magnified crosshair grid so you never accidentally sample a neighboring compression artifact.

Instant HEX, RGB, HSL and WCAG contrast readout

Converts every sampled pixel simultaneously into uppercase hexadecimal (#RRGGBB), decimal RGB (rgb(r, g, b)), and cylindrical HSL (hsl(h, s%, l%)), while computing WCAG relative luminance contrast against white (#FFFFFF) and black (#000000).

Deduplicated 5, 10, and 20 dominant color extraction

Quantizes opaque image pixels into color buckets and applies perceptually weighted distance filtering so a shaded blue sky does not fill five slots with nearly identical hex codes.

Developer-ready CSS variables, JSON, and PNG exports

Generates a clean :root CSS custom property block (--palette-color-1, --palette-rgb-1, --palette-hsl-1), a structured JSON array with coverage percentages, or a visual PNG swatch sheet.

Practical use cases for designers, developers and creators

Front-end developers matching button states, border tokens, and background surfaces to a client screenshot or Figma export without opening desktop software.
Brand designers extracting a 5- or 10-color palette from a product photograph or moodboard to establish primary, secondary, and accent theme tokens.
Content creators sampling an exact background tone from a photo before extending the canvas or preparing a matching YouTube Thumbnail Resizer or Instagram Image Resizer graphic.
Accessibility auditors checking whether a brand's sampled foreground and background colors meet the 4.5:1 WCAG AA contrast ratio against light or dark text.
E-commerce editors finding the exact background shade of a studio product shot before converting a transparent cutout with the PNG to JPG Converter.

Supported input formats and export types

The color picker accepts standard raster formats that browsers decode into 8-bit per channel sRGB pixel buffers. If your source photo is an iPhone HEIC capture or a TIFF scan, convert it first using HEIC to JPG or TIFF to JPG before sampling colors.

Input image formats: JPG / JPEG (image/jpeg), PNG with or without transparency (image/png), and WebP (image/webp).
Color code formats: 6-digit hexadecimal (#RRGGBB), CSS functional RGB (rgb(R, G, B)), and CSS functional HSL (hsl(H, S%, L%)).
Palette export formats: High-contrast PNG swatch card (-palette.png), structured JSON object (-palette.json), and CSS custom properties (-palette.css).

How pixel color extraction and HEX / RGB / HSL math work

When you load an image, the browser decodes the compressed file stream into an uncompressed RGBA bitmap where each pixel occupies four consecutive bytes: Red (0–255), Green (0–255), Blue (0–255), and Alpha (0–255). Clicking a point on the canvas maps the pointer offset back to the intrinsic image coordinate (X, Y) and reads those four integers directly via ctx.getImageData(x, y, 1, 1).

Dominant palette extraction solves a different problem: a 12-megapixel photograph contains 12 million pixels and thousands of subtle lighting gradients. Simply ranking individual hex codes by frequency would return five nearly indistinguishable shades of the largest background wall. To build a usable palette, this tool quantizes opaque pixels into a 3D color histogram, ranks high-density clusters, and merges candidates whose perceptually weighted redmean RGB distance falls below the separation threshold.

How to extract HEX codes from photographs

Each 0–255 RGB channel integer is converted to base-16 (00 through FF) and concatenated in Red-Green-Blue order. Because JPEG compression introduces slight 8×8 block noise, zooming to 200% or 400% with the cursor loupe helps you pick a clean representative pixel in the middle of a surface rather than a blended edge pixel.

When to use HSL instead of HEX or RGB

HEX and RGB describe how much red, green, and blue light a screen emits, which makes it hard to create a slightly darker hover state by hand. HSL separates Hue (0°–360° color wheel angle), Saturation (0%–100% intensity), and Lightness (0%–100% brightness), allowing you to keep the exact hue while lowering lightness by 8% for hover or border states.

Real HEX, RGB and HSL conversion examples

The table below shows how identical sRGB pixel values translate across hexadecimal, decimal RGB, and cylindrical HSL notation, along with their measured WCAG contrast ratios:

TryImager Brand Violet (Primary Accent)

A saturated violet accent used for high-contrast interactive controls.

HEX code: #7C3AED (Red: 7C = 124, Green: 3A = 58, Blue: ED = 237)
RGB value: rgb(124, 58, 237)
HSL value: hsl(262, 83%, 58%)
WCAG contrast: 5.32:1 on #FFFFFF (passes AA normal text) · 3.95:1 on #000000

Deep Slate UI Surface (Dark Mode Canvas)

A cool low-saturation navy-slate commonly sampled from dark mode dashboards.

HEX code: #0F172A (Red: 0F = 15, Green: 17 = 23, Blue: 2A = 42)
RGB value: rgb(15, 23, 42)
HSL value: hsl(222, 47%, 11%)
WCAG contrast: 17.85:1 on #FFFFFF (passes AAA) · 1.18:1 on #000000

Warm Terracotta Product Highlight

An earthy warm orange-red tone typical of lifestyle and studio photography.

HEX code: #E05A47 (Red: E0 = 224, Green: 5A = 90, Blue: 47 = 71)
RGB value: rgb(224, 90, 71)
HSL value: hsl(7, 71%, 58%)
WCAG contrast: 3.55:1 on #FFFFFF (large text only) · 5.91:1 on #000000 (passes AA)

Limitations and color accuracy considerations

Color space conversion to sRGB: HTML5 Canvas reads pixels in standard sRGB by default. Wide-gamut Display P3 or Adobe RGB photographs are mapped into sRGB by your browser during decoding, so neon greens or deep magentas may read slightly less saturated than in a desktop RAW editor.
JPEG compression artifacts on sharp edges: Lossy JPG files blend colors across 8×8 pixel blocks. When sampling text or logos from a JPEG, zoom in and pick from the solid center of a stroke rather than its anti-aliased border.
Transparent pixels in PNG and WebP: Fully transparent pixels (alpha = 0) are excluded from dominant palette clustering so an invisible black or white matte does not skew the extracted swatches.
Lighting gradients vs flat brand colors: A real-world photo of a painted wall contains dozens of shadow and highlight shades rather than one uniform hex code.

What happens to your file

Selected or pasted images are decoded locally into an in-memory canvas buffer so the eyedropper and palette extractor can read RGBA byte arrays directly on your device. No image file, pixel sample, or generated palette is sent to a remote server. Reloading or closing the tab clears the active image and sampled swatches, while any PNG, JSON, or CSS files you export remain in your Downloads folder.

Accepts JPG, JPEG, PNG, and WebP files up to 50 MB. Very high-resolution photographs are displayed at full fidelity for pixel inspection while dominant palette clustering samples an optimized buffer so the browser remains responsive.

Full details are in the Privacy Policy.

Troubleshooting common color picking issues

Why does clicking a white background in a photo return #F9FAFB or #F4F1EA instead of #FFFFFF?

Camera photos reflect ambient room lighting and white balance settings, so physical white paper rarely records as pure digital #FFFFFF. Sample several areas or check the brightest swatch in the dominant palette.

Why did clipboard paste (Ctrl+V) not load my file?

Clipboard paste works when actual image bitmap data is on the clipboard (such as a screenshot taken with Print Screen, Win+Shift+S, or Cmd+Ctrl+Shift+4, or choosing 'Copy Image' in a browser). Copying a file icon in Finder or Explorer copies a file path rather than bitmap data—drag and drop the file instead.

Why does the extracted 20-color palette return fewer than 20 swatches on a simple logo?

If a flat vector logo or monochrome icon only contains two or three distinct colors, the perceptual deduplication filter merges identical pixels rather than padding the palette with duplicate swatches.

Once you have sampled your brand palette and exported your logo mark, build a complete website icon package with Favicon Generator.

Frequently asked questions

How do I find the exact HEX color code from an image?

Upload or paste your image into the Image Color Picker, move the crosshair over the area you want to inspect, and click to lock the pixel. The exact 6-digit HEX code (such as #2563EB) appears immediately with a one-click Copy button alongside its RGB and HSL equivalents.

Does this color picker upload my photos or screenshots to a server?

No. All image decoding, canvas pixel sampling, and dominant palette extraction happen locally inside your web browser using JavaScript and the HTML5 Canvas API. Your private screenshots, client designs, and photographs never leave your device.

What is the difference between picking a single pixel and extracting a dominant palette?

Single-pixel selection reads the exact RGBA values at one (X, Y) coordinate under your cursor, which is ideal for matching a specific UI button or logo color. Dominant palette extraction analyzes thousands of pixels across the whole image, groups similar shades together, and outputs the 5, 10, or 20 most representative colors.

Can I export the extracted color palette for CSS or design tools?

Yes. Once a 5, 10, or 20-color palette is generated, you can download a visual PNG swatch card, a structured JSON file containing HEX, RGB, HSL, and coverage ratios, or a ready-to-paste CSS :root custom properties snippet.

Why do colors picked from a JPG look slightly different from the original PNG?

JPEG uses lossy chroma subsampling and 8×8 block compression, which slightly shifts color values along sharp edges. If you have access to a lossless PNG or WebP version of a graphic, use that file for pixel-exact brand color matching.

Can I use the Image Color Picker on a mobile phone or tablet?

Yes. Tap anywhere on the canvas to sample a pixel and view the magnifier preview, use the zoom buttons to inspect fine details, and tap any HEX, RGB, or HSL button to copy the color code to your mobile clipboard.

How do I paste a screenshot directly into the color picker without saving a file?

Take a screenshot to your clipboard (using Win+Shift+S or Print Screen on Windows, or Cmd+Ctrl+Shift+4 on macOS) or right-click an image and choose 'Copy Image', then press Ctrl+V (or Cmd+V) anywhere on the Image Color Picker page.

What is the difference between HEX, RGB, and HSL color values?

All three represent the exact same sRGB color in different notations: HEX (#0D9488) packs red, green, and blue into six hexadecimal digits; RGB (rgb(13, 148, 136)) lists channel intensities from 0 to 255; and HSL (hsl(175, 84%, 32%)) expresses Hue angle, Saturation percentage, and Lightness percentage for easier tint and shade adjustments.

How does the WCAG contrast ratio indicator help when picking UI colors?

Whenever you click a pixel, the inspector calculates its relative luminance and reports the WCAG 2.1 contrast ratio against pure white (#FFFFFF) and pure black (#000000), showing whether body text (4.5:1 AA) or large headings (3.0:1 AA) will remain readable.

When not to use this

Do not rely on a photographed paint swatch or clothing photo for print production matching (such as Pantone or CMYK ink mixing), because camera white balance and shadows alter every pixel.

Heavily compressed JPEG screenshots introduce 8×8 block color drift around sharp letters; zoom in with the 7×7 loupe and click the interior of a shape rather than its anti-aliased border.