CSS Colors — Complete Guide
Every color syntax CSS supports in 2025, with copy-ready examples. From the classic HEX and rgb() to modern OKLCH, color-mix(), and Display-P3.
#hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() and the color-mix() function. Space-separated values and a slash before the alpha channel are the modern syntax.1. HEX colors
The most common CSS color syntax. Six hexadecimal digits represent red, green and blue channels. An optional 7th and 8th digit add alpha.
.a { color: #4f46e5; }
.b { color: #4f46e580; /* 50% alpha */ }Shorthand: 3-digit and 4-digit HEX codes duplicate each character. #abc is #aabbcc; #abcd is #aabbccdd.
2. rgb() and rgba()
Classic comma syntax is still valid, but modern CSS prefers space-separated values with a slash before alpha. Both work in every supported browser.
.a { color: rgb(79, 70, 229); } /* classic */
.b { color: rgb(79 70 229); } /* modern */
.c { color: rgb(79 70 229 / 50%); } /* modern + alpha */
.d { color: rgba(79, 70, 229, 0.5); } /* legacy alias */3. hsl() and hsla()
HSL describes a color by hue (0–360°), saturation (%), and lightness (%). It is often more intuitive for adjusting colors by hand.
.a { color: hsl(243, 75%, 59%); }
.b { color: hsl(243 75% 59%); }
.c { color: hsl(243 75% 59% / 0.5); }4. hwb()
HWB is hue plus whiteness and blackness — an alternative to HSL that makes it easy to reason about mixing white or black into a hue.
.a { color: hwb(243 31% 10%); }
.b { color: hwb(243 31% 10% / 0.5); }5. lab() and lch()
CIE LAB and LCH are perceptual color spaces. They are rarely written by hand, but they are useful when matching print colors or generating mathematically consistent palettes.
.a { color: lab(45% 42 -78); }
.b { color: lch(45% 88 298); }6. oklab() and oklch()
OKLab and OKLCH are modern perceptually uniform color spaces (Björn Ottosson, 2020). They are excellent for building palettes where equal numeric steps look equally spaced to the eye.
.a { color: oklab(0.53 -0.10 -0.23); }
.b { color: oklch(53% 0.24 273); }
.c { color: oklch(53% 0.24 273 / 0.5); }7. color() and Display-P3
The color() function lets you specify a color in any defined color space, including wide-gamut spaces like Display-P3 that can represent colors outside the sRGB gamut.
.a { color: color(display-p3 0.30 0.28 0.90); }
.b { color: color(display-p3 0.30 0.28 0.90 / 0.5); }8. color-mix()
The color-mix() function mixes two colors in a specified color space, entirely in CSS. No build step required.
.a { color: color-mix(in srgb, #4f46e5, white 40%); }
.b { color: color-mix(in oklch, #4f46e5, black 20%); }9. CSS variables for colors
Custom properties store color values that can be reused and re-themed. This is the foundation of any theme system.
:root {
--color-primary: #4f46e5;
--color-text: #111827;
}
.button {
background-color: var(--color-primary);
}Quick reference table
| Syntax | Example | Notes |
|---|---|---|
HEX | #4f46e5 | Shortest, most common |
HEXA | #4f46e580 | HEX with alpha |
rgb() | rgb(79 70 229) | Modern space-separated |
rgba() | rgba(79, 70, 229, 0.5) | Legacy alias |
hsl() | hsl(243 75% 59%) | Intuitive hue-based |
hwb() | hwb(243 31% 10%) | Hue + whiteness/blackness |
lab() | lab(45% 42 -78) | CIE perceptual |
lch() | lch(45% 88 298) | CIE perceptual, polar |
oklab() | oklab(0.53 -0.10 -0.23) | Modern perceptual |
oklch() | oklch(53% 0.24 273) | Modern perceptual, polar |
color() | color(display-p3 0.3 0.28 0.9) | Wide-gamut support |
color-mix() | color-mix(in oklch, …) | CSS-native mixing |
Frequently asked questions
Should I use HEX or OKLCH in CSS?
Use HEX for exact values and maximum compatibility. Use OKLCH when you want perceptually uniform palettes or need to adjust lightness numerically without shifting perceived hue. Many design systems mix both — HEX for brand colors, OKLCH for generated scales.
Are the modern color syntaxes supported everywhere?
HEX, rgb(), hsl() and hwb() work in every supported browser. lab(), lch(), oklab() and oklch() are supported in all modern evergreen browsers (Chrome, Firefox, Safari, Edge). color() with Display-P3 is supported in most modern browsers but may fall back to sRGB on older devices.
What is the difference between rgba() and rgb() with slash?
They are functionally equivalent. The slash syntax is the modern form introduced in CSS Color 4. rgba() is kept for backward compatibility.
How do I decide between HSL and OKLCH?
Use HSL when you want familiar hue/saturation/lightness controls. Use OKLCH when you need perceptual uniformity — for example when building a scale where every step should feel equally bright or when you want to keep hue stable across a range of lightness values.