Gradients & P3

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.

• https://evilmartians.com/chronicles?skills=oklch

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

Gradient Text Examples

Tailwind-style gradient text:

Gradient button example:

sRGB

Upgrade Fashionunited color to P3

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

".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))",
},

More gradient examples

Version 1

Version 2

Version 3