Naming colors in design systems (beyond blue-500)
Engineers want blue-500. Brand wants Ocean Mist. Users do not care — but your repo needs names that still make sense in six months.
Two naming layers usually work: numeric ramps (brand-50…950) and semantic aliases (text-primary, surface-elevated). Mix them up and people file bugs against the wrong hex.
When human names help
Specs, marketing decks, and support tickets use “burgundy,” not #800020. The color name finder maps HEX to the nearest common name — handy for docs, not for CSS class names.
Keep CSS boring on purpose
Variables should describe role. Save poetic names for Figma styles. Export consistent ramps from the CSS variables generator so web and Android share numbers.