CSS Color Systems: A Complete Guide for Developers
Color is one of the most impactful elements of web design, yet many developers rely on color pickers without understanding the underlying systems. This guide covers every CSS color format, when to use each, and how to build professional color palettes.
The Four Color Formats
HEX — The Classic
color: #6366f1;
color: #6366f180; /* with 50% alpha */HEX (hexadecimal) represents colors as #RRGGBB, where each pair is a value from 00 to FF. It’s the most common format in CSS, Figma exports, and design tools.
RGB — Red, Green, Blue
color: rgb(99, 102, 241);
color: rgb(99 102 241 / 50%); /* modern syntax with alpha */RGB defines colors by mixing red, green, and blue light. Each channel is a value from 0 to 255. It mirrors how screens physically produce color.
HSL — Hue, Saturation, Lightness
color: hsl(239, 84%, 67%);
color: hsl(239 84% 67% / 50%); /* with alpha */HSL is the most human-intuitive format. Hue is a degree on the color wheel (0-360), saturation is intensity (0-100%), and lightness is brightness (0-100%).
Modern: OKLCH (CSS Color Level 4)
color: oklch(0.637 0.237 275.5);OKLCH is the newest format, designed for perceptual uniformity — equal steps in values produce equal perceived color changes. It’s gaining adoption in modern design systems.
Convert between all formats instantly with our Color Converter.
When to Use Each Format
| Format | Best For | Why |
|---|---|---|
| HEX | Design handoff, CSS values | Compact, universal support |
| RGB | Dynamic calculations in JS | Easy math with 0-255 values |
| HSL | Design tokens, theming | Intuitive lightness/darkness adjustment |
| OKLCH | Design systems (2025+) | Perceptually uniform color spaces |
Detailed comparison: HEX vs RGB vs HSL
Building Color Palettes
The 60-30-10 Rule
Professional designs use a ratio:
- 60% — Background/neutral color
- 30% — Secondary/surface color
- 10% — Accent/brand color
Generating from a Base Color
Start with your brand color and derive the full palette:
- Lighten for backgrounds — Increase HSL lightness to 95-98%
- Darken for text — Decrease HSL lightness to 10-20%
- Desaturate for neutrals — Reduce HSL saturation to 5-15%
- Complementary for accents — Rotate hue by 180°
Generate a full palette from any color with our Color Palette Generator.
Color and Accessibility
Color isn’t just aesthetic — it’s an accessibility requirement. WCAG (Web Content Accessibility Guidelines) mandates minimum contrast ratios:
- Normal text (< 18px): 4.5:1 contrast ratio
- Large text (≥ 18px or 14px bold): 3:1 contrast ratio
- UI components: 3:1 contrast ratio
Read more: WCAG Color Contrast Guide
CSS Gradients
Gradients blend two or more colors:
background: linear-gradient(135deg, #6366f1, #ec4899);
background: radial-gradient(circle, #6366f1, transparent);Build CSS gradients visually with our CSS Gradient Generator.
Dark Mode Color Strategy
Building a dark mode requires more than inverting colors. Read our full guide: Dark Mode Color Palette Guide.