

The Code Side Of Color - mmackh
http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/

======
unwind
Bleh, it seems they forgot to proof this or have it read by someone who ... I
don't know, maybe knows a bit more about how it really works.

 _When computers name a color, they use a so-called hexidecimal code that most
humans gloss over: 24-bit colors. That is, 16,777,216 unique combinations of
exactly seven characters made from ten numerals and six letters — preceded by
a hash mark._

I mean, "hexidecimal" is hopefully just a typo, but the "explanation" in the
second sentence is off by one, it's not seven characters that make up the
color, since the hash mark is constant and doesn't contribute. I would object
to the "ten numerals and six letters" too, but I guess that's a suitable
popular nomenclature.

And I don't even have a lawn ...

~~~
lubutu
I also have a real problem with them referring to the second digit from the
right as the "tens place", considering it's actually base sixteen...

~~~
wickeand000
Only if you take 'ten' to be a number in base 10. /s

~~~
TeMPOraL
Every base is base 10. ;).

~~~
pilsetnieks
I understand you meant that in jest but base 1 is possible, albeit very
cumbersome:

1 = 1

2 = 11

3 = 111

4 = 1111 ...etc.

~~~
vog
Sorry for the nitpick, but that's not really "base 1".

It is "unary", which is completely different encoding than the "positional
notations" such as decimal, octal, binary, etc. The positional notation
doesn't work with base 1, as in that notation there would be only 0, and 0,
00, 000, etc., which all mean the same number: zero.

~~~
pilsetnieks
That I agree on, it is conceptually different (and more primitive); the whole
conversation just reminded me of GEB.

------
cdawzrd
I'm all for designers learning a bit of the technical background behind colors
on the web, but this article is full of technical inaccuracies,
misconceptions, and misleading comparisons.

"Tens place"? "24-bit color" ignores alpha and color palettes "# means 'This
is a hex number'": No, it means a web color expressed as 3 hex numbers.

Plus, I know it looks better to make your colors less saturated, but when you
are demonstrating starting from #ff0000 and adding other colors, why not
actually display #ff0000 instead of #e93f32?

Finally, spellcheck.

~~~
trebor
I have to disagree with how critical you're being. Yes, proof-reading is
highly important, but he's writing an article for rather untechnical people
(that is the audience: people that don't understand hexadecimal representation
of colors). There's no guarantee that these folks know base-16, that RGB means
bytes representing each color in said order, or even how that maps to a
monitor.

While the original article is somewhat misleading over _why_ hexadecimal works
the way it does, it's closer than you. The OP is trying to explain base-16 at
the same time he's trying to describe basic RGB handling. Not everyone learns
math in other bases at school (I didn't, I had to teach myself) so he had to
cover it, and make use of familiar terms like "tens place".

On top of that, the explanation was presented in a highly visual way. There
are a lot of visual learners who just don't get it when I try to explain just
verbally, or just with the code.

The OP is right: the pound, or hash, sign is how the browser knows that the
identifier is a hexadecimal sequence—just like compilers using 0xff00... to
indicate hexadecimal numbers. #ff0000 is one hexadecimal number just like
#ff000000 is. They aren't separate numbers, they just have different numbers
of bits.

So what's going on here? Well, it's all about the _bits_ , because 2
hexadecimal digits can express 0-255 or 1 byte. So this is actually a data
structure of 3 bytes left-shifted into a single 32-bit integer.

#ff8060 (16744544) is the same as

    
    
        //      R           G          B
        color = 255 << 16 | 128 << 8 | 96
    

Colors with an alpha channel shift all that over another 8 bits and then add
an alpha channel. So RGBA(0,0,0,0.5) is equivalent to:

    
    
        //      R         G         B        A
        color = 0 << 24 | 0 << 16 | 0 << 8 | round(0.5 * 255)
    

In fact, this latter bit order is probably how the browser stores all the
colors now that browsers allow for alpha channels in colors. Yeah, you can
store this in a struct if you want (I remember Delphi let me encode a struct
to/from a raw unsigned integer automatically by compiler optimization), but in
the end this is how the raw color is encoded and sent to the the underlying
renderer. Ask anyone that has dealt with OpenGL, DirectX, or anything close to
the hardware.

So why are hexadecimals widely used in CSS? Because they represent the actual
data structure in memory after all the fancy conversions, like HSL, are done.

Perhaps I misunderstood you, but I felt like writing up an explanation of this
anyhow. Might be useful to someone that didn't understand the why.

~~~
cristianpascu
As a programmer interested in design, I didn't mind the inaccuracies. To my
shame, I didn't even noticed them.

But I found the article to be quite good and useful, and it's obvious that the
guy had all the good intentions.

------
lenkite
I found this article useful despite its errors. However, this article only
reinforces my belief that it is easier to work with the HSL color notation.
Young(Yello-60degree) Guys (Green-120) Can (Cyan-180) Be (Blue-240) Messy
(Magenta-210) Rascals (Red-0/360) gives the visualization for hue. Saturation
is between 0-100, where 0 is grayed out and 100 is full-hue. Lightness varies
from 0-100, where 0 is blacked out, 100 is whited-out and 50 would give the
color as-is.

------
tharris0101
As someone who is colorblind, a lot of my design is based on the logic behind
colors rather than looks. Of course, I always let an actual designer approve,
tinker with, or redo my work. There are a lot of inaccuracies in this piece
but I like the gist of it.

~~~
MartinCron
I'm color-sighted but my son is color blind. I find that the easiest way to
remember what colors differentiate well is to remember the orange/blue colors
that Valve chose for Portal specifically because they have the greatest visual
distinction for the greatest number of people.

It's also an easy shorthand, because many developers/designers know the game,
so you can just say "you know, Portal colors"

~~~
tharris0101
That's a great fact! I'm going to remember that.

------
dphnx
It’s a good explanation of how hex colour codes work, but in this day and age
it's so much simpler to use (and think in) rgb(n, n, n) notation. Not to
mention the hsl(n, n%, n%) notation that is supported by modern browsers.

~~~
pc86
I exclusively use HSL notation because if you're using less functions like
spin(), [de]saturate() and [lighten|darken]() it's what makes the most sense.

~~~
scottmey
I've started using HSL too. Paul Irish is right, once you start using it, it's
really easy to grasp and use on the fly.

See:

<http://mothereffinghsl.com/>

------
brianfryer
Excellent read. I've been interested in developing some sort of tool to help
me select, save, and organize colors for custom palettes.

This will definitely help -- thanks!

~~~
alexchamberlain
Completely disagree - it was an awful read, but please try
<http://www.colourlovers.com/> for the selecting, saving and organising of
colours.

~~~
brianfryer
Colour Lovers is great for picking palettes, but TERRIBLE for mixing colors
together.

Thanks. Sorry you didn't find the article interesting.

I never thought I'd be down voted for havi g the opinion that something was
great.

You are a SHINING example of why HN comments are such awful places these days.

~~~
mnicole
Not only does Colourlovers have tools for what you're complaining about (which
is rarely something a computer can do to begin with outside of using equations
to do so), but the other commenter was legitimately trying to point you
towards a better solution. Ironically, instead of thanking him, you berate him
and then called him the reason this place sucks. Yikes.

------
NelsonMinar
Trying to work with color in RGB triplets is like trying to assemble furniture
with a plastic fork. Any discussion of color for programmers needs to be in
terms of HSL, with a discussion of Lab for completeness and RGB for dealing
with legacy systems.

~~~
trebor
Maybe I'm getting old, though I'm not even 30 yet, but I've never grasped HSL
like I have RGB and RGBA. I come from a background of toying with OpenGL and
game programming, so it became habitual as that was the required structure ~10
years ago.

~~~
andyzweb
With openGL, DirectX, and other real-time rendering I believe sRGB or linear
gamma are preferred because there are library and possibly hardware primitives
that can be taken advantage of. Outside of that I feel we should be notating
color in terms of the L* a* b* colors

~~~
jarek-foksa
Web browsers also seem to be using RGB for storing colors internally. You can
specify colors in HSL, but retrieved values are only in RGB. E.g. if you write
"hsl(100,0%,0%)" in your CSS file then the color will be represented as
#000000 in DOM/CSSOM. This is especially annoying when you are trying to
implement color picker because information about hue is lost if saturation or
lightness are low.

