
Read color hex codes - cpeterso
https://www.dotconferences.com/2018/11/david-desandro-read-color-hex-codes
======
neatcoder
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.

~~~
g105b
Me too. I thought all web developers did this?

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

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

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

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

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

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

------
jagthebeetle
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/)

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

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

------
burlesona
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!

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

~~~
baddox
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
Conversely, the shorthand scale _does_ divide into perfect thirds (#555, #AAA)
or fifths (#333, #666, #999, #CCC).

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

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

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

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

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

