While exploring difference in addressable colors in sRGB vs p3 I noticed weird behavior when using gradient with LSH color palette.
If you are using gradient with lsh, colors are properly stretched for the linear gradient, eg
background:
linear-gradient(
in lch to right,
lch(var(--L) var(--C) 0deg),
lch(var(--L) var(--C) 60deg),
lch(var(--L) var(--C) 120deg),
lch(var(--L) var(--C) 180deg),
lch(var(--L) var(--C) 240deg),
lch(var(--L) var(--C) 300deg),
lch(var(--L) var(--C) 360deg)
);This is middle piece of the image above. If you are using oklsh with new color space,
background:
linear-gradient(
in oklch to right,
oklch(var(--L) var(--C) 0deg),
oklch(var(--L) var(--C) 60deg),
oklch(var(--L) var(--C) 120deg),
oklch(var(--L) var(--C) 180deg),
oklch(var(--L) var(--C) 240deg),
oklch(var(--L) var(--C) 300deg),
oklch(var(--L) var(--C) 360deg)
);You get colors cut off in safari, see bottom part of the screenshot.
You can see the code to produce this image here
