6 ms·

Read color hex codes

120 points by cpeterso 8y ago

jacobolus 8y ago
Learning to interpret base 16 numbers is easy. But the problem is that RGB values are only indirectly related to the perceptual attributes of a color. (Which is why knowing the HSL or HSV coordinates is also not very informative.) Much easier and more useful (for a human reader) would be to first convert to Munsell coordinates, or even CIELAB LCh.
- some1else 8y ago
  I find the colour wheel (by extension HSL/HSV) somewhat intuitive, compared to RGB or CMYK mixing.
  - jacobolus 8y ago
    HSL and HSV are an almost trivial transformation of RGB, which make no reference to human perception. They are a mediocre tool for implementing a color picker for an image editor, but at least there’s some logic to their use in that context, especially in the context of 1970s graphics workstations made by computer programmers with no color science background, where they come from. They should not be used for any other purpose. Back in ~2010 I wrote the Wikipedia page about HSL/HSV and made a diagram explaining how the transformation works, https://commons.wikimedia.org/wiki/File:Hsl-and-hsv.svg https://commons.wikimedia.org/wiki/File:Hsl-and-hsv.svg
    - slavik81 8y ago
      Thank you very much for that diagram. I've referred confused people to it on a number of occasions—including myself at least once.
    - some1else 8y ago
      Very nice diagram, and thank you for writing that page! I've visited a few times before. I agree that processing photo-material in Lab has definite advantages, it's perfect for perceptually mutating colours. It's definitely a superior colour model. I get stuck trying to use it to build the initial palette though, and I'd have similar trouble sticking to RGB or CMYK. I'd say that despite perceptual differences caused by HSL/HSV transformations, I'm able to intuit a colour based on it's Hue and Saturation (accounting for the mistakes), by referring to the colour wheel in my mind. Whereas in Lab I can only anticipate the effect of Lightness, the effects of a and b components are too non-linear for me to grasp. Luckily there is support for Lab in chroma.js, which is very useful for making perceptually sound mutations when generating UI palettes. I used it once for ~equidistant traversal: http://some1else.github.io/life/ http://some1else.github.io/life/ Edit: I'd like clarify that traversing all these colour spaces in decent UIs is quite manageable. I was referring to how fast I can guesstimate a colour from reading the actual values. For example, let's take the YC colour and write it down. Compared to the rest, HSB immediately screams "bright orange" at me: Hex: #fc6621 RGB: 252, 102, 33 CMYK: 0%, 75%, 96%, 0% Lab: 63, 56, 65 HSB: 19°, 87%, 99%
      - jacobolus 8y ago
        You would be able to guess a lot better given Munsell coordinates, CIECAM02 JCh (or even lightness, chroma, and hue composition), or in a pinch CIELAB LCh. I find NCS coordinates less useful, but some people like those too. In CIECAM02 assuming a fairly typical context: J: 55.5 ... C: 78.7 ... h: 43.3° ... hue composition 43Y 57R From which it is immediately obvious we are talking about a slightly lighter than mid-gray, very intense, slightly reddish orange. None of the versions you listed are close to intuitive for a human reader who hasn’t spent a lot of time memorizing the mapping between representation and color.
- svachalek 8y ago
  True, it’s hard to visualize a color in much detail without going to another model, but for a rough guesstimate this does fine and despite the long explanation it’s pretty easy to do in your head almost instantly. Due to childhood hours spent programming the TI-99/4A I can look at hex numbers and see bitmaps which is also not a particularly useful skill but trivial with a little practice. (unlike what they said in the Matrix, I doubt anyone would ever prefer it that way though)
  - jacobolus 8y ago
    It’s not so much that it’s “hard to visualize” the colors. The problem is that comparing the results numerically is grossly misleading, because RGB are not perceptually relevant color dimensions. For example, this article says “D is the highest value, 2 is the lowest. D is high. 2 is low. That's a wide range, but not completely wide. So our color has moderate saturation, thus making it a washed color.” But you can make a wide variety of colors where 34/255 is the lowest sRGB coordinate and 221/255 is the highest sRGB coordinate, including some which are extremely intense (e.g. #d2d) and others which are more moderate (e.g. #da2). The article says, “the values are both high and low, so it has middle lightness,” again based on the example #d92. But try comparing the lightness of #92d and #9d2. While HSL or HSV “L” or “V” will be the same between the two, one is a light yellowish green color, the other is dark purple. These heuristics are grossly misleading and should not be relied on.
- kccqzy 8y ago
  Exactly. Speaking of the deficiency of the RGB model, it is most apparent when one tries to linearly interpolate colors (for example to construct a gradient). Linear interpolation in the RGB space produces gradients that are noticeably less natural than those in Lab.
  - dearrifling 8y ago
    It's because what most people call RGB is sRGB, a nonlinear color space. Interpolating in a linear color space is already much better.
thunderbong 8y ago
This is really amazing! I wonder how many other things in our world are there right in front of our eyes but we can't see them because of our mental blocks.
burlesona 8y ago
The first few paragraphs just explain what the hex codes mean literally, but the article gets a lot more interesting after that. As another poster mentioned, his heuristics aren’t perfect, but they’re pretty handy. I’ve memorized a bunch of hex codes and the general “shape” of colors over the years, but this more disciplined approach is really interesting!
jagthebeetle 8y ago
Not to trivialize the article's ruminations above and beyond the simple mechanical understanding of hex codes – but once you have the basics of hex and color mixtures, a fun practical way to practice them is with one of various "guess the color for a hex code" games; e.g., http://yizzle.com/whatthehex/ http://yizzle.com/whatthehex/
neatcoder 8y ago
I can read color hex codes just fine. In fact, while writing my CSS, I often have a shade of color in mine and I just go ahead and type out its hex code by guesswork and then fine tune it by changing the R, G, and B values. I am not colorblind. I never thought this is a special skill! It's just basic understanding of hexadecimal, the RGB color model, and additive color mixing. The nice thing this video helps me with is to give a name to every RGB color code. This is something I had always found difficult even though I knew what each RGB color code would look like. Giving a name to every RGB code makes it easy to communicate colors to others.
- _nalply 8y ago
  Same for me. I learnt to mix diverse amounts of the three light colors red, green and blue. You know you get yellow when you mix red and green, and orange if you have somewhat more red than green, and so on.
- g105b 8y ago
  Me too. I thought all web developers did this?
  - indalo 8y ago
    No, hex color mixing theory doesn't sound like a sound UI development pattern.
    - castis 8y ago
      What? If you're a web developer and don't know how to use them, then you're not a very good one.
      - Spivak 8y ago
        Imagine that the string you plugged into your browser was actually the hash of the hex code for some nonsensical reason. Developers would be no less good or productive since for almost all purposes they're arbitrary constants that happen to be attached to classes like 'blue-primary'.
saagarjha 8y ago
> You're likely already familiar and have seen #FFF for white and #000 for black. The actual value of a shorthand code is made by duplicating the digit for each channel. So #D92 is technically #DD9922. Huh, I had always thought that they added a zero, so #D92 would become #D09020. TIL.
- cbsks 8y ago
  I mistakenly thought that too, but it makes sense. Otherwise #fff would expand to #f0f0f0, which is a light gray, but not quite white.
- aasasd 8y ago
  The shorthand pretty much maps a 16-value scale to the same range for each channel, instead of the 256 values.
- baddox 8y ago
  I think I always knew that it doubled the values, but I only recently realized that #888 isn’t 50%, which would be #808080 (rounded).
  - EvilTerran 8y ago
    Conversely, the shorthand scale does divide into perfect thirds (#555, #AAA) or fifths (#333, #666, #999, #CCC).
aasasd 8y ago
Vastly better than the “Make some colors by shuffling the hex numbers around” from yesterday.
fenwick67 8y ago
Wow, I would have never guessed David was colorblind. In fact his websites and logo designs make remarkable use of color.
chrisbrandow 8y ago
That was really helpful with regards to understanding how to get saturation and brightness from hex. I hadn’t seen that explained before.
miqkt 8y ago
The explanations breaking down the constituents of hex codes reminded me of CSS colour module level 4 and how 4 (#rgba) and 8 (#rrggbbaa) digit codes might see support. I wonder if there's still intuition for visualising colours when involving opacity in the mix.

120 points by cpeterso 8y ago

Learning to interpret base 16 numbers is easy. But the problem is that RGB values are only indirectly related to the perceptual attributes of a color. (Which is why knowing the HSL or HSV coordinates is also not very informative.) Much easier and more useful (for a human reader) would be to first convert to Munsell coordinates, or even CIELAB LCh.

some1else 8y ago
I find the colour wheel (by extension HSL/HSV) somewhat intuitive, compared to RGB or CMYK mixing.
- jacobolus 8y ago
  HSL and HSV are an almost trivial transformation of RGB, which make no reference to human perception. They are a mediocre tool for implementing a color picker for an image editor, but at least there’s some logic to their use in that context, especially in the context of 1970s graphics workstations made by computer programmers with no color science background, where they come from. They should not be used for any other purpose. Back in ~2010 I wrote the Wikipedia page about HSL/HSV and made a diagram explaining how the transformation works, https://commons.wikimedia.org/wiki/File:Hsl-and-hsv.svg https://commons.wikimedia.org/wiki/File:Hsl-and-hsv.svg
  - slavik81 8y ago
    Thank you very much for that diagram. I've referred confused people to it on a number of occasions—including myself at least once.
  - some1else 8y ago
    Very nice diagram, and thank you for writing that page! I've visited a few times before. I agree that processing photo-material in Lab has definite advantages, it's perfect for perceptually mutating colours. It's definitely a superior colour model. I get stuck trying to use it to build the initial palette though, and I'd have similar trouble sticking to RGB or CMYK. I'd say that despite perceptual differences caused by HSL/HSV transformations, I'm able to intuit a colour based on it's Hue and Saturation (accounting for the mistakes), by referring to the colour wheel in my mind. Whereas in Lab I can only anticipate the effect of Lightness, the effects of a and b components are too non-linear for me to grasp. Luckily there is support for Lab in chroma.js, which is very useful for making perceptually sound mutations when generating UI palettes. I used it once for ~equidistant traversal: http://some1else.github.io/life/ http://some1else.github.io/life/ Edit: I'd like clarify that traversing all these colour spaces in decent UIs is quite manageable. I was referring to how fast I can guesstimate a colour from reading the actual values. For example, let's take the YC colour and write it down. Compared to the rest, HSB immediately screams "bright orange" at me: Hex: #fc6621 RGB: 252, 102, 33 CMYK: 0%, 75%, 96%, 0% Lab: 63, 56, 65 HSB: 19°, 87%, 99%
    - jacobolus 8y ago
      You would be able to guess a lot better given Munsell coordinates, CIECAM02 JCh (or even lightness, chroma, and hue composition), or in a pinch CIELAB LCh. I find NCS coordinates less useful, but some people like those too. In CIECAM02 assuming a fairly typical context: J: 55.5 ... C: 78.7 ... h: 43.3° ... hue composition 43Y 57R From which it is immediately obvious we are talking about a slightly lighter than mid-gray, very intense, slightly reddish orange. None of the versions you listed are close to intuitive for a human reader who hasn’t spent a lot of time memorizing the mapping between representation and color.
svachalek 8y ago
True, it’s hard to visualize a color in much detail without going to another model, but for a rough guesstimate this does fine and despite the long explanation it’s pretty easy to do in your head almost instantly. Due to childhood hours spent programming the TI-99/4A I can look at hex numbers and see bitmaps which is also not a particularly useful skill but trivial with a little practice. (unlike what they said in the Matrix, I doubt anyone would ever prefer it that way though)
- jacobolus 8y ago
  It’s not so much that it’s “hard to visualize” the colors. The problem is that comparing the results numerically is grossly misleading, because RGB are not perceptually relevant color dimensions. For example, this article says “D is the highest value, 2 is the lowest. D is high. 2 is low. That's a wide range, but not completely wide. So our color has moderate saturation, thus making it a washed color.” But you can make a wide variety of colors where 34/255 is the lowest sRGB coordinate and 221/255 is the highest sRGB coordinate, including some which are extremely intense (e.g. #d2d) and others which are more moderate (e.g. #da2). The article says, “the values are both high and low, so it has middle lightness,” again based on the example #d92. But try comparing the lightness of #92d and #9d2. While HSL or HSV “L” or “V” will be the same between the two, one is a light yellowish green color, the other is dark purple. These heuristics are grossly misleading and should not be relied on.
kccqzy 8y ago
Exactly. Speaking of the deficiency of the RGB model, it is most apparent when one tries to linearly interpolate colors (for example to construct a gradient). Linear interpolation in the RGB space produces gradients that are noticeably less natural than those in Lab.
- dearrifling 8y ago
  It's because what most people call RGB is sRGB, a nonlinear color space. Interpolating in a linear color space is already much better.

thunderbong 8y ago

This is really amazing! I wonder how many other things in our world are there right in front of our eyes but we can't see them because of our mental blocks.

burlesona 8y ago

The first few paragraphs just explain what the hex codes mean literally, but the article gets a lot more interesting after that. As another poster mentioned, his heuristics aren’t perfect, but they’re pretty handy. I’ve memorized a bunch of hex codes and the general “shape” of colors over the years, but this more disciplined approach is really interesting!

jagthebeetle 8y ago

Not to trivialize the article's ruminations above and beyond the simple mechanical understanding of hex codes – but once you have the basics of hex and color mixtures, a fun practical way to practice them is with one of various "guess the color for a hex code" games; e.g., http://yizzle.com/whatthehex/ http://yizzle.com/whatthehex/

neatcoder 8y ago

I can read color hex codes just fine. In fact, while writing my CSS, I often have a shade of color in mine and I just go ahead and type out its hex code by guesswork and then fine tune it by changing the R, G, and B values. I am not colorblind. I never thought this is a special skill! It's just basic understanding of hexadecimal, the RGB color model, and additive color mixing. The nice thing this video helps me with is to give a name to every RGB color code. This is something I had always found difficult even though I knew what each RGB color code would look like. Giving a name to every RGB code makes it easy to communicate colors to others.

_nalply 8y ago
Same for me. I learnt to mix diverse amounts of the three light colors red, green and blue. You know you get yellow when you mix red and green, and orange if you have somewhat more red than green, and so on.
g105b 8y ago
Me too. I thought all web developers did this?
- indalo 8y ago
  No, hex color mixing theory doesn't sound like a sound UI development pattern.
  - castis 8y ago
    What? If you're a web developer and don't know how to use them, then you're not a very good one.
    - Spivak 8y ago
      Imagine that the string you plugged into your browser was actually the hash of the hex code for some nonsensical reason. Developers would be no less good or productive since for almost all purposes they're arbitrary constants that happen to be attached to classes like 'blue-primary'.

saagarjha 8y ago

> You're likely already familiar and have seen #FFF for white and #000 for black. The actual value of a shorthand code is made by duplicating the digit for each channel. So #D92 is technically #DD9922. Huh, I had always thought that they added a zero, so #D92 would become #D09020. TIL.

cbsks 8y ago
I mistakenly thought that too, but it makes sense. Otherwise #fff would expand to #f0f0f0, which is a light gray, but not quite white.
aasasd 8y ago
The shorthand pretty much maps a 16-value scale to the same range for each channel, instead of the 256 values.
baddox 8y ago
I think I always knew that it doubled the values, but I only recently realized that #888 isn’t 50%, which would be #808080 (rounded).
- EvilTerran 8y ago
  Conversely, the shorthand scale does divide into perfect thirds (#555, #AAA) or fifths (#333, #666, #999, #CCC).

aasasd 8y ago

Vastly better than the “Make some colors by shuffling the hex numbers around” from yesterday.

fenwick67 8y ago

Wow, I would have never guessed David was colorblind. In fact his websites and logo designs make remarkable use of color.

chrisbrandow 8y ago

That was really helpful with regards to understanding how to get saturation and brightness from hex. I hadn’t seen that explained before.

miqkt 8y ago

The explanations breaking down the constituents of hex codes reminded me of CSS colour module level 4 and how 4 (#rgba) and 8 (#rrggbbaa) digit codes might see support. I wonder if there's still intuition for visualising colours when involving opacity in the mix.