Image colour picker: get HEX, RGB and a palette from any picture
Choose a picture, click anywhere on it to read that colour's HEX, RGB, HSL and CMYK values, and see the picture's main colours as a palette. A magnifier shows the exact pixel.
Free · no signup Runs in your browser
How do I get the colour code from a picture?
Choose or drop your picture, then click the point whose colour you want. The tool shows its HEX code (like #1A73E8), RGB, HSL and CMYK values, with a swatch and a Copy button. A magnifier follows the pointer so you can pick one exact pixel, and a palette of the picture's main colours is made automatically. In Chrome and Edge you can also use the eyedropper to pick a colour from anywhere on your screen.
Why we built this tool
Designers, developers, decorators, crafters and brand owners constantly need the exact colour of something they can see: the blue in a logo, the green of a wall in a photo, a skin or paint tone, a brand colour on a website. Guessing by eye never matches. A picture holds the exact value of every pixel, and this tool lets you read it, in the formats people use: HEX for web and design software, RGB for screens, HSL for tweaking lightness, and a simple CMYK estimate for print conversations. It also summarizes the whole picture as a palette of its main colours, which is the quick way to build a colour scheme from a photo. Everything happens in your browser, so a client's logo or an unreleased design never leaves your computer.
Your picture is read in your browser. Nothing is uploaded, and there is no sign-up.
How it works in detail
The picture is drawn on a canvas, and the canvas can report the exact red, green and blue values (0 to 255) of any pixel. When you click, the tool reads that pixel and converts it: HEX is the three values written in base 16, HSL is worked out with the standard conversion (hue in degrees, saturation and lightness as percentages), and the CMYK values use the simple formula k = 1 − max(R, G, B) ÷ 255, which is an estimate; real print colour depends on the printer and the profile. The palette uses the median cut method: all of the picture's pixels (from a reduced copy) are put in one box, and the box with the widest range of colour is repeatedly split at its median until there are as many boxes as colours you asked for; each box's average is a palette colour, and its share is the portion of pixels in it. The eyedropper button uses your browser's EyeDropper feature where it exists (Chrome and Edge).
How to use it
- Choose or drop a picture. Its most common colour is shown at once, with the palette below.
- Move the pointer over the picture; the magnifier shows the pixel under it.
- Click to pick that pixel. Copy the HEX code, or read the RGB, HSL and CMYK values.
- Click a palette swatch to see its values. Choose how many colours you want (2 to 12) and press Copy palette to take all the HEX codes.
- To pick a colour from another window, use the screen eyedropper where it is offered.
Use cases
- Matching a brand or logo colour for a website or a document
- Building a colour scheme from a photo, a painting or a product
- Choosing paint, fabric or décor colours to match a picture
- Finding the HEX code of a colour you like on a website, with the eyedropper
- Checking that an exported graphic kept its brand colours
- Teaching colour: seeing how one colour is written in different systems
Problems you may run into
Most trouble is about how colour is shown and stored.
| What you see | Likely cause | What to do |
|---|---|---|
| The colour does not match what I see on screen | Screens, photos and files can use different colour profiles | The tool reads the file's values; a difference usually comes from the display or from compression |
| JPG colours are slightly off from the original brand colour | JPG compression changes pixels near edges | Pick from a flat area, or use a PNG or SVG source |
| The CMYK numbers do not match my printer | The CMYK shown is a simple estimate | Ask your printer for a profile-based conversion; use these for a rough guide only |
| The eyedropper button is missing | Your browser does not support EyeDropper | Use Chrome or Edge, or take a screenshot and open it here |
| The palette looks dull | A photo is full of mixed tones, so averaged colours are muted | Increase the number of colours, or pick key points by hand |
| Transparent areas read as black | Fully transparent pixels have no colour | Pick a visible pixel |
Colour values explained
HEX is a six-digit code such as #FF8800: the first two digits are red, the next two green and the last two blue, each from 00 to FF (0 to 255). RGB lists the same three numbers. HSL describes a colour by its hue (an angle from 0 to 360 on the colour wheel), its saturation (how strong it is) and its lightness, which is easier to adjust by hand. CMYK is the cyan, magenta, yellow and black used in printing. Two colours with the same HEX code are identical on screen; if two look different, one is probably in another colour profile or has some transparency.
How it works
The picture is read and redrawn in your browser.
1. The picture is drawn on a canvas; clicking reads the red, green and blue values of that pixel.2. HEX is those values in base 16; HSL and CMYK are converted with the standard formulas (CMYK is a simple estimate).3. The palette is found by median cut: split the colour box with the widest range at its median until there are as many boxes as colours requested.4. Each palette colour is the average of its box; its percentage is the share of pixels. Nothing is uploaded.
The tool reads colour values from the picture as the browser decodes them (sRGB). For large pictures a copy up to 1,600 pixels wide is used. The palette is made from a copy of at most 120 pixels on its longest side and ignores transparent pixels. The CMYK values are the naive conversion and should not be used for print production.
Example: matching a wall colour from a photo
You photograph a wall and want a paint match to take to a store.
- PickClick an evenly lit part of the wall
- ReadFor example #D8C3A5, rgb(216, 195, 165), hsl(35, 33%, 76%)
- CompareShow the HEX code or the swatch when you ask for a match
A colour code you can use in a store or a design program
Photos change with lighting, so treat a match as a starting point.
Terms on this page
- HEX
- A six-digit base-16 colour code, such as #FF8800.
- HSL
- Hue, saturation and lightness: a way to describe colour that is easy to adjust.
- Palette
- A small set of colours that represent a picture or a design.
Common questions
Is it free, and is my picture uploaded?
It is free, and your picture is read in your browser and never uploaded.
What is a HEX colour code?
A six-digit code for a colour: two digits each for red, green and blue, written in base 16.
Can I pick a colour from the screen?
Yes, in Chrome and Edge, with the screen eyedropper button.
How is the palette made?
By the median cut method: the picture's colours are split into groups and each group is averaged.
Is the CMYK value exact?
No. It is a simple estimate; real print colour depends on the printer.
Can I pick from a PDF or a website?
Take a screenshot and open it here, or use the screen eyedropper.
Is anything I enter sent to a server?
No. The calculation happens in your browser and nothing you type leaves your device.
Where these numbers come from
- MDN Web Docs — Canvas API The drawing surface every picture is processed on, and how a canvas is saved as PNG, JPEG or WebP.
- Wikipedia — Median cut The method used to make the palette.
- Wikipedia — HSL and HSV How hue, saturation and lightness describe a colour.
- MDN Web Docs — EyeDropper API The browser feature behind the screen eyedropper.
Last verified 2026-10-25 The method on this page is checked against the sources above at least once a year. Spotted something out of date? Tell us and we will fix it.
Related tools
Colour converter
Convert a colour between HEX, RGB and HSL, with a colour picker, and copy the CSS value you need.
Open toolContrast checker
Check the contrast ratio between text and background colours and see whether it passes WCAG AA and AAA.
Open toolCSS gradient generator
Build a linear, radial or conic CSS gradient with up to four colour stops, see it live and copy the CSS.
Open toolImage annotator
Mark up any picture with arrows, boxes, text, highlights and numbered steps, and blur, pixelate or hide private details. Free, private, runs in your browser.
Open toolSVG to PNG
Turn an SVG file or pasted SVG code into a PNG at the width you choose, with a transparent or coloured background.
Open toolPNG to WebP
Convert PNG pictures to WebP in your browser. Many files at once, nothing uploaded.
Open tool🖼️ Image tools
Convert between JPG, PNG and WebP, shrink a picture to a size limit, resize it or turn pictures into a PDF. Your files never leave your device.
See all 30 tools in this section