Joost van der Laan

Gradients & P3

Snazzy colors with Display P3 colors

A bit of background on gradients. okclh.com evilmartians.com and gradient.style OKCLH is for Display P3 color support (more vivid / vibrant, if you upgrade your existing colors into that space) which you can see the difference with sRGB in some of the examples below.

If you don’t see a difference in below examples between sRGB and P3, it might be your display doesn’t support it.

sRGB vs P3

sRGB

P3 (maximized Chroma, not an official Spotify color)

Tailwind-native:

Hello world

Button builder.io

Enabled

my text

Get started

Fashionunited color

(right end is the primary used troughout fashionunited.com) sRGB

sRGB

Upgrade Fashionunited color to P3

sRGB (fallbacks for P3, we could instead also use the above as fallback of course)

sRGB

P3

".bg-fu-gradient": {
  background:
    "linear-gradient(to right, oklch(80% 0.24 14), oklch(59% 0.24 14))",
},
".bg-gradient": {
  background:
    "linear-gradient(to right, oklch(70.73% 0.18796955270463947 14.001408985933033), oklch(53.24% 0.21275278197593844 13.998586666801577))",
},
".bg-p3-gradient": {
  background:
    "linear-gradient(to right, oklch(70.73% 0.24 14), oklch(53.24% 0.24 14))",
},

sRGB

P3

sRGB

P3

sRGB

P3