←back to thread

855 points tontonius | 1 comments | | HN request time: 0s | source
Show context
chrismorgan ◴[] No.45011025[source]
The “Better Gradients” thing is dodgy.

OKLCH is a polar coordinate space. Hue is angle in this space. So to interpolate hue from one angle to another, to get from one side of a circle to the other, you go round the edge. This leads to extreme examples like the one shown:

  linear-gradient(in oklch, #f0f, #0f0)
You can also go round the circle the other way, which will take you via blue–aqua instead of via red–yellow:

  linear-gradient(in oklch longer hue, #f0f, #0f0)
The gradient shown (in either case) is a good example of a way that perceptual colour spaces are really bad to work in: practically the entire way round the edge of the circle, it’s outside sRGB, in fact way outside of the colours humans can perceive. Perceptual colour spaces are really bad at handling the edges of gamuts, where slightly perturbing the values take you out of gamut.

Accordingly, there are algorithms defined (yes, plural: not every application has agreed on the technique to use) to drag the colour back in-gamut, but it sacrifices the perceptual uniformity. The red in that gradient is way darker than the rest of it.

When you’re looking for better gradients, if you’re caring about perceptual uniformity (which frequently you shouldn’t, perceptual colour spaces are being massively overapplied), you should probably default to interpolating in Oklab instead, which takes a straight line from one side of the circle to the other—yes, through grey, if necessary.

  linear-gradient(in oklab, #f0f, #0f0)
And in this case, that gets you about as decent a magenta-to-lime gradient as you can hope for, not going via red and yellow, and not exhibiting the inappropriate darkening of sRGB interpolation (… though if I were hand-tuning such a gradient, I’d actually go a bit darker than Oklab does).

During its beta period, Tailwind v4 tried shifting from sRGB to Oklch for gradient interpolation; by release, they’d decided Oklab was a safer default.

replies(12): >>45011178 #>>45011340 #>>45012378 #>>45012990 #>>45013291 #>>45013348 #>>45014196 #>>45015512 #>>45018962 #>>45019530 #>>45023600 #>>45040825 #
djoldman ◴[] No.45012990[source]
But what really is a "color gradient"?

Isn't it any continuous function that starts at a specified color and ends at another specified color?

How then does one say that any gradient is good or bad?

Isn't the problem you are highlighting guaranteed to exist for any colorspace that defines colors outside of human perception?

replies(2): >>45013072 #>>45015813 #
1. JKCalhoun ◴[] No.45015813[source]
Interesting. In nature, I suppose I am most aware of a gradient from a saturated azure sky above to a much whiter sky on the horizon. This would seem to be a trivial saturation gradient.

For a spot color (from a gel covering a light) the light diffuses further from the center of the projected light — two spot colors (with different gels) then, next to each other, would give a kind of gradient from one color to the next as you walk a line from the center of one light to the other.

I wonder what the closest analog to this is algorithmically?

I guess where I am going with this is: is there precedent in nature as to how gradients are supposed to work (and therefore an analog which we should try to model) or are we going strictly on how the human eye perceives color and what algorithm we think "looks" right?