
A Simple Web Developer's Guide to Color - adamnemecek
https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
======
cthor
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.

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

~~~
Symbiote
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/...](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-
content/uploads/2015/01/hsl-color-wheel.png)

~~~
gmanley
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?

~~~
metasean
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](https://en.wikipedia.org/wiki/Optical_illusion)

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

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

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

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

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

~~~
paulojreis
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".

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

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

~~~
talmand
Do local TV advertisements do the same?

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

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

~~~
civilian
What do you think of ReColor for that?
[http://animesh.co/portfolio/recolor/](http://animesh.co/portfolio/recolor/)

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

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

~~~
seanmcdirmid
> 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!

------
educar
I highly recommend color.adobe.com

~~~
RUG3Y
Thank you for recommending this, I love it!

------
akumpf
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/](http://research.kumpf.cc/MunsellForDesigners/)

Cheers, Adam

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

------
frequent
I usually have to start with some existing logos/material, this is my first
stop: [http://www.pictaculous.com/](http://www.pictaculous.com/)

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

------
adams_at
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...](https://packagecontrol.io/packages/Hex%20to%20HSL%20Color%20Converter)

------
m_st
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](http://thenewcode.com/61/An-Easy-Guide-To-HSL-Color-In-CSS3)

------
kevindeasis
This is a good color wheel for prototyping as well:
[http://www.getmdl.io/customize/index.html](http://www.getmdl.io/customize/index.html)

~~~
pdkl95
[http://paletton.com/](http://paletton.com/)

~~~
kevindeasis
That's brilliant.

+1

Thanks for this

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

