The Evolution of CSS Color Specifications
CSS color standards have evolved dramatically over the last three decades:
- CSS Level 1 (1996): Standardized 16 basic named colors (`red`, `blue`, `green`) and 6-digit HEX codes.
- CSS Level 2 (1998): Expanded system colors and full 6-character hex values.
- CSS Level 3 (2011): Introduced `rgba()`, `hsl()`, and `hsla()`.
- CSS Level 4 & 5 (2023–2026): Unlocked wide color gamuts (`oklch()`, `lch()`, `lab()`, `color(display-p3)`), relative color syntax, and `color-mix()`.
1. HEX (Hexadecimal notation)
Hexadecimal uses 6 characters (or 8 for alpha channel) in base-16 math (`0-9`, `A-F`):
/* HEX Syntax */
color: #3b82f6; /* Standard 6-digit HEX */
color: #3b82f680; /* 8-digit HEX with 50% opacity (80 in hex = 128 in decimal) */2. RGB & RGBA (Red, Green, Blue)
Defines channel values from `0` to `255` (or percentages):
/* Modern space-separated RGB syntax */
color: rgb(59 130 246);
color: rgb(59 130 246 / 50%); /* 50% opacity */3. HSL & HSLA (Hue, Saturation, Lightness)
Human-readable format specifying Hue angle (0-360deg), Saturation %, and Lightness %:
color: hsl(217deg 91% 60%);
color: hsl(217deg 91% 60% / 0.5);4. HWB (Hue, Whiteness, Blackness)
Designed by Alvy Ray Smith (co-founder of Pixar), HWB specifies a base Hue angle and adds percentages of pure White and pure Black:
/* Extremely intuitive for artists mixing paint */
color: hwb(217deg 23% 4%);5. OKLCH (Perceptual LCH)
The pinnacle of modern CSS color engineering, providing uniform perceptual lightness and P3 wide-gamut capability:
color: oklch(0.62 0.214 254.6);
color: oklch(0.62 0.214 254.6 / 80%);Author Insight: Architectural Recommendations
Author Insight by Abhay Vachhani (Full Stack Engineer): > For modern Next.js and Tailwind CSS v4 projects, use OKLCH for design tokens, RGB for legacy canvas drawing, and HEX for third-party OAuth integrations. Embracing CSS Color Level 4 syntax ensures future-proof compatibility with Display P3 OLED monitors.