CSS Named Color Lookup

CSS Named Color Lookup

CSS defines 148 named colors.¹ Finding the closest one is not obvious.

Most converters match named colors by minimum RGB distance, which finds a numerically close color but not necessarily the visually closest one. Pink and brown can share similar RGB integers while looking completely different to a human observer. This tool measures perceptual distance in OKLab space, the same model used by modern color science, to find the named color that looks most like your input, with a swatch so you can judge the approximation before using it.

How perceptual distance matching works

OKLab is a perceptually uniform color space where Euclidean distance between two points correlates with perceived color difference.² To find the closest CSS named color, the tool converts your input to OKLab coordinates, then computes the Euclidean distance to all 148 CSS named color values in the same space. The named color with the smallest distance is the closest perceptual match. Consequently, a muted red finds "firebrick" rather than a numerically close but visually distant alternative like "salmon", because the perceptual distance is the governing metric rather than the raw RGB channel difference. This is why OKLab matching consistently returns the name that a human observer would point to when comparing the two colors side by side.

When named colors are useful

Named colors improve code readability when the name is unambiguous and the color is exactly right. Writing color: rebeccapurple is more communicative than color: #663399 when the purple is intentional and specific. Named colors parse slightly faster than hex in some older engines and carry zero additional bytes. Yet named colors work only when the match is exact, because approximating a brand color as "tomato" when the actual color is a slightly different red creates a subtle but persistent visual inconsistency across every element that uses it. Teams that adopt established names like "rebeccapurple" or "tomato" for their brand palette get self-documenting CSS that new developers can reason about without memorizing hex codes.

The limits of named color matching

The 148 CSS named colors were not chosen for perceptual uniformity, so they include colors drawn from web tradition, X11 terminals, and Netscape's original palette rather than from a balanced perceptual sampling. The closest named color may still be a significant perceptual distance from the input. The swatch beside the matched name is essential: if the swatch looks visually different from the color you are converting, use the HEX or oklch() value instead. The only case where named colors should replace computed values in production CSS is when the designer explicitly specifies one as the intended color, not as a closest approximation.

How OKLab distance improves on RGB distance matching

RGB Euclidean distance treats each channel as equally important and operates in a gamma-corrected space, which means it systematically misjudges perceptual similarity. Two colors with an RGB distance of 100 can look nearly identical if the difference is concentrated in the blue channel, or look very different if it is concentrated in the green channel, because human vision is most sensitive to green. OKLab distance corrects for this by operating in a space where one unit of distance corresponds to roughly the same perceived difference in any direction.

Delta-E thresholds for practical matching

For named color lookup, a delta-E below 2 in OKLab space means the match is visually indistinguishable under normal viewing conditions. A delta-E between 2 and 5 is close enough for documentation purposes but may look slightly off side by side. Above 10, the named color is a poor representation of the input. The tool shows the closest match regardless of distance, which is why the swatch preview matters: it lets you visually confirm whether the named color is close enough for your use case before committing it to code.

The thresholds also help when you are choosing between two candidate names for the same token. If both fall under delta-E 2 you can pick on readability alone, but if one sits near 10 while the other is under 5, the closer one is the safer documentation label. Treating the number as a confidence score rather than a pass-fail test keeps the lookup useful even when no named color is a true match, because you always know how far the approximation strays from the input.

Named colors in design system documentation

Named colors serve as human-readable labels in design system documentation, even when the production CSS uses HEX or oklch(). A style guide that says "Use tomato for error states" communicates the intent more clearly than "Use #ff6347 for error states" because the name carries a shared visual reference. The named color lookup tool bridges the gap: it tells you whether a computed color from your design token system has a close named equivalent that you can use as the documentation label.

When to use named colors in production CSS

Using a named color in production CSS is appropriate when the named color is the exact color you want, not an approximation. The CSS named color "tomato" is defined as #ff6347; if your brand red is #ff6347, using color: tomato is correct. If your brand red is #c82a2a, the closest named color is "firebrick" at #b22222, but the delta-E is large enough that you should use the HEX value in production and reserve the named color for informal references only. CapyToolkit does not store any color data you enter during the lookup process.

The history and future of CSS named colors

The original 16 CSS1 named colors (black, white, red, green, blue, and 11 others) were inherited from HTML 3.2 and the X11 window system. CSS Color Level 3 added 131 more from the X11 palette, bringing the total to 147 plus "transparent." CSS Color Level 4 added only one: rebeccapurple (#663399), in 2014.³ The set has remained stable since then because the CSS Working Group has focused on functional color syntax (oklch(), color-mix()) rather than expanding the named palette. Future named colors are more likely to come from a potential CSS Color Level 5 or from design tool conventions than from the specification itself.

Comparing named color sets across platforms

Different platforms define different named color sets. X11 has 752 named colors; CSS has 148; macOS Color Picker has a smaller curated set. A color that has a name in X11 may not have a CSS equivalent, which is why the CSS named color lookup only searches the 148 CSS-defined values. If you are working across platforms and need a shared color reference, HEX is the only format that is unambiguous everywhere. Named colors are a convenience layer on top of the numeric value, not a replacement for it.

When to use this

Use this when you want to confirm whether your color is close enough to a named CSS color to use it by name in a stylesheet, or when you need a human-readable label for a color in documentation or code comments.

Examples

#ff6347

tomato

#c82a2a

firebrick (#b22222)