What are OKLCH colors?

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.

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?

A good gradient is one that takes a perceptually uniform, and typically perceptually shortest, path. The OKLCH gradient isn't perceptual uniform and appears to take unnecessary detours through other hues.

One could also argue that the detour through other hues is necessary in this case to avoid going through grey.

Gray is arguably just another color, it’s not clear why you’d want to avoid it. How is going via red and yellow better than going via gray? Varying hue is often perceived as a larger change than varying saturation or lightness. A path going through several distinct hues is visually less uniform than one going through gray once.

Is gray perceived as "just another color" or where all colors go when desaturated? I assumed the latter, which would explain why to avoid it if one isn't playing with saturation.

Think of fashion, of smartphone colors, pen and pencil colors and the like. Gray, white, black, are just color choices among all the available colors. A gray T-shirt isn’t a desaturated colored T-shirt. It’s its own color.

A grey shirt is a desaturated shirt. You cannot resaturate grey.

I think if you buy a tie-dye shirt or phone case and it comes out half grey, despite it being a valid color, most folks will be disappointed.

> A grey shirt is a desaturated shirt. You cannot resaturate grey.

Aren't these in direct conflict? If you can't resaturate it, that implies it's not desaturated.

> I think if you buy a tie-dye shirt or phone case and it comes out half grey, despite it being a valid color, most folks will be disappointed.

And if you buy a forest motif, people will be upset if it's pink. That's just doing a tie-dye wrong, not a rebuke of whether it's a color at all.

> Aren't these in direct conflict? If you can't resaturate it, that implies it's not desaturated.

Kinda. There's a singularity in the math. The problem is that hue is defined as an angle and saturation is defined as distance from the center, but there's no consistent way to define a direction for the origin. Black and white have the same problem because they're also desaturated.

> And if you buy a forest motif, people will be upset if it's pink. That's just doing a tie-dye wrong, not a rebuke of whether it's a color at all.

I'm not arguing that it's not a color, just that it doesn't belong in all gradients!

Of course it doesn't belong in all gradients. It would only be in gradients that go from near-opposite colors. Or if you mean pure gray it would only be in gradients between exact opposite colors, and there are no good options for such a gradient.

I mention tie-dye because it feels like a quintessential example of a color gradient. I think it's perfectly reasonable to ask for a blue and orange tie-dye shirt and perfectly reasonable to not want grey colors simply because they're on opposite sides. I could see white in between, I could even see black, or I could see purple and red or cyan and yellow. I don't think there's a universally right answer here!