Find the name of any color
HEX codes are precise but hard to talk about. "Use #3a7bd5 for links" means little in a meeting; "a steel-blue" does. This color name finder describes any colour in plain words and lists the closest of the 148 named colours defined in CSS, from aliceblue to yellowgreen.
Two kinds of names
- Description: a generated phrase such as "light grayish teal", built from the colour's lightness, chroma and hue in OKLCH. It is useful in documentation and alt text.
- Nearest CSS names: real keywords you can use in stylesheets, ranked by CIEDE2000 colour difference (ΔE).
Example: #3a7bd5 is described as a blue and its closest CSS keyword is steelblue. A ΔE under 1 means the colour is effectively identical to the named one, under 3 very close.
When to use named colors
CSS colour keywords are handy for prototypes, teaching and quick debugging (outline: 2px solid tomato). For production design systems, prefer custom properties with your own names, such as --color-brand, because the 148 keywords were never designed as a harmonious palette.
Browse all keywords with the HTML color names list, or convert the value between formats with the color converter.
CSS color names that surprise people
darkgray(#A9A9A9) is lighter thangray(#808080), a quirk inherited from the X11 color list.aquaandcyanare the same color (#00FFFF), as arefuchsiaandmagenta(#FF00FF).- Every name containing “gray” also has a “grey” spelling, such as
slategrey, which is why the list is longer than the number of distinct colors. rebeccapurple(#663399) was added in memory of Rebecca Meyer, the daughter of CSS expert Eric Meyer.transparentandcurrentcolorare color keywords, but they are not fixed colors, so the finder never suggests them.
How the matching works
Your colour and every named colour are converted to the CIE Lab colour space, and the difference is measured with the CIEDE2000 formula, which weights differences in lightness, chroma and hue the way human vision perceives them. That is why the finder sometimes prefers a name whose HEX code looks numerically further away: the numbers in HEX do not correspond to how different two colours look. The side-by-side swatches let you confirm the match with your own eyes, and the formats panel gives the same colour as HEX, RGB, HSL, HSV, OKLCH, Lab and CMYK.
Using descriptions for accessibility
When you write alt text or product descriptions, a phrase such as "dark teal" is far more helpful to screen-reader users than a HEX code. The generated description gives you a neutral starting point that you can refine.
Privacy
The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.