Color Name Finder — Upload Image, Click Pixel, Get Name
Upload any image and click any pixel to instantly identify what color it is called. Get the color name, hex code, RGB, HSL, nearest Tailwind CSS class, and WCAG contrast rating — all in one click. Includes a live hover preview, pixel-level magnifier, and 12-slot color history. 150+ named colors. Your image never leaves your browser.
Upload an image and click any pixel to identify its color name
JPG, PNG, GIF, WebP, BMP · Max 20MB
Images stay in your browser — never uploaded
or enter a hex code below
to identify its color name
Rate this tool
How to find the name of a color from an image
Everything a color name finder needs
LazyTools vs other color name finders
| Feature | LazyTools | ArtyClick | colorpickerfromimage.com | color-name.com |
|---|---|---|---|---|
| Color name matching accuracy | ✅ LAB Delta E | ✅ LAB (CIEDE2000) | ⚠ RGB distance | ⚠ RGB distance |
| Number of named colors | ✅ 150+ CSS names | ✅ 1,700+ names | ⚠ CSS 140 only | ✅ 1,500+ names |
| Pixel magnifier loupe | ✅ Yes | ❌ No | ✅ Yes | ❌ No |
| Tailwind CSS class | ✅ Yes | ❌ No | ❌ No | ❌ No |
| WCAG contrast badge | ✅ AA + AAA | ❌ No | ❌ No | ❌ No |
| Hex input (no image needed) | ✅ Yes | ✅ Yes | ❌ Image only | ✅ Yes |
| Color history | ✅ 6-slot | ❌ No | ✅ Yes | ❌ No |
| Privacy (browser-only) | ✅ Never uploaded | ⚠ Not stated | ✅ Browser only | ⚠ Not stated |
Browse all 150+ named colors — click to identify
Click any swatch to load it into the color name finder and see its full details.
What Is a Color Name? — Complete Guide to Color Naming
A color name is a human-readable label assigned to a specific set of color values. Instead of remembering #dc143c, we say “crimson”. Instead of rgb(70,130,180), we say “steelblue”. Color names exist in multiple standardized systems — CSS, Pantone, RAL, NCS, Munsell — each used in different industries. The Color Name Finder above uses the CSS and extended web color name system, which is the most relevant for digital designers and developers.
How to find the name of a color from an image
The most reliable way to find a color name from an image is to use a pixel-picking tool that identifies the exact RGB values of a pixel, then matches those values against a color name database using perceptually accurate color distance. The tool above does this in three steps: (1) reads the pixel’s RGB values from the HTML5 Canvas, (2) converts both the pixel and every named color to CIE LAB color space, (3) returns the named color with the smallest Delta E (perceptual color difference).
The key advantage of LAB color distance over simple RGB distance is that LAB is designed to model human visual perception. Two colors that look similar to the eye will have a small Delta E, even if their RGB values are very different. This is why the Color Name Finder returns the name that looks most correct, not just the one that is mathematically closest in RGB.
Common CSS color names reference
| Color name | Hex | Category | Common use |
|---|---|---|---|
| crimson | #dc143c | Red | Danger, error states, accents |
| tomato | #ff6347 | Red-orange | Notifications, alerts |
| orange | #ffa500 | Orange | Warning states, energy brands |
| gold | #ffd700 | Yellow | Premium, ratings, highlights |
| forestgreen | #228b22 | Green | Success, nature, eco brands |
| turquoise | #40e0d0 | Cyan-green | Refresh, water, calm brands |
| royalblue | #4169e1 | Blue | Trust, professionalism |
| midnightblue | #191970 | Dark blue | Night themes, depth |
| darkmagenta | #8b008b | Purple | Luxury, creativity |
| hotpink | #ff69b4 | Pink | Fashion, feminine brands |
| brown | #a52a2a | Brown | Earth, coffee, food |
| slategray | #708090 | Gray | UI surfaces, muted text |
What are the 140 CSS color names?
The CSS Color specification defines 140+ named colors, from AliceBlue to YellowGreen. These names were standardized by the W3C and are supported in all browsers. They can be used directly in CSS: color: cornflowerblue; or background: mistyrose;. The full set includes:
| Group | Examples | Count |
|---|---|---|
| Reds | red, crimson, firebrick, indianred, lightcoral, salmon, darksalmon | 9 |
| Oranges | orange, darkorange, coral, tomato, orangered | 5 |
| Yellows | yellow, gold, lightyellow, lemonchiffon, palegoldenrod, khaki | 8 |
| Greens | lime, green, forestgreen, darkgreen, seagreen, limegreen, mediumseagreen | 19 |
| Blues | blue, navy, royalblue, steelblue, dodgerblue, deepskyblue, skyblue | 16 |
| Purples | purple, violet, orchid, plum, mediumorchid, mediumpurple, blueviolet | 13 |
| Pinks | pink, hotpink, deeppink, lightpink, palevioletred, mediumvioletred | 6 |
| Browns | brown, saddlebrown, sienna, chocolate, peru, sandybrown, burlywood | 9 |
| Whites | white, snow, ivory, seashell, floralwhite, mintcream, honeydew | 14 |
| Grays | gray, silver, dimgray, lightgray, darkgray, slategray, gainsboro | 10 |
Color name systems: CSS vs Pantone vs RAL
CSS color names are the standard for web and digital design. They map directly to hex/RGB values and work in all browsers and design tools. This is what the Color Name Finder uses.
Pantone is a proprietary system for print and physical materials. Pantone colors are identified by number (e.g., Pantone 185 C) and have precise ink formulations for consistent print reproduction. The Color Name Finder can suggest approximate Pantone equivalents for common colors.
RAL is used in European industrial and architectural applications. RAL colors are identified by 4-digit codes (e.g., RAL 3020 for Traffic Red). They are used for paint, powder coatings, and building materials.
Color name finder vs image color picker — what is the difference?
An image color picker extracts the technical color code (hex, RGB) from a pixel in an image. It tells you what the color value is. An image color picker on LazyTools can be found at lazytools.io/image-colour-picker/ and extracts a full dominant palette from any photo.
A color name finder goes one step further and tells you what the color is called. It converts the technical code into a human-readable name that can be communicated and remembered. The tool on this page combines both functions: it picks the pixel color AND returns the name.
Why “what color is this?” is so commonly searched
People search for color names for many reasons. Designers need to describe colors verbally to clients, developers need to match a brand color to the nearest CSS name, photographers want to label the colors in their images, artists need to know what pigments to mix, and everyday people encounter a color they love and want to describe it. The Color Name Finder above handles all these use cases — just upload the image and click the pixel.
Color name finder FAQ
Upload your image to the Color Name Finder above, then click the pixel whose color you want to name. The tool instantly shows the nearest color name (crimson, steelblue, gold, etc.), hex code, RGB, HSL, Tailwind class, and WCAG contrast. No account needed.
#3b82f6 is closest to ‘cornflowerblue’ or ‘royalblue’ in CSS named colors. It is Tailwind blue-500 — the default vibrant blue used for buttons and links in Tailwind UI.
The Color Name Finder above is 100% free with no account required. Upload any image (JPG, PNG, GIF, WebP, BMP), click any pixel, and get the color name instantly. Images never leave your browser.
Common CSS color names include: red, blue, green, yellow, orange, purple, pink, brown, gray, white, black, navy, teal, maroon, olive, lime, aqua, fuchsia, silver, gold, coral, salmon, crimson, turquoise, lavender, violet, indigo, and 100+ more. Browse the full palette above.
#ef4444 is closest to ‘red’ or ‘crimson’ in named colors. It is Tailwind red-500 — used for error states, alerts, and danger indicators in Tailwind UI projects.
The tool reads the pixel’s RGB from the canvas, converts it to CIE LAB color space, then calculates Delta E (color difference) against every named color. The named color with the smallest Delta E is returned. LAB is used because it models human visual perception — not just RGB math.
#ff6347 is ‘tomato’ — one of the 140 official CSS named colors. It is a vivid reddish-orange. In Tailwind CSS it is closest to orange-500 (#f97316) or red-500 (#ef4444).
Yes — use the hex input bar below the image area. Enter any 6-digit hex code (without #) and click “Find name”. The tool instantly returns the nearest color name and all codes without needing an image.
Gray (#808080) is named ‘gray’ in CSS. Nearby named grays: silver (#c0c0c0), darkgray (#a9a9a9), lightgray (#d3d3d3), dimgray (#696969), slategray (#708090), gainsboro (#dcdcdc), whitesmoke (#f5f5f5).
A color picker gives you the technical color code (hex, RGB). A color name finder gives you the human-readable name. The Image Colour Picker at lazytools.io/image-colour-picker/ extracts dominant palette colors. This Color Name Finder picks a pixel AND names it. They complement each other.
No. Your image is drawn onto an HTML5 Canvas element in your browser. All pixel reading happens locally using the Canvas API. No image data is ever sent to any server. Your images are completely private.
CSS defines 140+ named colors from AliceBlue to YellowGreen, covering reds, oranges, yellows, greens, blues, purples, pinks, browns, whites, and grays. Browse the full palette above or use any name directly in CSS: color:cornflowerblue; background:mistyrose;
The most accurate algorithm uses CIEDE2000 or standard Delta E in CIE LAB color space. Both model how the human eye perceives color differences. Simple RGB Euclidean distance is less accurate because RGB doesn’t match human perception. This tool uses CIE LAB Delta E for accurate results.