Grab colors from any image, build a palette, convert between HEX, RGB and HSL, and check WCAG contrast — all in your browser.
Drop an image here or browse
JPG · PNG · WebP · GIF — click the image to sample any pixel
Click a swatch or any spot on the image to read its color.
Tints & shades — click to use
Recently used — click to reuse
The quick brown fox jumps over the lazy dog
Click any swatch to copy its hex.
🔒 Your images and colors stay on your device — nothing is uploaded.
Drop a photo, logo or screenshot and instantly pull its dominant colors as HEX codes.
Switch any color between HEX, RGB and HSL, and copy the value with one click.
Test text vs background against WCAG AA and AAA so your designs stay readable.
Hexadecimal is compact and universal but tells you nothing about the colour — adjusting #3B82F6 to be slightly lighter requires either a tool or mental arithmetic in base 16. RGB is the same information in decimal, equally opaque to reason about.
HSL was designed to fix that, expressing colour as hue in degrees, saturation and lightness. It makes intent legible: same hue, less saturation is an obvious edit. Its flaw is that lightness is not perceptual. Yellow at 50 percent lightness appears far brighter than blue at 50 percent lightness, so a palette built by holding lightness constant across hues will not look consistent.
OKLCH fixes exactly that. Its lightness axis is perceptually uniform, so two colours with the same L value genuinely appear equally light regardless of hue. Building a palette by varying hue at fixed lightness and chroma produces a set that reads as a family, which is difficult to achieve in HSL. It is supported across current browsers and is the better choice for new work.
sRGB has been the web's default for decades and covers a relatively modest slice of visible colour. Display P3, standard on recent Apple hardware and increasingly elsewhere, covers roughly 25 percent more, most noticeably in saturated reds and greens. CSS can address it directly with color(display-p3 ...), and a colour specified that way on a capable screen is genuinely more saturated than anything sRGB can express.
This is why a colour picked on one display can look different on another. Without an embedded profile, an image's numbers are interpreted in whatever space the display assumes, so a photograph tagged P3 but read as sRGB appears washed out, and untagged P3 content read as sRGB appears oversaturated.
Print adds a further constraint. CMYK inks cannot reproduce many bright RGB colours — vivid blues, saturated greens and pure oranges are the usual disappointments — so a brand colour chosen on screen may be unreachable in print. Brands that care specify a spot colour and derive the screen version from it rather than the reverse.
A colour is rarely used alone, and contrast against its background determines whether text on it can be read. WCAG requires 4.5:1 for normal text and 3:1 for large text and interface components — thresholds that rule out many otherwise attractive combinations, particularly mid-tone brand colours used for button labels.
The reliable technique is to choose the pair rather than the colour: pick the background, then find a foreground that clears the ratio, checking with the contrast checker rather than by eye. Perceived contrast is strongly affected by surrounding colours, so judgement is unreliable here.
Also avoid carrying meaning in hue alone. Around 8 percent of men have some form of colour vision deficiency, most commonly red-green, so a red and green status indicator is ambiguous to a substantial share of users unless shape, position or a label distinguishes them as well. To build a full set from one starting point, the palette generator handles the relationships.
Open the “From image” tab, drop in a photo, and click anywhere on it to sample that exact pixel. A palette of the main colors is generated automatically too.
Yes. Enter a hex code or use the picker, and the tool shows HEX, RGB and HSL at once — each with a copy button. It also generates tints and shades.
WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. The contrast tab shows pass/fail for each level live.
Completely. No sign-up, no watermark, and every image and color is processed locally in your browser.
Different displays cover different gamuts, and without an embedded colour profile the same numbers are interpreted differently. P3 content read as sRGB looks oversaturated; sRGB content on a wide-gamut screen can look flat.
OKLCH for new work. Its lightness axis is perceptually uniform, so colours with the same L value genuinely look equally light across hues — which HSL does not deliver, making consistent palettes hard to build there.