CSS Colors and Backgrounds

Modern Colors

Written by Swapnil RajaPublished 30 Jul 2026

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.

PreviousCSS RGB Colors NextCSS Background Color