You see a color you like in a logo, a website screenshot or a product photo, and you need its code: for a stylesheet, a presentation theme, a design app or a brief for someone else. This tool reads the exact value of any pixel and gives it to you in the common formats.
Your image is opened in your browser only and is not uploaded.
How to use it
- Drop an image, choose one from your device, or paste it from the clipboard. Pasting is the fastest way to grab a color from a screenshot.
- Move the pointer or your finger over the image. A magnifier loupe shows the pixel grid and the color under the cursor.
- Choose the sample size: a single pixel (1 × 1), or the average of a 3 × 3 or 5 × 5 area.
- Click or tap to pick the color.
- Copy the value as HEX, RGB, HSL or CMYK with the copy buttons. Each picked color is added to a list of the last 12, which you can copy as CSS variables.
Single pixel or an average
In logos, interface screenshots and flat graphics, every pixel of a shape has the same color, so 1 × 1 gives the exact value. Pick from the middle of the shape, not its edge: edges are smoothed with in-between shades that blend into the background.
In photos, neighboring pixels are rarely identical. Noise, texture and JPG compression make each one slightly different, so a single pixel may be unusually dark or light. The 3 × 3 or 5 × 5 average gives a value that matches what your eye sees as the color of that area.
Which code to use
| Format | Example | Typical use |
|---|---|---|
| HEX | #1E6FD9 | CSS, design apps, brand guides |
| RGB | 30, 111, 217 | CSS, programming, office software |
| HSL | 214°, 76%, 48% | Making lighter or darker variants by changing one number |
| CMYK | approximate | A rough starting point for print |
HSL is handy when you need a palette around one color: keep the hue, then raise the lightness for a background tint or lower it for a hover state.
The CMYK value is calculated with a simple formula. Real print colors depend on the printer, the paper and the color profile, so do not send it to a print shop as a final value. Ask your printer how they want colors supplied.
Why the picked color can differ from reality
The tool reports the pixel value stored in the file. In a photo, that value depends on the light, the camera and the processing, so the color of a painted wall in a picture is not the color of the paint in the can. Screens also show the same code a little differently. For brand colors, use the official values when they exist, and use the picked color for matching images and layouts. If a whole photo looks too warm or too blue, correct it first with the warmth slider in Brightness and contrast, then pick.
To find the main colors of a whole photo automatically instead of clicking around, use Color palette from image.
Frequently asked questions
Why does the picked color look different from the real object?
The photo captured the object under specific light, and the camera processed it. The tool reads the file correctly, but the file itself is not a perfect record of the object's color.
Is the CMYK value accurate enough for printing?
No. It is an approximation from a simple formula. Printers use color profiles that depend on the paper and the machine, so ask your print shop for their preferred color values.
Can I pick colors from a screenshot of a website?
Yes. Take the screenshot, then paste it onto the page and pick the color. Use the single-pixel sample on flat areas for the exact value.
How do I copy several colors at once?
Every color you pick goes into the list of the last 12. Copy the list as CSS variables and paste it into your stylesheet.