About Color Picker & Palette
Need the exact blue from a logo, the colours of a photo for a design, or a palette to match a brand? Add an image, move over it to preview colours, and click or tap to pick one: you'll see its HEX, RGB and HSL values, ready to copy. Press Extract Palette to find the image's 5 to 16 main colours, ordered by how much of the picture each covers, as clickable swatches and as CSS variables you can paste into a stylesheet. It works with photos, screenshots and logos.
How to Use It
- 01
Add an image
Drop a photo, screenshot or logo into the box, or tap to choose it.
- 02
Pick colours
Move over the preview to see colours, and click or tap to pick one and copy its HEX code.
- 03
Extract the palette
Press Extract Palette to get the main colours as swatches and CSS.
Questions
How are the palette colours chosen?
The image is grouped into colour regions with a median-cut algorithm, and each region's average becomes one palette colour. Near-duplicates are merged and colours are sorted by how much they cover.
Why does a picked colour differ slightly from the original design?
JPG compression and photo noise change individual pixels a little. Pick from a flat area, or use a PNG of the original artwork.
What do HEX, RGB and HSL mean?
They're three ways to write the same colour. HEX, like #1e78c8, is common in web design; RGB gives red, green and blue values; HSL gives hue, saturation and lightness.
Is my image uploaded?
No. Colours are read in your browser and your image stays on your device.