How do I pick a specific color from an image?

Upload the image, then hover over it — the tool shows the HEX, RGB, and HSL values of the pixel under your cursor in real time. Click to save that color to your picked list. Click any saved color to copy its HEX value.

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

HEX is the shorthand for RGB used in CSS (#FF5733). RGB defines colors , Green, Blue values (0–255). HSL defines colors (0–360°), Saturation (%), and Lightness (%) — easier for designers to reason about. All three represent the same colors.

How are dominant colors extracted?

The tool downsamples the image and quantizes pixels into color buckets, then ranks buckets by pixel count. The top 12 most common color groups are shown dominant palette. Click any swatch to copy its hex value.

Image Color Picker

How the Image Color Picker works

The image color picker lets you sample pixel colours from any uploaded image and extracts the dominant colour palette automatically. Hover over any area of the image to see the HEX, RGB, and HSL values of that pixel in real time. Click to copy the value to clipboard. Designers use it for brand colour extraction, accessibility contrast checking, and building cohesive colour palettes from reference images or photography.

Eyedropper pixel sampling

The eyedropper samples the exact colour of a single pixel at the cursor position. This is more precise than estimating a colour visually or using the closest swatches in a palette. When sampling a photograph, the colour at any given pixel is the result of light, shadow, and compression — the eyedropper reveals the actual rendered colour, which is often slightly different from the "pure" brand colour used in vector assets. Use multiple samples and average them for print-matching work.

Dominant colour palette extraction

The palette extractor uses a k-means clustering algorithm (or median cut) to identify the 5–8 most dominant colours in the image, weighted by pixel frequency. This is different from the most saturated or most visually striking colours — very large neutral background areas dominate the cluster. The tool filters near-duplicates and ranks colours by their visual prominence in the image, making extracted palettes immediately useful for UI theming and presentation design.

HEX, RGB, and HSL colour formats

HEX (#RRGGBB) is the standard format for CSS and most design tools. RGB (Red, Green, Blue, 0–255 each) is used in image editing software and some CSS contexts. HSL (Hue, Saturation, Lightness) is the most human-intuitive format — adjusting the lightness value in HSL creates tints and shades of a colour without altering its hue, which is extremely useful for building monochromatic colour scales for design systems. The picker displays all three formats simultaneously with one-click copy for each.

Accessibility contrast checking

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 between text and background for normal text (AA standard) and 3:1 for large text. After picking a foreground and background colour from an image, the tool calculates the contrast ratio and displays a WCAG AA and AAA pass/fail result. This helps designers verify that text overlaid on a photographic background or on a brand-coloured card meets accessibility standards before development.