CSS Colors and Backgrounds
Modern Colors
Use alpha colors, perceptual color spaces, color mixing, and relative colors while preserving dependable fallbacks. It introduces modern RGB and HSL syntax, perceptual OKLCH palettes, alpha values, color-mix(), relative colors, and fallback strategies.
Modern CSS color spaces can describe a wider gamut and make controlled palette changes more perceptually consistent. They do not remove the need to test contrast or provide a fallback where required.
RGB and HSL remain useful, but OKLCH separates lightness, chroma, and hue in a way that is easier to reason about when building steps in a palette. Functions such as color-mix() and relative color syntax can then derive borders, hover states, or translucent surfaces from one authored color. This topic also connects with CSS Colors and CSS Gradients.
Modern notation
Example
css
.panel {
color: rgb(15 23 42);
background: hsl(210 40% 98% / 0.92);
border-color: oklch(82% 0.03 240);
}Space-separated RGB and HSL syntax supports an optional alpha value after a slash. OKLCH is useful for building palettes because similar lightness changes tend to look more consistent to people.
Mix and derive colors
Example
css
.button {
--base: oklch(55% 0.16 250);
background: var(--base);
border-color: color-mix(in oklch, var(--base), black 24%);
}
.button:hover {
background: oklch(from var(--base) calc(l - 0.08) c h);
}currentColor is another useful tool: borders, icons, and outlines can follow the element’s text color without repeating a token.
Progressive enhancement
Example
css
.badge { background: #e0f2fe; }
@supports (color: oklch(80% 0.1 220)) {
.badge { background: oklch(93% 0.04 220); }
}Choose a contrasting color
contrast-color() returns a color that contrasts with its argument. It is useful when a component background is configurable, but it does not replace checking the complete component against the project's contrast requirements.
Example
css
.tag {
--tag-color: oklch(62% 0.18 250);
background: var(--tag-color);
color: contrast-color(var(--tag-color));
}Color Function Reference
| Function | Purpose | Example |
|---|---|---|
| rgb() | Defines an sRGB color with optional alpha. | rgb(20 80 160 / 80%) |
| hsl() | Defines color by hue, saturation, and lightness. | hsl(210 70% 45%) |
| oklch() | Defines a perceptually uniform color. | oklch(65% 0.16 250) |
| color-mix() | Mixes two colors in a chosen color space. | color-mix(in oklch, blue 70%, white) |
| contrast-color() | Chooses a contrasting color for a supplied color. | color: contrast-color(var(--surface)) |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Colors example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.panel {
color: rgb(15 23 42);
background: hsl(210 40% 98% / 0.92);
border-color: oklch(82% 0.03 240);
}
.button {
--base: oklch(55% 0.16 250);
background: var(--base);
border-color: color-mix(in oklch, var(--base), black 24%);
}
.button:hover {
background: oklch(from var(--base) calc(l - 0.08) c h);
}
.badge { background: #e0f2fe; }
@supports (color: oklch(80% 0.1 220)) {
.badge { background: oklch(93% 0.04 220); }
}
.tag {
--tag-color: oklch(62% 0.18 250);
background: var(--tag-color);
color: contrast-color(var(--tag-color));
}
</style>
</head>
<body>
<main class="panel"><h1>Modern color spaces</h1><p class="badge">OKLCH badge</p><button class="button">Color-mixed button</button></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| oklch() | 111 | 111 | 113 | 15.4 |
| color-mix() | 111 | 111 | 113 | 16.2 |
| contrast-color() | 147 | 147 | 146 | 26 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Modern color functions make systematic palettes easier, provided a dependable fallback remains in place.
Treat generated colors as candidates, not automatic design approval. Check text and non-text contrast in every theme, verify wide-gamut colors on ordinary displays, and keep a conventional declaration before advanced syntax when older required browsers need a usable result.