Each of the rectangles below show gradients from the same starting color to a second related color. The lightness runs from 100% at the top right to 0% at the bottom right of each square. The range slider below is used to adjust the saturation of all gradients from 0% to 10%, in increments of 0.05%. As of 1 June 2023, pay close attention to the top and bottom of the HSL, HWB, LCH, and okLCH squares as the values change in Chrome Canary, and to the entirety of the same squares in Safari Technology Preview.
If you can see this warning, it means the browser you’re using does not support colorspaces on gradients, and so none of this will really make sense.
hsl(270deg 100% 50%)hsl(270deg 0.00% n)