Create · For designers
Color Picker
Eyedrop any pixel with a zoom loupe, extract the image's dominant palette, and copy values as HEX, RGB or HSL.
The color tool designers keep in a tab
Every designer has done the squint-and-screenshot dance: zoom way in, screenshot, zoom the screenshot, guess which pixel is the “real” colour. This page replaces that ritual. The loupe magnifies the pixels under your cursor eleven-fold with a crosshair on the exact pixel being read, so picking the precise edge of a gradient or a single pixel of a logo is trivial. Click to lock the colour, then copy it in whichever syntax your stack wants — HEX for CSS, RGB for design tools, HSL when you plan to derive shades.
Below the eyedropper, the palette extractor runs k-means clustering over the image — the same algorithm behind the palette features in major design suites — and returns 5 to 8 swatches ordered by coverage. It's how you turn a brand photo into a colour system, match UI chrome to a hero image, or pull a poster's mood into a slide deck. Click any swatch to load it into the picker for copying.
Built for the real workflow
- Paste-friendly values — lowercase hex, comma-separated RGB, rounded HSL: drop them straight into code.
- Palette export — download the swatch card as a labelled PNG to share in a brief or pin in Figma.
- Private by architecture — colours are read from canvas data on your device. Unreleased product shots and client work never upload anywhere.
Common questions
Why does my picked colour differ from another tool's?
Browsers colour-manage images; values here are read in sRGB, the web's standard. Tools reading raw camera profiles can differ slightly.
Can I pick from a website screenshot?
Yes — screenshot the page, drop it here, and eyedrop anything. That's often faster than digging through DevTools.