6 ms·

What made colours much easier for me was stating them as hsl values, rather than rgb ones, because that's how we actually think about colours. For example, I c

by cthor 11y ago

What made colours much easier for me was stating them as hsl values, rather than rgb ones, because that's how we actually think about colours. For example, I can tell just by looking at it that the HN banner is orange (hue: ~30), fully saturated (sat: ~100%), and neither light nor dark (l: ~50%). The figures are also easier to fiddle with. Something is too saturated? Decrease saturation. Too bright? Decrease brightness. etc. With an rgb value it's very hard to fiddle with meaningfully.

oliwarner 11y ago
Hue means something to you? Having always worked in RGB, I have laterally no idea that a hue of 30 is orange. At least with RGB, I can imagine what the mix would be.
- stephengillie 11y ago
  TIL hue is almost like an index of color. I guess a hue of 30 will always be orange. The conical conversion method between RGB & HSL is a little amazing. https://en.wikipedia.org/wiki/Hue https://en.wikipedia.org/wiki/Hue
- Symbiote 11y ago
  Hue is a circle mapped to a rainbow. 0° red 60° yellow 120° green 180° cyan 240° blue 300° magenta You can see your red, green and blue every 120°. Labelled colour wheel: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/01/hsl-color-wheel.png http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/...
  - gmanley 11y ago
    That's a good way to put it. Tangential, but does anyone else see movement near center of the color wheel when changing focus away from it? Optical illusions fascinate me. Are certain types categorized?
    - majewsky 11y ago
      No, I didn't notice the movement you describe. But the color wheel's content appears to grow and shrink the slightest bit when I move my head towards it and away from it, respectively. Probably a halo effect.
    - metasean 11y ago
      Looks like there are some recognized categories: >3 Explanation of cognitive illusions > 3.1 Perceptual organization > 3.2 Depth and motion perception > 3.3 Color and brightness constancies > 3.4 Object > 3.5 Future perception https://en.wikipedia.org/wiki/Optical_illusion https://en.wikipedia.org/wiki/Optical_illusion
- maggit 11y ago
  More important than knowing "hue 30 == orange" is the fact that one can decompose the color to "The hue of this color is orange". Then, finding orange on a color wheel is not so difficult. Especially if you can put in appropriate values for saturation and luminosity. So, regardless of whether or not you know the exact hue value of a given color, it still decomposes more easily than RGB :)
- laughinghan 11y ago
  Hue is the color wheel. Once you know that a hue of 30 is orange, you immediately know that a hue of 30+180=210 is blue, since it's across from orange on the color wheel. How much time have you spent fiddling with RGB values to pick colors? I assume it's either a lot less or a lot more than me, because while I too can certainly imagine what any given mix would be, my imagination is usually so far off from the real result as to be useless. This has been true even when I worked in pure gray. 50% each of R, G, and B results in a perceptually very dark gray (that is, the contrast between #808080 and pure black, #000, is much less than the contrast between #808080 and pure white, #fff). Elsewhere in this thread I sang the praises of HCL, a color model where you can adjust independently the hue ("color" in the traditional sense, as in orange vs blue vs yellow vs green vs red), the perceived brightness, and the perceived "grayness" (saturation) of a color: http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/
facepalm 11y ago
I've heard good things about hsl values, but so far, those properties mean nothing to me. How would I know that hue 30 is orange?
- Ciantic 11y ago
  In RGB you have to memorize RGB and their mixings, and then do some calculation to change saturation or lightness. With HSL you'll have to basically memorize only the colorwheel which is not that hard. Lightness and saturation are then straightforward.
laughinghan 11y ago
While HSL is dramatically better than RGB, it still has the problem of not quite mapping intuitively to our perceptions. In particular, for a fixed lightness value, the perceived brightness still varies widely depending on the hue and saturation (100% light and saturated blue is much darker than 100% light and saturated yellow). For fiddling with colors, I recommend the HCL model (Hue/Chroma/Lightness), which is basically the same idea as HSL except your intuitions actually work: the perceived "grayness" (saturation) and the perceived brightness of colors can be adjusted independently (almost—I'll get to this) from each other and from the hue: http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ There are downsides, of course, which can all be traced back to one root problem with HCL: it's determined by biology, not physics. This means that any implementation is only going to be an approximation, which is the "almost" I mentioned above: when you muck around with chroma and hue, you'll still see small variations in brightness. This also means that the boundaries of this color space don't form a cube like RGB, nor a cylinder or double-cone like HSL and HSV. Those spaces form super nice shapes because you can physically choose 256 values for each of the 3 components of a pixel (the RGB cube), and the others are straightforward transformations of thereof. But they have no straightforward relationship to perceived brightness nor perceived "grayness". For the same reason, there's no native support for manipulating HCL colors in browsers, and I believe it's not great on other platforms either.

by cthor 11y ago

oliwarner 11y ago

Hue means something to you? Having always worked in RGB, I have laterally no idea that a hue of 30 is orange. At least with RGB, I can imagine what the mix would be.

stephengillie 11y ago
TIL hue is almost like an index of color. I guess a hue of 30 will always be orange. The conical conversion method between RGB & HSL is a little amazing. https://en.wikipedia.org/wiki/Hue https://en.wikipedia.org/wiki/Hue
Symbiote 11y ago
Hue is a circle mapped to a rainbow. 0° red 60° yellow 120° green 180° cyan 240° blue 300° magenta You can see your red, green and blue every 120°. Labelled colour wheel: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/01/hsl-color-wheel.png http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/...
- gmanley 11y ago
  That's a good way to put it. Tangential, but does anyone else see movement near center of the color wheel when changing focus away from it? Optical illusions fascinate me. Are certain types categorized?
  - majewsky 11y ago
    No, I didn't notice the movement you describe. But the color wheel's content appears to grow and shrink the slightest bit when I move my head towards it and away from it, respectively. Probably a halo effect.
  - metasean 11y ago
    Looks like there are some recognized categories: >3 Explanation of cognitive illusions > 3.1 Perceptual organization > 3.2 Depth and motion perception > 3.3 Color and brightness constancies > 3.4 Object > 3.5 Future perception https://en.wikipedia.org/wiki/Optical_illusion https://en.wikipedia.org/wiki/Optical_illusion
maggit 11y ago
More important than knowing "hue 30 == orange" is the fact that one can decompose the color to "The hue of this color is orange". Then, finding orange on a color wheel is not so difficult. Especially if you can put in appropriate values for saturation and luminosity. So, regardless of whether or not you know the exact hue value of a given color, it still decomposes more easily than RGB :)
laughinghan 11y ago
Hue is the color wheel. Once you know that a hue of 30 is orange, you immediately know that a hue of 30+180=210 is blue, since it's across from orange on the color wheel. How much time have you spent fiddling with RGB values to pick colors? I assume it's either a lot less or a lot more than me, because while I too can certainly imagine what any given mix would be, my imagination is usually so far off from the real result as to be useless. This has been true even when I worked in pure gray. 50% each of R, G, and B results in a perceptually very dark gray (that is, the contrast between #808080 and pure black, #000, is much less than the contrast between #808080 and pure white, #fff). Elsewhere in this thread I sang the praises of HCL, a color model where you can adjust independently the hue ("color" in the traditional sense, as in orange vs blue vs yellow vs green vs red), the perceived brightness, and the perceived "grayness" (saturation) of a color: http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/

facepalm 11y ago

I've heard good things about hsl values, but so far, those properties mean nothing to me. How would I know that hue 30 is orange?

Ciantic 11y ago
In RGB you have to memorize RGB and their mixings, and then do some calculation to change saturation or lightness. With HSL you'll have to basically memorize only the colorwheel which is not that hard. Lightness and saturation are then straightforward.

laughinghan 11y ago

While HSL is dramatically better than RGB, it still has the problem of not quite mapping intuitively to our perceptions. In particular, for a fixed lightness value, the perceived brightness still varies widely depending on the hue and saturation (100% light and saturated blue is much darker than 100% light and saturated yellow). For fiddling with colors, I recommend the HCL model (Hue/Chroma/Lightness), which is basically the same idea as HSL except your intuitions actually work: the perceived "grayness" (saturation) and the perceived brightness of colors can be adjusted independently (almost—I'll get to this) from each other and from the hue: http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ There are downsides, of course, which can all be traced back to one root problem with HCL: it's determined by biology, not physics. This means that any implementation is only going to be an approximation, which is the "almost" I mentioned above: when you muck around with chroma and hue, you'll still see small variations in brightness. This also means that the boundaries of this color space don't form a cube like RGB, nor a cylinder or double-cone like HSL and HSV. Those spaces form super nice shapes because you can physically choose 256 values for each of the 3 components of a pixel (the RGB cube), and the others are straightforward transformations of thereof. But they have no straightforward relationship to perceived brightness nor perceived "grayness". For the same reason, there's no native support for manipulating HCL colors in browsers, and I believe it's not great on other platforms either.