Color Name Finder

How to use the color name finder

1. Choose a color with Pick a color, or type a value in Color code: a HEX code such as #1E90FF, rgb(30 144 255), hsl(210 100% 56%) or any other CSS color.
2. The first time, the tool loads its list of about 32,000 color names (a few hundred kilobytes, once per visit). After that, results appear as you type.
3. Read the Closest name next to Your color. When the code is in the list exactly, the label says Exact match.
4. Below, the 5 closest names and the Closest CSS named colors are listed with their HEX code and their distance (ΔE). Use Copy name or Copy HEX to take one.
5. Change Match with to compare with CIEDE2000 (CIELAB) or OKLab distance, or click Random color to explore.

The color and the search stay in your browser.

Where the names come from

The names come from color-name-list, an open-source collection maintained by David Aerne and many contributors under the MIT license. It gathers around 32,000 unique names from paint charts, historical color dictionaries, nature, pop culture and community suggestions, from “Absolute Zero” to “Zucchini”. Each name belongs to exactly one HEX code. The names are in English.

The tool also compares your color with the 148 CSS named colors of CSS Color Level 4 (tomato, rebeccapurple, dodgerblue…), which every browser understands. Synonyms that share the same code are shown together, such as gray / grey or aqua / cyan. These are the names to use in a stylesheet when you want something readable.

How the nearest color is chosen

Comparing HEX codes digit by digit does not work: #808080 and #7F8080 are nearly identical, but a small change in a different channel can look very different. The tool converts every color to a perceptual color space and measures distances there.

• CIEDE2000 (CIELAB) is the International Commission on Illumination’s color difference formula, used in print and paint matching. It corrects the older CIELAB distance for how our eyes judge lightness, chroma and hue, especially in blues and near-greys. The implementation follows Sharma, Wu and Dalal (2005) and is tested against their reference data.
• OKLab distance is the straight-line distance in OKLab, a modern space designed for even perceptual steps. It is shown multiplied by 100 so it reads on a scale similar to ΔE2000. It is faster and often agrees with CIEDE2000; when they disagree, the differences are subtle.

As a guide, a ΔE below 1 is invisible to most people, 1 to 2 is a very slight difference seen side by side, and above 5 the colors look clearly different. If the closest name has a large ΔE, your color simply falls between named colors.

Ideas for using color names

• Name design tokens and palette swatches with something friendlier than a code.
• Describe a color in an e-mail, a product listing or alt text.
• Find a CSS keyword close to a brand color for quick prototypes.