Color Code Finder
This color code finder tells you what a color in a picture is called and how to write it. Click the color and you get its HEX, RGB, HSL and CMYK codes and the nearest standard color name, such as "steelblue" or "tomato". It works with photos, screenshots, logos and scans.
Find a color code in your image
The color picker needs JavaScript. Below is the sample image; the text on this page explains every format and formula.
Or drag an image onto the box, or paste one with Ctrl+V (⌘+V on a Mac). Picking from anywhere on your screen works in Chrome and Edge on a computer.
Your image stays on this device. It is never uploaded.
- HEX
– - RGB
– - HSL
– - CMYK
–
CMYK is approximate. For print, use your printer’s color profile.
Click or tap a point in the image to see its color codes here.
Recent colors
Colors you pick appear here. They are saved only in this browser.
How to use it
- Choose an image, drag it onto the box, paste it with Ctrl+V, or take a photo on your phone.
- Move over the image. The round loupe shows the pixels under the pointer, enlarged, with the current HEX code.
- Click or tap the pixel you want. Use the arrow keys for one-pixel steps and Enter to pick.
- Copy the HEX, RGB, HSL or CMYK code with its Copy button.
How the color name is chosen
The tool compares your color with the named colors in the CSS standard, the names every web browser understands, such as navy, teal, coral and goldenrod. The comparison is made in the CIELAB color space, which is designed so that equal distances look roughly equally different to people. The name with the smallest distance wins.
Most colors fall between two names. The result therefore says "closest CSS name" and shows the hex code of that named color, so you can see how close it is. If your color is exactly a named one, it says so.
Describing a color
HSL is the easiest code to read in words. The hue (H) says which color family it is: around 0° red, 30° orange, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta. Saturation (S) says how strong it is, from gray at 0% to vivid at 100%. Lightness (L) goes from black at 0% to white at 100%, with the purest color at 50%.
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 | 0°, 100%, 50% |
| Lime green | #00FF00 | 120°, 100%, 50% |
| Blue | #0000FF | 240°, 100%, 50% |
| White | #FFFFFF | 0°, 0%, 100% |
| Black | #000000 | 0°, 0%, 0% |
| Mid gray | #808080 | 0°, 0%, 50% |
| Dodger blue | #1E90FF | 210°, 100%, 56% |
| Tomato | #FF6347 | 9°, 100%, 64% |
| Gold | #FFD700 | 51°, 100%, 50% |
| Rebecca purple | #663399 | 270°, 50%, 40% |
| Teal | #008080 | 180°, 100%, 25% |
| Saddle brown | #8B4513 | 25°, 76%, 31% |
HSL rounded to whole numbers. CMYK from the simple formula below, without a color profile.
Good to know
- Compression: JPEG photos store color in small blocks, so neighboring pixels in a "flat" area can differ by a few values. Use the 3×3 or 5×5 sample size for an average.
- Edges: the pixels where two colors meet are a blend of both. Zoom in and pick from the middle of an area.
- Color profiles: browsers convert images to the standard sRGB space before the page can read them. A photo saved in a wider space, such as Display P3 from a recent phone, can give slightly different numbers here than in a photo editor that works in that space.
- Light and camera: a photo records the light that hit the object, not the object’s "true" color. Shade, warm bulbs and the camera’s white balance all shift it.
Frequently asked questions
How do I identify a color in a picture?
Open the picture here and click the color. You get its exact codes and the closest standard color name. For a word description, look at the HSL value: the hue tells the color family, saturation the strength and lightness how light or dark it is.
What are CSS color names?
They are color names defined in the CSS standard that every browser understands, from aliceblue to yellowgreen. Many come from older X11 computer color lists. They are convenient for the web but are not paint or textile color names.
Can this tell me the Pantone or paint brand color?
No. Pantone and paint brand colors are physical references, and their exact screen values are owned by the brands. This tool gives screen color codes and the nearest CSS name. Compare with the brand’s own swatches or a physical sample.
Why is the closest name sometimes surprising?
Named colors are spread unevenly. There are many light grays and blues, but few dark purples or olive shades. A color in a sparse area can be some distance from the nearest name, which is why the tool shows the named color for comparison.
Which code should I give a printer or a designer?
For screens and the web, give the HEX code. For print, give the HEX or RGB code and let the printer convert it with their profile, or ask for a proof. The CMYK numbers here are an approximate starting point.
Last updated: October 15, 2026