{"id":363102,"date":"2022-02-07T13:46:18","date_gmt":"2022-02-07T21:46:18","guid":{"rendered":"https:\/\/css-tricks.com\/?p=363102"},"modified":"2022-02-07T13:46:20","modified_gmt":"2022-02-07T21:46:20","slug":"color-spaces-for-more-interesting-css-gradients","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/color-spaces-for-more-interesting-css-gradients\/","title":{"rendered":"Using Different Color Spaces for Non-Boring Gradients"},"content":{"rendered":"\n

A little gradient generator tool<\/a> from Tom Quinonero<\/a>. You’d think fading one color to another would be an obvious, simple, solved problem \u2014 it’s actually anything but!<\/p>\n\n\n\n

Tom’s generator does two things that help make a gradient better:<\/p>\n\n\n\n

  1. You can pick an “interpolation space.” Gradients that use the sRGB color space (pretty much all the color stuff we have in CSS today) have a bad habit of going through a gray dead zone<\/a>, and if you interpolate the gradient in another color space, it can turn out nicer (and yet convert it back to RGB to use today). <\/li>
  2. Easing<\/a> the colors, though the use of multiple color-stops, which can result in a less abrupt and more pleasing look. <\/li><\/ol>\n\n\n\n\n\n\n\n
    \"Showing
    See the gray in the middle there?<\/figcaption><\/figure>\n\n\n

    Different gradient apps with different color spaces<\/h2>\n\n\n

    Josh has another similar app<\/a>, as does Erik Kennedy<\/a>. So stinkin’ interesting how different gradients are in different color spaces. Think of the color spaces as a physical map where individual colors are points on the map. Gradients are dumb. They just walk straight from one point on the map to the next. The colors underneath their feet as they walk make a massive difference in how the gradient turns out. <\/p>\n\n\n\n

    Safari Tech Preview has experimental CSS gradient colorspaces and I had tons of fun playing around last night with it!

    “`    #css<\/a>
    background: linear-gradient(
    to right in var(–colorspace),
    black, white
    );
    “`

    basic black to white can be so different!    https:\/\/t.co\/ltCWtzUD23<\/a> pic.twitter.com\/rlUIiDFJu9<\/a><\/p>\u2014 Adam Argyle (@argyleink) February 6, 2022<\/a><\/blockquote>