Gradient hue interpolation

When a gradient needs to transition from one color to the next, it takes the shortest route it can. But what if the result of that stinks? Hue interpolation # That's where new CSS gradient syntax from Color 4 for hue interpolation comes in. Here I specify the gradient takes the longer route: .gradient-with-hue-interpolation-specified { background : linear-gradient ( to right in hsl longer hue , oklch (63 % 0.3 317) , oklch (63 % 0.2 255) ) ; } It's almost like the browser has been Zoolander this whole time, it would only turn right 😂 Here's 2 demo's that use ColorJS to help illustrate the effects of this hue interpolation choice. Aka, demo's that help the browser turn left hehe. Blue to Purple example # A soft intro example into the topic: See the Pen by Adam Argyle ( @argyleink ) on CodePen . Interactive demo # This one let's you pick the colors and number of steps: See the Pen by Adam Argyle ( @argyleink ) on CodePen . So so many more color tools coming to the browser!