Read color hex codes | Hacker News Reader

Read color hex codes

dotconferences.com

120 pointscpeterso33 comments

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.

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.

Me too. I thought all web developers did this?

No, hex color mixing theory doesn't sound like a sound UI development pattern.

What? If you're a web developer and don't know how to use them, then you're not a very good one.

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'.

That is harsh and somewhat elitist. I'm guessing people could probably say pretty much anything to sound skilled by replacing X here: "What? If you're a web developer and don't know how to use X, then you're not a very good one."

I understand RGB, base-16 and HSL yet this isn't instinctive for me. I might be a below average dev (although my clients and colleagues seem to think otherwise), but I'd prefer a color picker any day before thinking about translation of color codes.

The value that pops out of the color picker shouldn't be a mystery to you.

Ah, agreed. But your comment didn't actually say that - you took something kinda small and leveraged it too far as it would define the web dev skills.

I'm well aware of what I said, thanks.

As a colorblind dev, I've been reliant upon hex codes for 20ish years to know what color I'm looking at (by balancing RGB).

However I've always had a hard time creating color palettes and shades. I recently gave HSL a shot and really enjoyed it. Memorizing the Hue values isn't hard (it's easier than deciphering a three part hex code). Saturation and Lightness are just percentages.

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/

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.

I find the colour wheel (by extension HSL/HSV) somewhat intuitive, compared to RGB or CMYK mixing.

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

Thank you very much for that diagram. I've referred confused people to it on a number of occasions—including myself at least once.

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/

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%

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.

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)

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.

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.

It's because what most people call RGB is sRGB, a nonlinear color space. Interpolating in a linear color space is already much better.

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!

> 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.

I mistakenly thought that too, but it makes sense. Otherwise #fff would expand to #f0f0f0, which is a light gray, but not quite white.

The shorthand pretty much maps a 16-value scale to the same range for each channel, instead of the 256 values.

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).

Conversely, the shorthand scale does divide into perfect thirds (#555, #AAA) or fifths (#333, #666, #999, #CCC).

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

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

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.

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.

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

Reply on news.ycombinator.com