Color Name Finder

In-Depth Guide

The CSS Color Module Level 4 defines 147 named colours: the original 17 from CSS 2.1 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, orange) plus the 130 extended X11 names inherited from the venerable X Window System rgb.txt file compiled decades ago on Unix workstations. The catch is that those names were picked ad-hoc and map to specific RGB triples that rarely match the perceptual name a reviewer expects. DarkSalmon is lighter than LightCoral; MediumPurple is more lavender than MediumOrchid. A colour-name finder takes any hex or RGB input and returns the nearest named colour by perceptual distance (Delta E 2000), plus the 147-name list sorted by similarity. FastTool's finder also surfaces xkcd's crowd-sourced 949-name dataset, giving you cool grey and asparagus as well as the CSS-standard names.

Why This Matters

Design-system tokens read better as names than as hex strings: tomato-500 is immediately parseable by a reviewer, while #e8552a requires a colour picker lookup and mental translation back to the visual. But naming a colour correctly requires knowing what it is near; is this a tomato, a salmon, a coral? A finder that maps arbitrary hex to the nearest recognised name accelerates the design-token naming step and keeps the token library consistent with CSS and designer-community conventions, reducing onboarding friction for new hires.

Real-World Case Studies

• Design token naming pass. A product designer is naming 32 colour tokens for a new design system under tight deadline. She runs each hex through the finder, takes the top suggested name, and appends the scale step (coral-500, mint-200, rose-700). The naming pass takes fifteen minutes instead of two hours, and the final tokens match developer intuition better than the team's previous brand-primary-alt-hover convention that required a lookup table to decode during code review discussions.
• CSS inherited codebase. A frontend engineer auditing a six-year-old stylesheet finds 47 unique hex values with no documented meaning or semantic grouping. She runs each through the finder, groups by nearest name, and discovers the codebase uses twelve shades of what the finder calls silver and gainsboro for borders alone. Consolidating to three tokens cuts CSS size and ends the which-grey debate that had been running for years in design-review meetings.
• Brand storytelling. A brand illustrator naming a new five-colour palette for a food brand pulls names from the xkcd dataset instead of the CSS standard list: sunflower, aubergine, terracotta, moss, and bone. The names read as warm and earthy in the brand guidelines document, reinforcing the emotional brief in a way primary-orange-600 could not, and giving the copywriter hooks for product names that echo the palette naturally in store.

Technical Deep Dive

The finder stores the 147 CSS named colours (and optionally 949 xkcd names) as a table of (name, sRGB triple) rows loaded at boot. For each query colour, it converts both the query and each table entry to CIE Lab via the sRGB to linear RGB to CIE XYZ to Lab pipeline (D65 illuminant per sRGB spec), then computes Delta E 2000 distance using the CIEDE2000 formula (Sharma, Wu, Dalal, 2005). Delta E 2000 is preferred over Delta E 76 because it accounts for the perceptual non-uniformity of Lab* in the blue region and near-neutral hues where Delta E 76 systematically underestimates perceived difference. The table is sorted by Delta E ascending and the top N results returned to the UI. Lookup is O(n) per query but n is small (about 1000 max), so a single pass completes in under one millisecond on any device. Edge cases: achromatic colours (near-grey) may match multiple names with identical Delta E; the finder breaks ties by alphabetical order to stay deterministic across sessions. Colours outside sRGB gamut (like wide-gamut Display P3 inputs) are gamut-mapped first before the comparison pass runs.