Minimalist Affordances: Making the Right Tradeoffs

Re:Minimalist Affordances: Making the Right Tradeoffs by SrslyJosh on Wednesday November 08, 2023 @04:04AM (#38188160)

> There are several color models with a more human-centered design, such as HSL, LCH, OKLCH. Their coordinates are designed around how humans describe colors, such as hue for the main color (e.g. red, yellow, green, etc.), chroma/saturation to specify how intense the color is (e.g. 0 would be gray), and lightness to specify how light it is (e.g. white would be 100% and black would be 0%).

This is less convincing when you realize that HSL (for example) also uses numbers to describe hue, so you still have to memorize the order and positions of different hues. Is that a big deal? Nope, but it's not as perfectly human-friendly as the author makes it out to be.

[ Parent | on HN ]

Re:Minimalist Affordances: Making the Right Tradeoffs by dist-epoch on Wednesday November 08, 2023 @06:11AM (#38188871)

> have to memorize the order and positions of different hues.

Almost everybody is familiar with the rainbow, and it's a physical real-world relatable concept. Even if you can't name the color order from memory, it's intuitive what changing the hue left or right does. Unlike RGB, where it's basically impossible (for regular people) to predict what changing one component will do to the final color.

[ Parent | on HN ]

Re:Minimalist Affordances: Making the Right Tradeoffs by crazygringo on Wednesday November 08, 2023 @11:20AM (#38192608)

Interesting -- I've never thought about 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = purple as being user-unfriendly (simply because RGB is so much worse), but you make a good point.

What if CSS allowed hue to be defined as positions between any 2 adjacent options out of the 6 primitives defined by 60° increments?

E.g. bright orange could be either of:

  hsl(50% red yellow, 100%, 50%)
  hsl(50% yellow red, 100%, 50%)

While bright red-orange would be either of:

  hsl(75% red yellow, 100%, 50%)
  hsl(25% yellow red, 100%, 50%)

There's probably a more intuitive syntax to describe "25% of the way from red to yellow" that I can't think of.

And I think I'd be in favor of just six primitives. Using 30° increments would allow orange, but none of the other five positions have obvious names at all.

[ Parent | on HN ]