How Developers Use HEX Codes in CSS

HEX color codes are compact and widely supported, making them a natural choice for storing canonical color values in stylesheets and design tokens. This guide walks through practical patterns developers use in production: semantic tokens, derived variants, theming strategies, and automation to keep color systems consistent across platforms.

Why store colors as HEX tokens?

HEX is straightforward and human-readable. It maps directly to RGB channels and is small enough to be used as canonical values in style systems. When paired with CSS variables, HEX tokens become a single source of truth that can be referenced anywhere in your app.

Semantic naming and token design

Use semantic naming for tokens so intent stays clear and you can swap palettes without refactoring component code. Examples:

:root {
  --color-bg: #FFFFFF;
  --color-surface: #F7F8FB;
  --color-action: #6A11CB;
  --color-accent: #2575FC;
  --color-text: #111827;
}

Don't name tokens after literal colors (like --color-blue) unless that literal hue is part of the contract. Semantic tokens let you change visual identity while preserving component intent.

Derived variants and HSL

For tints, shades, and interactive states (hover, active, disabled), derive variants from a base color. One pattern is to store the base HEX and precompute HSL variants during build time, or store additional HEX variables if you prefer a static approach.

/* Derived tokens */
:root {
  --color-action-600: #5010A0; /* darker */
  --color-action-400: #8347E0; /* lighter */
}
button { background: var(--color-action); }
button:hover { background: var(--color-action-600); }

Using build-time tools like Style Dictionary, you can generate these variants from a single input token so designers only edit one source value.

Theming and runtime switching

Support dark mode and custom themes by grouping tokens into theme objects and swapping them at runtime. Example:

html[data-theme='light'] { --color-bg: #FFFFFF; --color-text: #111827; }
html[data-theme='dark'] { --color-bg: #0B1220; --color-text: #E6EEF7; }

Switch data-theme on the <html> element to toggle themes without repainting components.

Accessibility considerations for developers

Include accessible variants as part of your token set. For example, if --color-action fails contrast with white text in some contexts, provide --color-action-contrast and automate checks to ensure all semantic pairings meet WCAG targets.

Automation and build-time tooling

Use token pipelines to transform a canonical token file into platform-specific outputs (CSS, SCSS, JSON, iOS/Android resources). Style Dictionary, Theo, and custom scripts help keep tokens in sync with design tools and prevent manual drift.

Performance and maintenance tips

Keep token files small and canonical — avoid duplicating colors in multiple places.
Run token linting in CI to prevent invalid formats or accidental duplicates.
Document token purpose and usage examples in Storybook or a style guide to reduce misuse.

Conclusion

HEX codes remain a robust basis for design tokens. Combine semantic naming, derived variants, theming techniques, and automated token pipelines to create a maintainable and accessible color system that scales with your product.

FAQ

Q: Should I store tokens as HEX or HSL?

A: Store tokens in HEX for canonical storage and handoff. Use HSL during derivation to generate predictable tints and shades, ideally at build time to avoid runtime computation costs.

Back to Blog · Related: How to Build a Perfect UI Color System