A Simple Web Developer's Guide to Color | Hacker News Reader

A Simple Web Developer's Guide to Color

smashingmagazine.com

314 pointsadamnemecek43 comments

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.

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.

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

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

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?

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.

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

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

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/

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?

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.

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/

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.

There is a reason for studying colour theory, and unfortunately sometimes you can make things too simple.

There's nothing wrong in principle with having a bright, highly saturated colour for your brand, but using it as a background for a large area of a web page is risky. It's hard to achieve good contrast for any text you put on top, whether you go light or dark, and on some screens the background alone may become overpowering. It might have been better either to go with a significantly darker shade of blue or to desaturate the main colour for the large background area here.

Using a similarly bright and highly saturated but near-complementary colour as an accent right next to that main colour is another risky move. That sort of combination tends to clash, which is why you're probably getting eye strain looking at the CTA button on the demo page here. I suspect it would be difficult to find an ideal flat button colour based on that red accent once you've chosen the blue background, even if you played with the saturation and brightness. However, putting some sort of separator around the button, such as a border stroke in one of the neutral colours so you don't have the two clashing colours actually touching, would probably limit the damage.

The advice on using slightly colourised neutrals instead of plain greys is good, though.

The risk with highly saturated colors is they're more difficult to reproduce accurately in cross-media applications, namely print media.

Grays are easy to reproduce in cross-media applications, in theory. In practice, there's so much variation in displays and print, and human vision is sensitive to achromatic colors, the error is essentially guaranteed and it will be noticeable. So you're almost always better off with colors that aren't achromatic, aren't highly saturated, and aren't memory colors, like skin tones.

Before you start using your "unique" and "exotic" RGB color as the primary color for your brand, always make sure it actually has a CMYK/PANTONE equivalent. You'll thank me later.

Actually, I'd advice to pick the primary color from a Pantone catalogue, while checking (and testing) its screen (RGB) and print/process (CMYK) versions.

How do you say "Pantone"? "Pant One" or "Pan Tone"? Maybe "Pan ton ay"?

While speaking English, I say "Pan Tone". But my first language is Portuguese; while speaking Portuguese, I (and I think most natives) say "Pan-tawh-ne".

That's interesting. Why do you pronounce the same word differently depending on the language spoken? Since it's a product name I would assume it would be pronounced however it is intended by the owner of the product.

Yeah, it is interesting. And it's not only with Pantone. I think it happens when a brand is popular (generally, or within a niche such as Pantone within the design community), we "adopt" the word with local phonetics.

For instance, almost everybody here articulares Microsoft as "Meeh-craw-soft" (just like if it was a Portuguese word). The same happens with initialisms, such as HP (the H is articulated "uh-gah" and the P is something close to `pet` without uttering the final T).

Do local TV advertisements do the same?

Good question. I think so, but I'll give you the hipster answer (which is also true): I haven't been watching enough TV...

Not mentioned, but important to also consider: accessibility to colorblind people.

What do you think of ReColor for that? http://animesh.co/portfolio/recolor/

Unfortunately, it's still unavailable. Though, as a red-greed colourblind person, it seems really interesting.

Colorblindness isn't a uniform condition. Best practice is to utilize multiple signifiers (hue, lightness/darkness, iconography, etc)

so long as the accent color is differentiated by lightness/darkness in addition to hue it will be fine.

Even more important to consider: how bad the typical advice is, due to rampant misunderstanding of "colorblindness".

I've found Vischeck to be helpful: http://www.vischeck.com/vischeck/

I know that "choosing colors" is everything but simple task, but after reading this article I believe I could do it if I had to (e.g. for personal page, or some low budget, nothing-serious-thing). But don't get too comfortable. For something more serious you need a designer. And also you need pay him to get something good.

> And also you need pay him to get something good.

Or her of course!

At higher levels, you actually have designers who specialize in specific topics, e.g. color. I know a visual designer who specialized in color personally (before moving into management), that isn't as crazy as it sounds on bigger projects. Other specializations could be typography/layout, touch, animation, and even sound. This is why the role of a designer/coder scares me so much: there is so much to know just in design!

I highly recommend color.adobe.com

Thank you for recommending this, I love it!

For those a bit more technically minded and looking to choose colors in an optimal way (for things like data visualization, intuitive interfaces, etc.), look into Munsell colors!

I made a quick tool for playing with Munsell colors and explaining how to use them here:

http://research.kumpf.cc/MunsellForDesigners/

Cheers, Adam

One of the first things I learned about in my color theory class was how colors can change how they appear depending what other colors they're next to. In fact, some colors will fight visually when placed next to (or on top of) one another. Saturated versions of red and blue were the first example given for that lesson. And that's exactly what the author ended up with here.

That said, there are some good tips in here for finding colors. I once asked a designer that I worked with and still highly admire, "how do you pick color palettes for things?" His suggestion was to start with a color you wouldn't expect, and then try to match colors to it. (He also recommended palette sites like those mentioned in the article for us beginner color people.) But the pick a color you wouldn't expect advice has worked well for me.

I usually have to start with some existing logos/material, this is my first stop: http://www.pictaculous.com/

That is quite interesting for other purposes as well! Given a photo, it would allow you to pick a nice frame color or what not.

I've written a Sublime Text package to convert RGB colors (hex, RGB, & RGBa) to HSL or HSLa. You can convert selected colors or all colors in a file.

https://packagecontrol.io/packages/Hex%20to%20HSL%20Color%20...

Regarding HSL vs RGB, I find this article a good introduction to HSL: http://thenewcode.com/61/An-Easy-Guide-To-HSL-Color-In-CSS3

This is a good color wheel for prototyping as well: http://www.getmdl.io/customize/index.html

http://paletton.com/

That's brilliant.

Thanks for this

What about a clever web developer's guide to colour?

Reply on news.ycombinator.com