Search pages

Search all CSS Showcase pages by name

Modern CSS Colour Spaces

Step into the future of colour with perceptually uniform colour spaces like oklch, display-p3 wide gamut, and powerful colour manipulation functions.

What Are Modern Colour Spaces?

Traditional CSS colours (hex, rgb, hsl) are limited to the sRGB colour space, which represents only about 35% of colours the human eye can see. Modern CSS introduces new colour spaces that unlock a wider range of more vibrant colours and provide perceptually uniform colour manipulation.

sRGB vs Wide Gamut
Compare traditional sRGB colours with their Display P3 wide gamut counterparts. On a capable display, the P3 version is noticeably more vivid.
sRGB

Limited gamut

rgb(255, 0, 128)
Display P3

Wide gamut — more vibrant!

color(display-p3 1 0 0.5)
css
The Game-Changers
Four key features that transform how we work with colour in CSS.
  • →oklch() — Perceptually uniform, human-friendly colour space
  • →display-p3 — Wide gamut colour space (50% more colours than sRGB)
  • →color-mix() — Mix any two colours in any colour space
  • →Relative colours — Modify existing colours dynamically

OKLCH: Perceptually Uniform Colours

OKLCH (Oklab Lightness Chroma Hue) is a perceptually uniform colour space. The same numeric change in colour values produces the same perceived change in colour by humans, regardless of where you are in the colour space.

OKLCH Colour Palette
Six hues at the same lightness and chroma. Notice how they all appear equally bright — that's perceptual uniformity in action.
oklch(0.5 0.2 0)Pink
oklch(0.5 0.2 60)Orange
oklch(0.5 0.2 120)Yellow
oklch(0.5 0.2 180)Green
oklch(0.5 0.2 240)Cyan
oklch(0.5 0.2 300)Blue
css
OKLCH Parameters
The three channels that define an OKLCH colour.
Lightness0 – 1

0 = black, 1 = white. Controls perceived brightness independently from hue.

Chroma0 – 0.4

0 = grey, 0.4 = maximum vibrancy. Controls colour saturation.

Hue0 – 360°

0 = pink, 120 = green, 240 = blue. Rotates around the colour wheel.

css
Accessibility Advantage
Pro Tip: OKLCH is perfect for creating accessible colour palettes. By keeping lightness consistent, you ensure consistent contrast ratios across all your colours — something that's nearly impossible with HSL.

Display P3: Wide Gamut Colours

Display P3 is a wide gamut colour space that can represent 50% more colours than sRGB. It's supported on modern displays (iPhones since 2017, MacBooks since 2016, many modern monitors). These colours are noticeably more vibrant and saturated.

sRGB vs Display P3
Compare the same primary colours in sRGB and Display P3. On a wide gamut display, the P3 versions appear significantly more vivid.
sRGB Redrgb(255, 0, 0)
P3 Redcolor(display-p3 1 0 0)
sRGB Greenrgb(0, 255, 0)
P3 Greencolor(display-p3 0 1 0)
sRGB Bluergb(0, 0, 255)
P3 Bluecolor(display-p3 0 0 1)

Note: You'll only see the difference on a wide gamut display (modern phones, tablets, and monitors).

css

color-mix(): Blend Any Two Colours

The color-mix() function lets you blend any two colours in any colour space. This is incredibly powerful for creating tints, shades, and variations of colours without complex calculations.

Mixing Colours
Combine colours with precise control over the mix ratio. Using oklch as the interpolation space ensures perceptually smooth results.
Base Blue#2563eb
+
White#ffffff
=
Lighter Bluecolor-mix(in oklch, #2563eb 70%, white)
Red#ef4444
+
Blue#3b82f6
=
Purplecolor-mix(in oklch, #ef4444, #3b82f6)
Green#10b981
+
Black#000000
=
Dark Greencolor-mix(in oklch, #10b981 60%, black)
css

Relative Colours: Dynamic Colour Manipulation

Relative colour syntax lets you create new colours based on existing ones by modifying specific channels. This is perfect for creating hover states, active states, and colour variations dynamically.

Relative Colour Examples
Modify lightness, chroma, and hue channels independently to derive new colours from a base value.
Base Colour#2563eb
Lighter (L +20%)oklch(from #2563eb calc(l + 0.2) c h)
Base Colour#10b981
Darkened (L = 40%)oklch(from #10b981 0.4 c h)
Base Colour#ef4444
More Vibrant (C ×1.5)oklch(from #ef4444 l calc(c * 1.5) h)
css

Real-World Applications

Let's see how these modern colour spaces solve real design problems. A single base colour can generate an entire theme using relative colours and color-mix().

Dynamic Theme System
Three themes generated from a single base colour each. All button, alert, and secondary styles are derived automatically using relative colour syntax.

Blue Theme

Info: This is an alert styled with the theme colour

Green Theme

Success: This is an alert styled with the theme colour

Amber Theme

Warning: This is an alert styled with the theme colour
css

Browser Support

Modern colour spaces have excellent browser support, with all major browsers supporting oklch, color-mix(), and display-p3 since 2023.

Wide Support (2023+)
Use progressive enhancement with fallbacks for the rare older browser.

Widely Supported

  • OKLCH: Chrome 111+, Safari 15.4+, Firefox 113+
  • color-mix(): Chrome 111+, Safari 16.2+, Firefox 113+
  • Relative colours: Chrome 119+, Safari 16.4+, Firefox 120+
  • Display P3: Chrome 111+, Safari 10+, Firefox 113+

Best practice: Always provide an sRGB fallback before your modern colour value. Browsers that don't understand the new syntax will simply ignore it and use the fallback.

css

Keep Learning

Explore related features that pair brilliantly with modern colour spaces.

Related Features

CSS Custom Properties

Use CSS variables with modern colour spaces for dynamic theming.

Blend Modes

Combine colours using blend modes for creative visual effects.

Gradients

Create stunning gradients with oklch for smooth colour transitions.