We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesBrandsRegionsJournalNotesGuidesFree ResourcesEmbed widgetConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
Design Systems
Search intent: color naming design system token names CSS variables Tailwind semantic

How to Name Colors in Design Systems: Poetic, Semantic, and Token Names

A practical guide to color naming — from evocative names that align teams emotionally to semantic token names that make design systems scalable and refactor-friendly.

Design SystemsColor TheoryNaming
Key points
Design systems need two color name tiers: primitive names (blue-500) that describe what the color is, and semantic names (interactive-default) that describe what the color does.
Poetic color names create shared vocabulary that shapes how teams talk about and use colors — naming a muted sage 'Morning Dew' changes the decisions made around it versus 'Muted Green 3'.
CSS custom property naming should encode semantic role and scale step, not hex value — this lets tokens adapt across themes without changing any component code.

Why color names matter in design systems

A color name is a contract between designers and developers — and between the present system and its future maintainers. When a designer says 'use Ocean Blue' and a developer writes '--color-blue-600', they are either describing the same thing or a future support ticket. Well-named colors reduce ambiguity, prevent inconsistency, and make design systems refactorable. A system where every color reference is by hex value is a system that cannot safely evolve.

Primitive vs semantic naming tiers

The two-tier model separates what a color is (primitive) from what it does (semantic). Primitives name the color itself: blue-100, blue-300, blue-500, blue-700. Semantics name the role: interactive-default, interactive-hover, text-secondary, surface-elevated. A button's background uses the semantic token '--interactive-default'; the token resolves to blue-500 in light mode and blue-300 in dark mode. The component never needs to know — and when you want to change the brand blue to teal, you change one primitive assignment, and every semantic reference updates automatically.

Poetic names and emotional alignment

Poetic color names — the kind used in paint systems (Farrow & Ball's 'Elephant's Breath'), fashion, and fine art — serve a different purpose: emotional alignment. When a brand calls their primary blue 'Horizon', every decision made about that color is filtered through what Horizon communicates — open, optimistic, slightly cool, expansive. Naming a color changes how teams use it. In large design organizations, shared poetic vocabulary helps maintain visual consistency without rigid specification enforcement, because teams self-select toward the named color's character.

CSS custom property naming conventions

For CSS design tokens, naming conventions should encode hierarchy and role: '--color-{primitive}-{step}' for raw values, '--color-{semantic-role}' for function. Common semantic categories: text (primary, secondary, disabled, inverse), surface (default, elevated, overlay, inset), border (default, strong, focus), and interactive (default, hover, active, disabled). Always use kebab-case and avoid encoding specific hex values in token names — '--color-blue-500' is fine; '--color-1a2b3c' is not, because it breaks as soon as the value changes.

Naming pitfalls to avoid

Three common color naming mistakes: using ordinal numbers without context ('color1', 'color2' — meaningless after six months), encoding current hex values in token names ('blue-1a72cf' — breaks on every palette update), and mixing semantic and primitive tiers without clear separation (calling a button background 'primary-blue' mixes intent and description). The cleanest systems have a strict rule: primitives are in one file/section and are never referenced directly in component code — everything goes through semantics.

Featured collection
Pearl Cloud

Soft cloud-white through silvery pearl to cool stone gray — a palette of refined neutrals with just enough blue-violet presence to read as sophisticated rather than sterile. For premium technology, luxury retail, and editorial design.

Open collectionAll collections
Open next
Color token naming guide (detailed)Design token generatorColor name generator
Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.

Upgrade to ProMore guides
Design Notes

One practical color note a week

Contrast and accessibility, color spaces like OKLCH, palette structure, design tokens — written for people who build things. No daily noise.

Get Design Notes weekly

One email a week. Unsubscribe anytime.

Related guides
Color Theory
Color and Typography Pairing: How Weight and Typeface Affect Perceived Color
The same hex value looks different at different type weights and across serif versus sans-serif typefaces. How to account for this interaction when calibrating text color for digital interfaces.
Color Theory
Color Palettes for Data Visualization: Sequential, Diverging, and Categorical
How to choose and build color palettes for charts and dashboards. Covers sequential, diverging, and categorical scale types, perceptual uniformity, rainbow scale problems, and accessibility for color-blind users.
Color Theory Guide
Monochromatic Color Palette: How to Design with One Hue
A monochromatic palette — all colors derived from a single hue — is one of the most elegant and underused strategies in design. Done right, it creates cohesion, sophistication, and calm. Done wrong, it looks flat and incomplete.