Color Space Gradient Preview

Edit either of the color values to change the gradient endpoints and see what effects that will have.

Thanks to Chris Coyier’s blog post and Adam Argyle’s Codepen for the inspiration and stepping stones, respectively, to create this tool.

If you can see this warning, it means the browser you’re using does not support colorspaces on gradients, and so all the gradients in the tool will look exactly the same. Which might be pretty, but doesn’t help decide which color space would be best for your gradient situation. You can still edit the color values, if you like.

  1. sRGB sRGB
  2. sRGB Linear sRGB Linear
  3. LAB LAB
  4. okLAB okLAB
  5. LCH LCH
  6. okLCH okLCH
  7. HSL HSL
  8. HWB HWB
  9. XYZ XYZ
  10. XYZ d50 XYZ d50
  11. XYZ d65 XYZ d65