Step-by-step guide: How to Find the HEX Code of a Colour in an Image
How to use the Image Color Picker
- Choose an image — a screenshot, photo, logo or design mock-up.
- Move the pointer over the image. The loupe shows the area under the cursor magnified, with the target pixel outlined.
- Click to pick a colour. Its HEX, RGB and HSL values appear on the right, ready to copy.
- Keep clicking to collect several colours; select any swatch in the history to show its values again.
- Use the main colours section to see the image’s dominant palette at a glance.
Example: matching a brand colour from a logo
You have a logo as a PNG but no style guide. Open it, zoom in with the loupe on a solid area of the brand colour and click. The tool reports, for example:
HEX #1F6FEB · RGB rgb(31, 111, 235) · HSL hsl(216, 84%, 52%)
Copy the HEX value into your website’s CSS or your design tool. Avoid picking at the edges of shapes, where anti-aliasing blends the colour with the background.
Why pick colours from an image
Designers, developers and marketers often need the exact colour of something they only have as an image: a logo, a screenshot of a competitor’s site, a product photo or a palette shared on social media. Guessing by eye is unreliable, because perceived colour depends heavily on surroundings. Reading the pixel value gives you the precise code to reuse.
How the values are calculated
The image is decoded at full resolution into an off-screen canvas, and the colour is read from the exact original pixel under your pointer, even when the image is displayed smaller. The red, green and blue values (0–255) are shown directly, converted to hexadecimal for the HEX code, and converted mathematically to hue, saturation and lightness for HSL. Semi-transparent pixels also show their alpha value.
The main-colours palette is found by sampling the image, grouping similar colours into buckets and listing the most common distinct groups. It summarises the image; it is not a precise count of every shade.
Who uses it
Web developers matching CSS to a design, designers building palettes from photographs, brand managers checking colour consistency, and anyone trying to recreate a colour they have seen in an image.
Limitations to keep in mind
- Colours in JPEG images vary slightly from pixel to pixel because of compression. Pick from the centre of a flat area, or check a few nearby pixels.
- Embedded colour profiles may be converted by your browser when the image is decoded, so values can differ slightly from those in professional editing software.
- Picked colours are kept only while the page is open.
- “Pick from anywhere on screen” uses the EyeDropper API, available in Chromium-based browsers such as Chrome and Edge only.
How your data is handled
The image is decoded and read in your browser. It is not uploaded, and the colour history is not saved after you leave the page.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe the same colour in different ways. HEX is a compact code used in web design (#RRGGBB). RGB lists the red, green and blue amounts from 0 to 255. HSL describes hue (the colour’s position on the colour wheel), saturation and lightness, which makes it easier to create lighter or darker variants.
Why does the colour look different in my design software?
Different programs handle colour profiles differently, and screens are calibrated differently. The pixel value is exact; how it appears depends on the colour management of each application and display.
Can I pick colours from a website?
Take a screenshot and open it here. In Chrome and Edge you can also use “Pick from anywhere on screen” to sample any visible pixel directly.