How to use the Color Name Finder
- Enter a color. Type or paste a HEX code, an
rgb()orhsl()value, or click the swatch to use your system picker. In Chrome and Edge, Pick from screen grabs a color from anywhere on your display. - Read the closest name. The big panel shows the best match and how far away it is. A “≈” in front means the name is an approximation; no “≈” means your color is that named color exactly.
- Compare the five closest. Each row splits a chip in half — your color on the left, the named color on the right — so you can judge the difference by eye, not only by the number. Click a row to copy its HEX.
- Narrow the list. CSS keywords limits matches to the 148 names browsers understand; Pigments limits them to traditional paint and pigment names such as ochre, viridian and Payne’s grey.
- Copy what you need. The table gives HEX, RGB, HSL, HSB, CMYK, OKLCH, CIELAB and LCh with their own copy buttons. Copy as CSS variable writes something like
--color-ochre: #C97A2B;, and Copy summary puts the whole result in plain text.
It also works backwards: type “prussian blue” or “non-photo blue” into the color box and you get the code.
Why “closest” needs a perceptual distance
The obvious way to match colors is to treat red, green and blue as coordinates and pick the shortest straight line. It fails in a predictable way, because the eye is far more sensitive to some of those directions than to others. Take a muted moss green, #8A9A5B. Among the CSS keywords, the nearest by RGB distance is gray (#808080), and the CIEDE2000 difference between them is 21.6 — a green called gray. Ranked by ΔE2000 instead, the nearest keyword is olivedrab (#6B8E23) at 9.2, which at least gets the family right.
The pattern repeats across muted colors, which are exactly the ones artists use most:
| Your color | Nearest by RGB distance | Nearest by ΔE2000 |
|---|---|---|
#8A9A5B moss |
gray, ΔE 21.6 |
olivedrab, ΔE 9.2 |
#7A9E7E sage |
gray, ΔE 19.6 |
darkseagreen, ΔE 9.0 |
#F2CC8F sand |
khaki, ΔE 11.6 |
navajowhite, ΔE 4.9 |
#D4A373 tan |
darksalmon, ΔE 12.0 |
burlywood, ΔE 6.1 |
ΔE2000 converts both colors to CIELAB, a space modeled on human vision, then corrects for the places where even Lab is uneven — blues, near-neutrals and very saturated colors. A value around 1 is the smallest difference most people can see side by side. That is the number shown next to every match.
One name, two colors
Color names are conventions, and different communities settled on different conventions. The CSS keywords came largely from the X Window System’s color list of the 1980s, while traditional names come from dye makers, paint charts and color dictionaries. The same word can land a long way apart:
| Name | CSS keyword | Traditional value | ΔE2000 |
|---|---|---|---|
| Azure | #F0FFFF, nearly white |
#007FFF, a strong blue |
41.3 |
| Violet | #EE82EE, light orchid |
#8000FF, color-wheel violet |
31.0 |
| Plum | #DDA0DD, pale lilac |
#8E4585, the fruit’s skin |
30.1 |
| Lavender | #E6E6FA, faint blue-white |
#B57EDC, the flower |
28.1 |
| Chocolate | #D2691E, orange-brown |
#7B3F00, dark brown |
22.2 |
The CSS list has its own quirk: darkgray (#A9A9A9) is lighter than gray (#808080), lightness 69.2 against 53.6. HTML’s 16 original colors took gray from the old VGA palette, while darkgray arrived later from X11, where plain gray was #BEBEBE. Then there’s rebeccapurple (#663399), added in 2014 in memory of Rebecca Meyer, daughter of the CSS author Eric Meyer.
Where the names come from
The finder searches 517 names. All 148 CSS keywords are included, and their values were checked against what Chrome itself draws. The other names are traditional, pigment and standards names whose values come from the references compiled in Wikipedia’s list of colors: Maerz and Paul’s A Dictionary of Color from 1930, the ISCC–NBS color-name system, Crayola, and the reference hues of the Munsell and NCS systems, plus process CMYK inks and FOGRA rich blacks for printmakers. Each match is tagged as a CSS keyword, a pigment name, a print or color-system standard, or a common name, so you know what kind of authority it carries.
Pigment names describe the historical color, not a specific tube, so treat them as shared vocabulary rather than a mixing recipe.
Tips from practice
Name a client palette in words and codes. “Ochre, sage and Payne’s grey” is easier to discuss on a call than three HEX codes, but always send the codes too. The name opens the conversation; the code ends the argument.
Treat ΔE over 10 as “in the family of”. If the best match is 12 away, the name is a description, not an identity. Say “a muted sage, close to darkseagreen” rather than calling it darkseagreen.
Use the variable, not the keyword, in code. A CSS custom property such as --color-ochre keeps your stylesheet readable and lets you adjust the value later without hunting through files. Keep keywords for quick prototypes.
Give your own colors your own names. For a branded palette or a shop’s product colors, a matched dictionary name may be too generic. The Color Palette Name Generator suggests names based on the actual hues, and the finder tells you which existing names to avoid colliding with.