Skip to main content
Dublin Library

The Publishing Project

Does the color space we use affect how gradients look?


When gradients were first introduced we only had hex and rgb/rgba colors for monitors that only worked on the sRGB color space so the gradients would look the same in all monitors.

With the introduction of the new color spaces in the CSS Color Level 4, and the way they work it is appropriate to ask the question: do all color spaces work the same with gradients

Adam Argyle created a comparison to test the look of linear gradients across the color spaces in the CSS Color level 4 and level 5 modules and supported by the underlying color.js library.

It appears that OKLAB provides the smoother gradient from all the supported colors. You'll have to decide if this is what you want for your project.

I created a series of conical gradients in different color spaces to see if t here is any difference based on the color space.

I can't really tell but perhaps readers can :)

Edit on Github