More
More
Image Colour Picker
Pick colours from any image.
Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.
Move over the image to preview a colour; click or tap to keep it. Arrow keys move the picker by one pixel and Enter keeps the colour.
Colours are read from the image pixels in your browser. The dominant palette groups similar pixels with k-means clustering on a reduced copy of the image, so tiny details may not get their own swatch: pick those by hand. Photos taken in a wide colour space such as Display P3 are converted to standard sRGB values, which is what CSS hex codes mean.
How to use it
- Choose, drop or paste an image, such as a logo, a screenshot or a photo.
- Move over the image to see the colour under the loupe, and click or tap to add it to your picked colours.
- Copy any colour as HEX, RGB or HSL, or copy the dominant palette as CSS variables.
Questions
Why is the colour slightly different from the design file?
Images saved as JPG blur colours slightly, and screenshots can be colour managed by your system. For an exact brand colour, take it from the original design file or SVG rather than from a picture.
How is the dominant palette chosen?
The image is shrunk to about 25,000 pixels and similar colours are grouped into clusters. Each swatch is the average of one cluster, listed with its share of the image, largest first. Fully transparent pixels are ignored.
Can I pick colours from my screen?
Take a screenshot first, then paste it here with Ctrl+V or Command+V. Some browsers also offer an eyedropper on colour inputs that can pick from anywhere on screen.
Is my image uploaded?
No. It is drawn on a canvas in your browser and nothing is sent anywhere.
About this tool
Picking colours from an image
Need the exact blue from a logo, or the colours of a photo for a design? Drop the image here, move over it and click to capture any pixel. A magnifying loupe shows exactly which pixel you are on, which matters on thin lines and small text.
What you get
- Picked colours: each click is added to a list you can copy as HEX, RGB or HSL.
- Dominant palette: the main colours of the whole image, largest share first, ready to copy as CSS variables.
The palette is found by shrinking a copy of the image and grouping similar pixels into clusters, a method called k-means. Small details may not earn their own swatch, so pick those by hand.
Tips
To pick a colour from something on your screen, take a screenshot and paste it here with Ctrl+V or Command+V. For an exact brand colour, use the original design file or SVG where you can: JPG compression and screen colour management can shift a colour slightly. Photos from recent phones are often in a wide colour space, and the values are converted to standard sRGB, which is what CSS HEX codes mean.
The image is drawn on a canvas in your browser and never uploaded.
Related tools
- Colour ConverterHEX, RGB, HSL and OKLCH.
- Colour Palette GeneratorHarmonious palettes from one colour.
- Colour Contrast CheckerWCAG contrast between two colours.
- CSS Generator: Gradient, Shadow & RadiusGradients, box shadows and rounded corners with live preview and copy-ready CSS.