Why naming colors matters
A design system with numeric colors (gray-500, blue-700)
is efficient but context-poor. A descriptive name (warm coral,
deep navy) communicates intent: marketing knows what color you mean
without opening the system, and designers can talk about hues without screen-sharing.
How our suggester works
We convert HEX to HSL and apply a decision grid:
- Hue chooses the family: 0-15° = red, 15-45° = orange, 45-65° = yellow, 65-150° = green, 150-200° = teal/cyan, 200-250° = blue, 250-290° = violet, 290-345° = magenta/pink, 345-360° = red.
- Lightness adds adjectives: <25% = deep / dark, 25-45% = rich / true, 45-65% = medium / vibrant, 65-80% = soft / dusty, >80% = pale / pastel.
- Saturation tunes: <20% = muted / gray, 20-50% = soft, 50-80% = warm / cool, >80% = vivid.
Combining them yields names like "deep navy", "soft coral", "muted teal" or "vivid amber".
Naming patterns in design systems
- Descriptive (
warm coral): communicative, great for small palettes and brand guidelines. - Numeric (
gray-500): scalable, technical, perfect for big systems with scales (50-950). - Semantic (
primary,danger,surface): the most maintainable. Changing the HEX doesn't break the name. Often combined with numeric (primary-500).
When to use which
Small brand: descriptive. Technical design system: numeric + semantic. Documented
brand palette: descriptive in the brand book and numeric in code. The trap is
mixing all three in the same place: --brand-coral-500-primary is
unreadable.
Why descriptive beats invented
Some online generators return ornamental or fantasy names that sound poetic but are ambiguous: nobody remembers which shade was which. Descriptive names based on real objects (coral, navy, sage, terracotta, oxford, sand) are universally understood, easy to communicate to a client or design team, and they scale across any palette.
Proper-name colors done right
Some brands use proper names successfully (Tiffany Blue, Klein Blue, Cadbury Purple) but they're exceptions: trademarked, tied to a specific brand and signaling exclusivity. For 99% of projects, start with descriptive and graduate to semantic when the system grows.