Earlier quoted context omitted.
For anyone else copy pasting the gradients into dev tools to look at them: The second one is missing the # sign on the first color. And yes, both oklch gradients look pretty weird while the oklab gradient looks nice (if you can accept it going through grey).
Can anyone share some images for those who don’t have dev tools to view them?
What are OKLCH colors?
161–170 of 189 posts
Re: What are OKLCH colors?
#162Earlier quoted context omitted.
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.
Let's say neither going through gray nor through two different hues looks particularly great. It's pick your poison.
Re: What are OKLCH colors?
#163The “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: l…
Making a gradient from two colours on opposite sides of the spectrum is a bit of a pathological case. There's no obvious answer what it "should" look like, and also no good reason you'd really need to do this. If you're using a gradient as a design element, you'd pick your own midpoints.
Re: What are OKLCH colors?
#164Does anyone know how this is different to the Munsell color space, which is also perceptually uniform? Edit: I would imagine that the only way to definine a perceptually uniform color space is by tons of user testing. This is how Munsell developed his color space… specifically presenting test subjects with pairs of identical and near-identical color swatches and asking if they could tell the difference. In this way,…
The Munsell color system isn't really intended for displays, rather it's a collection of pigments, similar to Pantone. The transforms can get a bit weird (for example, since the swatches are discrete, there's no defined way to get intermediate colors). Munsell's ideas, particularly the axes of hue, value, and chroma, have absolutely influenced modern color spaces and are very much on display in the OKLCH space.
Re: What are OKLCH colors?
#165The “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: l…
Edit: The article was updated. Ignore me.
> you should probably default to interpolating in Oklab instead
The article says as much. Quoting:
> This can be a double edged sword. While some gradients might look smoother, you might also see colors that you've never defined. This is because hue in OKLCH is circular and gradients can take unexpected detours.
> To avoid this, many tools use OKLAB for gradients, which interpolates in a straight line and gives more consistent results.
Re: What are OKLCH colors?
#166Earlier quoted context omitted.
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.
Re: What are OKLCH colors?
#167The “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: l…
Edit: The article was updated. Ignore me. > you should probably default to interpolating in Oklab instead The article says as much. Quoting: > This can be a double edged sword. While some gradients might look smoother, you might also see colors that you've never defined. This is because hue in OKLCH is circular and gradients can take unexpected detours. > To avoid this, many tools use OKLAB for gradients, which inter…
I was going to point that out too until I realized that the author updated the article based on the parent comment!
Re: What are OKLCH colors?
#168Aside from a few criticisms that others have already raised I think this is quite a nice introduction to OKLCH and how to use them in CSS. With that out of the way, I'd like to go on a tangent here: can anyone explain the modern trend of not including publishing dates in blog articles? It stood out to me here in particular because the opening sentence said that "OKLCH is a newer color model" and the "newer" part of t…
Blame Google and SEO
Re: What are OKLCH colors?
#169Earlier quoted context omitted.
Edit: The article was updated. Ignore me. > you should probably default to interpolating in Oklab instead The article says as much. Quoting: > This can be a double edged sword. While some gradients might look smoother, you might also see colors that you've never defined. This is because hue in OKLCH is circular and gradients can take unexpected detours. > To avoid this, many tools use OKLAB for gradients, which inter…
I was going to point that out too until I realized that the author updated the article based on the parent comment! https://news.ycombinator.com/item?id=45013291
Ha! Well spotted.
Re: What are OKLCH colors?
#170Earlier quoted context omitted.
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…
> 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!