There Are 16.7 Million Hex Colors. Most of Them Have Names.

I was writing documentation for a design system and needed to describe #E8D5B7. I could have written "a light warm beige," but that is imprecise. Two designers reading "light warm beige" will picture different colors. I could have used the hex code, but hex codes are meaningless to non-developers. What I wanted was a name -- a specific, recognizable name that both developers and designers could agree on.

Turns out, the world of named colors is larger and more structured than I expected.

The CSS named colors

CSS defines 148 named colors that browsers understand natively. These come from two sources: the original 16 HTML colors (black, white, red, blue, etc.) and 132 additional colors from the X11 color set, which dates back to the 1980s Unix window system.

color: cornflowerblue;     /* #6495ED */
color: rebeccapurple;      /* #663399 */
color: papayawhip;         /* #FFEFD5 */
color: lemonchiffon;       /* #FFFACD */

Some of these names are sensible (darkblue is darker than blue). Many are arbitrary (what does "papayawhip" look like without looking it up?). And some are inconsistent: darkgray (#A9A9A9) is lighter than gray (#808080), because gray was defined in CSS Level 1 and darkgray was inherited from X11, where the naming convention was different.

The most recently added named color is rebeccapurple (#663399), added in 2014 as a tribute to Rebecca Meyer, the daughter of CSS pioneer Eric Meyer, who passed away at age six. It is the only CSS named color with a known origin story.

Beyond CSS: comprehensive color naming

The 148 CSS names cover a tiny fraction of the 16,777,216 possible 24-bit colors. Several projects have attempted to name them all, or at least provide names for a much larger set.

Pantone maintains a proprietary library of approximately 2,000 standardized colors used in print and manufacturing. Pantone names are functional (Pantone 286 C is a specific blue used in corporate branding), but the library is neither free nor web-focused.

Name That Color by Chirag Mehta maps any hex value to the nearest named color from a curated list of approximately 1,500 names. It uses the Euclidean distance in RGB space to find the closest match.

Crayola has named approximately 200 colors in their crayon line. These names are surprisingly useful for communication because most people recognize them: "cerulean," "burnt sienna," "macaroni and cheese."

Resene and Benjamin Moore maintain thousands of paint color names. These names are practical for physical applications but verbose for code (Benjamin Moore's "Hale Navy" or Resene's "Wishing Well").

The distance problem

Finding the "closest" named color to an arbitrary hex value requires a distance metric. The naive approach -- Euclidean distance in RGB space -- is fast but perceptually inaccurate.

// Euclidean distance in RGB space
function rgbDistance(c1, c2) {
  return Math.sqrt(
    Math.pow(c1.r - c2.r, 2) +
    Math.pow(c1.g - c2.g, 2) +
    Math.pow(c1.b - c2.b, 2)
  );
}

The problem: a 10-unit difference in the green channel is more visually apparent than a 10-unit difference in the blue channel, because the human eye is more sensitive to green. Two colors that are equidistant in RGB may not look equidistant to a human.

Better approaches use perceptually uniform color spaces:

CIELAB (L*a*b*) was designed by the International Commission on Illumination specifically for perceptual uniformity. The Euclidean distance in LAB space (called Delta E) correlates much better with perceived color difference. A Delta E of 1.0 is approximately the smallest difference a trained observer can detect.

Delta E < 1:    Not perceptible to most observers
Delta E 1-2:    Perceptible through close observation
Delta E 2-10:   Perceptible at a glance
Delta E 11-49:  Colors are more similar than opposite
Delta E 100:    Colors are exact opposites

OKLAB is a more recent alternative that improves on CIELAB's uniformity, particularly for blues and saturated colors. If you are implementing color name matching today, OKLAB distance is the better choice.

Why color naming matters in practice

Design communication. In a team, "use the salmon color" is ambiguous. "Use #FA8072" is precise but requires a color picker to interpret. "Use Salmon (#FA8072)" gives both human readability and machine precision.

Accessibility descriptions. Screen readers can speak color names. If your interface uses color-coded status indicators with visible labels, those labels should contain recognizable color words, not hex codes.

Search and organization. If you are building a color-related tool (a palette generator, a design system, a theme builder), named colors are essential for search. Users search for "blue" or "warm gray," not for "#8B8682."

Variable naming in code. CSS custom properties and Sass variables benefit from descriptive names. --color-cornflower is more maintainable than --color-6495ed, and knowing that #6495ED maps to "cornflower blue" helps you choose meaningful names.

Common mistakes

Trusting color names as specifications. Color names are approximations for human communication. If you need a specific color, use the hex code. "Teal" could mean #008080 (CSS teal), #008B8B (CSS darkcyan, which many people call teal), or any of a dozen other blue-greens depending on context.

Assuming color names are universal. Different cultures associate different names with the same colors. The boundary between "blue" and "green" varies significantly across languages. Russian speakers distinguish "goluboy" (light blue) and "siniy" (dark blue) as separate color categories, while English speakers consider them shades of one color.

Using names for machine processing. Named colors are for human interfaces. If you are storing, comparing, or computing with colors, always use a numeric representation (hex, RGB, or LAB). Convert to names only at the presentation layer.

Forgetting alpha. Named colors do not support alpha transparency. If you need a semi-transparent version of cornflowerblue, you cannot write cornflowerblue/50. You need to convert to the numeric format: rgb(100 149 237 / 0.5).

When I need to find the name for a hex value -- for documentation, variable naming, or just satisfying my curiosity about what #E8D5B7 is called (it is "Bone," in case you were wondering) -- I use the color name finder at zovo.one/free-tools/color-name-finder.

Color names bridge the gap between the precision machines need and the language humans use. Use hex for code. Use names for conversation. And when a designer says "make it a warm blue," you will at least know they mean something around #4682B4 and not #0000FF.

---

I'm Michael Lip. I build free developer tools at zovo.one. 350+ tools, all private, all free.