Web Color Models: Demystifying HEX, RGB, HSL, and Modern CSS Colors
The visual representation of colors across web applications and UI design systems has evolved radically from early 16-color monitors. While displays emit additive light channels (Red, Green, Blue), the W3C CSS Color Module Level 4 and 5 specifications introduced ergonomic color spaces that empower intuitive theme construction, dark mode variations, and accessible design tokens.
1. Color Model Deep Dive
- HEX (#RRGGBB / #RRGGBBAA): Compact 6-digit (or 8-digit with alpha) hexadecimal notation. Universally favored in Figma, design systems, and static CSS variables.
- RGB / RGBA (rgb(r, g, b)): Defines channel intensity on a scale from 0 to 255. Directly controls display hardware pixel sub-emitters.
- HSL (hsl(hue, saturation, lightness)): Highly ergonomic for developers. Hue represents a 0°–360° color wheel, while Saturation and Lightness are percentage values (0%–100%). Modifying lightness from
hsl(220, 90%, 50%)tohsl(220, 90%, 15%)instantly yields an authentic dark mode shade of your primary brand tone.
2. Web Accessibility & WCAG 2.1 Contrast Standards
The Web Content Accessibility Guidelines (WCAG 2.1) mandate minimum contrast ratios between foreground text and background surfaces to guarantee readability for individuals with low vision or color blindness:
- Level AA (Standard Compliance): Contrast ratio of at least 4.5:1 for body text and 3:1 for large text (18pt+ or bold 14pt+).
- Level AAA (Enhanced Compliance): Contrast ratio of at least 7:1 for body copy.
Frequently Asked Questions (FAQ)
What is Wide Gamut (e.g. Display P3)?+
Traditional sRGB only covers a fraction of colors visible to the human eye. Modern OLED and Retina screens support Display P3, rendering greens, magentas, and cyans up to 50% more vibrant than legacy sRGB monitors.
Why is HSL preferred for design tokens?+
Because HSL separates color identity (hue) from surface illumination (lightness). You can establish state variants (hover, active, focus) and theme toggles merely by adjusting lightness percentages without altering your core branding hue.