How to pick a color from a picture
- Add your picture. Drop it anywhere on the page, paste it, or click the box. JPEG, PNG, WebP and iPhone HEIC photos work.
- Move over the picture. The color under the pointer appears at once in the panel, and a magnifier shows the pixels around it, with a box on the one being read.
- Click to keep a color. It joins Colors you picked. Click a kept color to copy its HEX code, or use Copy all as a list.
- Copy a format. Each of HEX, RGB, HSL and HSV has its own Copy button.
On a phone or tablet, touch the picture and slide your finger: the magnifier appears above it, so your finger does not hide the pixel. Lift your finger to keep the color. Without a mouse, click the picture area so that it has focus, then use the arrow keys to move a cursor (hold Shift to move ten pixels at a time) and press Enter to keep the color.
The color formats
| Format | Looks like | What it is |
|---|---|---|
| HEX | #E6141E | The red, green and blue amounts written in base 16. The usual way to write a color in CSS and in design tools. |
| RGB | rgb(230, 20, 30) | The same three amounts as numbers from 0 to 255. |
| HSL | hsl(357, 84%, 49%) | Hue (the position on the color wheel, 0 to 360 degrees), saturation (how vivid) and lightness. Handy for making a lighter or duller version of a color. |
| HSV | hsv(357, 91%, 90%) | Hue, saturation and value (brightness). The model many paint programs use for their color pickers. |
Under the formats, the page names the closest CSS color, such as crimson or tomato, measured by how different the colors look to the eye (distance in the CIE Lab color space), and tells you when the match is exact.
Reading one pixel or an average
Under Read the color from, One pixel gives the exact value of the pixel under the pointer. Photos, though, are full of grain and compression noise, so neighboring pixels of a plain wall can all differ a little. Choose 3 × 3 average, 5 × 5 average or 11 × 11 average to read the average of a small square instead, which is closer to the color you see.
Can the color be used as text or a background?
Below the formats, the page shows the contrast ratio of the picked color against white text and black text, using the WCAG 2 formula, together with a grade. A ratio of at least 4.5 to 1 passes level AA for normal text, 7 to 1 passes AAA, and 3 to 1 is enough for large text and for interface parts such as buttons. For instance, a red of #E6141E gives 4.68 to 1 with white text, which passes AA, and 4.48 to 1 with black text, which just misses the 4.5 line and so passes only for large text. Use it as a quick check when you build a color scheme from a picture.
The main colors of the picture
Under The main colors of the picture, the page finds a palette for the whole picture straight away. The How many colors slider runs from 2 to 12 and starts at 6. The colors appear as a strip, wider where the picture has more of that color, and as a list with each color's HEX code, closest CSS name and share of the picture.
- How it works. The picture is shrunk to at most 200 pixels on its longer side, the pixels that are mostly see-through are skipped, and the rest are grouped by k-means clustering in CIE Lab, so that colors that look alike end up in one group. Each group's average color, and its share of the picture, become one entry. The result is the same every time for the same picture.
- The palette colors are averages. A color in the palette is the middle of a group of similar pixels, so it may not appear exactly anywhere in the picture. For one exact pixel, use the picker.
- Small accents can disappear into a bigger group when you ask for few colors. A small bright flower on a green field needs more colors to show up. Raise the slider.
- Copy it your way: Copy the HEX codes (one per line), Copy as CSS variables (a
:rootblock with--color-1,--color-2and so on), Copy as a list (JSON), or Download as a picture, a strip of swatches with their codes, as a PNG. Clicking a color band copies that color.
Colors in a browser, and how exact they are
- The values are sRGB, the color space of the web. A picture with another color profile, such as Display P3 from a recent iPhone, is converted to sRGB by your browser when it is drawn, so very saturated colors can be slightly different from what a wide-gamut screen shows.
- JPEG changes colors a little. A flat color in a JPEG can vary by a few levels from pixel to pixel. If you need the designer's exact brand color, take it from a PNG or SVG of the logo, not from a compressed photo of it.
- See-through pixels are shown with their own color, and the page says how opaque the spot is. A half see-through green is still read as green.
- Very large pictures over about 40 megapixels are read from a smaller copy, so a value there is an average of a few neighboring pixels.
- No CMYK or print values. A screen color has no single CMYK equivalent without a printer profile, so the tool does not guess.
Pick from anywhere on the screen
In Chrome, Edge and other Chromium browsers, a button Pick from anywhere on the screen appears, which uses the browser's built-in eyedropper to take a color from any window or from the desktop, not only from the picture on this page. Firefox and Safari do not offer that feature, so the button is hidden there.
What it is good for
- Matching a color from a logo, a photo or a piece of artwork when you build a website or a presentation.
- Making a palette from a photo or from anime art to color-match a design, an outfit or a room.
- Checking text contrast on a color taken from your picture.
- Looking at color casts. The main colors of a set of pictures show whether they share a warm or cool tint, which our batch color fixer can then correct. The guide to white balance and histograms explains what to look for.
Privacy
The picture is read inside this tab, and the file on your disk is never changed or deleted. Copying uses your browser's clipboard, and the colors are not sent anywhere by the page. For what the site collects, see our privacy policy.
Frequently asked questions
How do I find the HEX code of a color in a picture?
Add the picture, move the pointer to the color, and read the HEX code in the panel. Click to keep it, and use the Copy button next to HEX.
How do I get a color palette from an image?
Add the picture. The main colors appear under The main colors of the picture at once. Use the slider to ask for more or fewer, then copy them as HEX codes, CSS variables or a list, or download them as a picture.
Why does the same area give slightly different colors?
Photos and compressed files have grain, so neighboring pixels differ a little. Choose a 3 × 3 or 5 × 5 average under Read the color from to get the color you actually see.
Is the HEX code the exact color of the pixel?
Yes, as your browser shows it in sRGB. If the file uses another color profile, the browser converts it first. Compressed JPEGs also vary slightly, so take brand colors from the original logo file where you can.
Can I pick colors from outside the picture?
In Chrome and Edge, yes: use Pick from anywhere on the screen. In Firefox and Safari, add a screenshot of what you want to sample.
What do the AA and AAA labels mean?
They are WCAG 2 levels for text contrast. AA needs a ratio of 4.5 to 1 for normal text (3 to 1 for large text), and AAA needs 7 to 1. The page compares the color you picked with white text and with black text, as if the color were the background.