←back to thread

855 points tontonius | 1 comments | | HN request time: 0s | source
Show context
fidotron ◴[] No.45012490[source]
> In the example above, you can see that the OKLCH colors maintain consistent blueness across all of the shades, while in the HSL example, the lighter shades drift to purple and the darker ones muddy out towards grayish.

There is a very clear shift towards green in the OKLCH lightness value change example, enormously more so than any purple vibe in the HSL example.

Clearly being able to select colours of the same perceptual intensity has value, but some of the claims here as to the benefits are exaggerated.

replies(4): >>45013045 #>>45014039 #>>45014182 #>>45015574 #
crazygringo ◴[] No.45014039[source]
Agreed. The hue changes completely from blue to cyan.

If that's a correct implementation of OKLCH, then it's not something I would ever touch. Something seems to be deeply wrong with however they're calculating hue.

HSL/HSV have issues with perceptual lightness. But not with hues. The hue is constant and doesn't need any correction depending on saturation or lightness.

replies(1): >>45014278 #
nojs ◴[] No.45014278[source]
I think you do usually want to rotate the hue a bit when changing the lightness though. It’s a difficult thing to get right and one of the reasons the tailwind builtin colour palettes are so useful.
replies(1): >>45014468 #
crazygringo ◴[] No.45014468[source]
You don't. That's not something graphic designers ever do as compensation for perceptual uniformity.

I looked into it a bit more, and it turns out it's a result of OKLCH easily producing colors out of gamut, and then choosing to sacrifice hue accuracy for better saturation accuracy.

That's a fundamental design flaw if you ask me. Changing hue is completely unacceptable in my book.

replies(2): >>45017295 #>>45020835 #
1. nojs ◴[] No.45020835{3}[source]
In "Refactoring UI" [1] (by the creators of tailwind) they recommend when designing your shades for a single base colour:

> Since different hues have a different perceived brightness, another way you can change the brightness of a color is by rotating its hue.

> To make a color lighter, rotate the hue towards the nearest bright hue — 60°, 180°, or 300°.

> To make a color darker, rotate the hue towards the nearest dark hue — 0°, 120°, or 240°.

> This can be really useful when trying to create a palette for a light color like yellow. By gradually rotating the hue towards more of an orange as you decrease the lightness, the darker shades will feel warm and rich instead of dull and brown

You could argue whether this is "perceptual uniformity" or something else, but the fact is that to create a realistically useful colour palette with a bunch of shades, you definitely cannot simply use HSL, keep the hue constant, adjust S/L. It's not that easy (and OKLCH doesn't make it that easy either).

1. https://www.refactoringui.com/