
Building your color palette - tnorthcutt
https://refactoringui.com/previews/building-your-color-palette/
======
pg_bot
Take this one step further and build the color palette into your stylesheets.
If you're using Sass you can setup something like:

    
    
        $palettes: (
          blue: (
            lightest: hsl(201, 75%, 66%),
            lighter:  hsl(201, 75%, 61%),
            light:    hsl(201, 75%, 56%),
            base:     hsl(201, 75%, 51%),
            dark:     hsl(201, 75%, 46%),
            darker:   hsl(201, 75%, 41%),
            darkest:  hsl(201, 75%, 36%)
          ),
          red: (...),
          gray: (...)
        )
    
        @function palette($palette, $tone: 'base') {
          @return map-get(map-get($palettes, $palette), $tone);
        }
    

This ends up looking like: `background-color: palette(blue, "light")` in your
codebase.

I typically use hsl instead of hex codes because it is easier to understand
and modify. You can quickly build up a palette by just modifying the lightness
scale on each color by a constant percentage. (This is where I disagree with
the author, all of design is just math)

It is often useful to combine colors for your designs and Sass has you covered
with the `mix` function. Using this setup you can call `mix(palette(blue),
palette(gray))` to combine colors in your palette. You typically want to do
this with text on a colored background to make it look more visually
appealing.

This is the only way I've found to stay sane managing your colors in a big
project. In my experience, everything else goes off the rails when you
introduce multiple people into the picture. Please steal this idea, your
projects will be better because of it.

~~~
codetrotter
> background-color: palette(blue, "light")

Having never used Sass, this syntax strikes me as odd.

Is there a CSS pre-processor similar to Sass but where you would instead write
it as “background-color: palette.blue.light”?

~~~
katsura
You can use CSS variables, no preprocessor necessary for newer browsers:

    
    
      :root {
        --palette-blue-light: blue;
      }
      background-color: var(--palette-blue-light);

~~~
cmroanirgo
Great suggestion, but due to extremely poor support [0], it might be best to
use a polyfill [1]

[0] [https://caniuse.com/#feat=css-variables](https://caniuse.com/#feat=css-
variables) [1] [https://github.com/aaronbarker/css-variables-
polyfill](https://github.com/aaronbarker/css-variables-polyfill) (or
[https://github.com/jhildenbiddle/css-vars-
ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill))

Personally, I don't like forcing JS to make things render properly on the
client, but it depends on the project whether it's acceptable or not.

However, it kind of defeats the purpose, because if you're willing to use a
polyfill, then you may as well use sass or less as a solution anyway (and get
a range of benefits that they provide).

------
the_bear
I've picked my fair share of colors for various businesses, and something that
annoys me is that you pretty much always end up with green or blue being the
main color.

I tried to figure out why, and I think it's a really dumb reason: like this
article says, if you don't really know what you're doing with design, you want
a spectrum of light-to-dark colors to choose from. Light green -> normal green
-> dark green.

For some weird reason, we call light red "pink". And dark orange/yellow is
"brown". If you pick one of those as your main color, it becomes much harder
to just use lighter or darker shades without it becoming something else
entirely. Great designers can make pink or brown work, but if you're a
programmer who's just trying to find a "good enough" color scheme, it's way
easier to go with green or blue.

I don't really have a good reason why we all think of pink as a different
color from red, but we do.

~~~
porphyrogene
Violet, Indigo and Red are different hues. Pink is not "light red". No
adjustment of the saturation of red will ever make it pink. Brown is created
with a low saturation of red, orange, yellow or green.

~~~
sgustard
Pink is a "light tint of red", not a different hue.
[https://en.wikipedia.org/wiki/Shades_of_red](https://en.wikipedia.org/wiki/Shades_of_red)

~~~
porphyrogene
That is a purely semantic argument. It's also a contradictory one. That
article says in the first sentence that they are considering adjusted hues as
"shades" or "tints" of red. Using terminology beyond HSV only introduces
semantic complexities to confuse the topic.

~~~
jacobolus
Wikipedia is a terrible source for this type of thing.

“Pink” was until recently a synonym for “light red”.

However, when it became possible and fashionable to produce more bright
purple-red colors, these were also called “pink” (“hot pink”, etc.) by
marketers, and now our late 20th/early 21st century concept of the denotation
of the word “pink” is considerably broader than 50+ years ago.

------
tbarkow
There actually is a science for this: it's called accessibility. WCAG
guidelines would be extremely useful in determining how colors should be
combined and applied to meet contrast guidelines.

It would also be useful to create usage contexts to guide additions to the
palette. for example: text + background, ui (border, icon) + background,
background + background.

These would help identify common situations and ensure that you're adding the
colors you need and avoiding future bloat.

Since companies are now being sued over a11y issues, it's definitely something
that should be incorporated into the design process from the beginning.

~~~
chiefalchemist
Yes WCAG guidelines are useful. But, for me as a novice empathic but still a
novice, they are not easy to use. At the very least, finding definitive
examples and such often eludes me.

That aside, thanks for mentioning accessibility and #A11Y.

~~~
roryokane
Here is a tool that makes it easier to pick foreground and background colors
with high enough contrast according to WCAG guidelines:
[https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)

------
nostrademons
Kinda ironic that he starts the article by decrying fancy color palette
generators that give you 5 hex codes centered around a primary color, and then
ends it by choosing a base color and filling in the gaps with 5 (possibly 10)
shades from light to dark. That's exactly what color palette generators do!

The mistake most people do is going hog-wild with color palette generators.
The vast majority of the time, you want a monochromatic scheme with a
complementary accent color. Adjacent, triad, and tetrad schemes are quite
special purpose, and you use them differently. Think of Google - it's a tetrad
scheme, but the base color for all Google sites is _white_ , and all 4 colors
of the logo are used as accents. You want to KISS - if you do have a
multicolor palette, use the colors sparingly and pick a neutral white or grey
as the primary background color.

~~~
andy_ppp
No, not ironic, that's precisely what he doesn't do; he says you probably need
5-9 shades of each colour group - Primary, Secondary, Highlight, Greys, etc.

He also says the reason you can't write a generator is because every colour
looks different and needs to be judged by your eyes.

------
carapace
Light grey sans-serif body font means you hate your readers' eyes. At least
they didn't make it tiny as well.

Also, the color advice is bad. The garish "calculated and scientific" example
is _more readable_ than the "What you actually need" example.

\- - - -

Edit: The differences between people's eyes and between monitors' color output
mean that you probably shouldn't spend more than an hour or two (or a couple
of hundred bucks) picking out a dependable conservative color pallet. In fact,
the time it took to read that article should be enough to pick a pallet,
_unless you just want to play with colors, which is fine._

------
weinzierl
> Ever used one of those fancy color palette generators? You know, the ones
> where you pick a starting color, tweak some options that probably include
> some musical jargon like "triad" or "major fourth", and are then bestowed
> the five perfect color swatches you should use to build your website?

> This calculated and scientific approach to picking the perfect color scheme
> is extremely seductive, but not very useful.

Just recently I wondered if there is any scientific basis behind these
approaches. I skimmed all research papers that I could find but not a single
one of them provided serious data based support. All justification for these
methods I found were historical, i. e. artists used color wheels and different
methods of color selection on the wheels for a long time.

My conclusion so far is: There is no science what so ever behind these color
palette generators.

I only spent about a day on this research and I'm not an expert, so if anyone
has some pointers to serious research in that direction I'd be happy to know.

~~~
guitarbill
I'm happy to give them the benefit of the doubt, and I think many colour
pickers wanted to do the right thing.

HSL or HSV was a step up from RGB, so it made sense to use it to derive other
colours quickly. Because if you're an underpaid freelance developer, the
primary colour is usually set by the client, but they usually son't have a
full colour scheme. Using a colour wheel based tool gave good enough results
fast.

Not only are perceptual uniform models like CIE L _a_ b*, and the derived
CIELCh or CIEHLC mindbending to understand and code, but monitor colour gamuts
sucked, and so it was overkill.

So is it scientific? If what you wanted was an easy way to derive a number of
colours, sort of. If you need them to "look good", well that's art, not
science. So ultimately, IDK what answer you're looking for. Colour wheels have
always just been a nice way to visualise hue.

~~~
weinzierl
> If you need them to "look good", well that's art, not science.

I'm not so much interested in "look good" but in "look pleasing or harmonious
together" and I think that's a question science might have an answer to.

It's no coincidence that the palette generators borrow musical jargon. In
music the definitions of _minor second_ and _perfect octave_ are completely
uncontroversial. That these two intervals have different musical qualities, we
call them dissonance and consonance, is uncontroversial too. Sure, some
cultures use dissonant intervals heavily in their music but they still
recognize the different qualities. Most importantly there has been a ton of
research in this field.

Contrast this with the state of the art in color science: When it comes to
color harmony there is not even a single universal definition of opposite or
complementary. Look at the Wikipedia article about that topic [1]. It mixes up
three completely separate topics:

1\. Colors that when mixed together give a neutral hue

2\. Colors that are opposite of each other on some wheel

3\. Colors that supposedly have a certain effect, like contrast or harmony,
when perceived next to each other

Color wheels are a dime a dozen. There is no shortage of claims that this and
that color go well together but there doesn't seem to be any serious research.

I wonder if that is just my impression because it's not my field, or if maybe
color science really is just not developed enough to tackle these kind of
questions.

[1]
[https://en.wikipedia.org/wiki/Complementary_colors](https://en.wikipedia.org/wiki/Complementary_colors)

~~~
jpfed
>I wonder if that is just my impression because it's not my field, or if maybe
color science really is just not developed enough to tackle these kind of
questions.

I have wondered the same thing ( [https://ask.metafilter.com/245014/Help-me-
understand-color-t...](https://ask.metafilter.com/245014/Help-me-understand-
color-theory-from-a-mechanistic-perspective) ) and haven't found anything.

I've had some subsequent thoughts. We know that there is a characteristic of
the human perception of scenes called "color constancy". That is that our
visual perceptual abilities are surprisingly robust to changes in the
character of light sources. We may be aware of the light source color, but we
easily "factor it out" of what we see of the objects in the scene. It is as if
color constancy takes the distribution of colors and applies some
transformation to standardize that distribution.

My guess is that the mechanisms underlying color constancy contribute to the
aesthetic feel of the scene. If a scene's colors lie along a single line (e.g.
a grayscale image), there is a sort of cramped or confined feeling (at least,
I experience this), as if the color constancy mechanism is attempting to make
a gaussian sphere* out of the colors but there's not enough variance to make
it work.

At the same time, if you make a palette out of the corners of the RGB cube,
there's an unusually high amount of variance. The image might be very vivid
but it gives me an impression of excessive busy-ness or energy. The sphere has
spikes now!

Maybe harmonious color schemes are those in which the color constancy
mechanism doesn't have to do too much work to make the color distribution into
a standard shape _... maybe. I don 't have any evidence or anything.

_I don't think the "standard" distribution of colors that would feel neutral
is actually going to be a sphere, but it's not going to be perfectly flat and
it's not going to be a straight line. It is possible to visualize the color
histograms of images as 3d point clouds to get some sense of what feeling is
evoked by different color distributions (e.g.
[http://opensource.graphics/visualizing-the-3d-point-cloud-
of...](http://opensource.graphics/visualizing-the-3d-point-cloud-of-rgb-
colors/) )

------
justinpombrio
And make sure to use LAB color space!

[https://en.wikipedia.org/wiki/Lab_color_space](https://en.wikipedia.org/wiki/Lab_color_space)

In LAB space, the distance between two colors approximate perceptual distance
(how different two colors look). Its not exact---it can't be, because the
space isn't actually Euclidean---but it's close.

RGB, on the other hand, isn't close. Here's a visualization of RGB space
embedded in LAB space:

[https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i...](https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-
in-cielab.png)

If RGB space corresponded to what our eyes saw, that would be a hexagon.

------
OJFord
Great article, I especially liked:

> the ones that make you think of Facebook as "blue", even though it's really
> mostly grey.

which seems obvious in retrospect.

I'm colour-blind (mostly red-green, sometimes blue-green too, never pinned
down exactly which type - or types - it is) so I have used those generators
before, and I think they do have value for me or others that just think they
don't have a good eye for colours that look good together.

The opening example shows a nauseous combination of colours, but actually what
the article mainly addresses is the lightness of each - presumably one could
get some good results with a 'palette generator', and then following the
advice here with the generated palette as the 'base colours'.

------
steve_taylor
After reading this, I created a theme color picker in a single HTML file with
no libraries. It's only tested in the latest Chrome.

[https://gist.github.com/steve-
taylor/40f54b400785258b80d4792...](https://gist.github.com/steve-
taylor/40f54b400785258b80d4792a1b540501)

~~~
tombrossman
Tested and working well with the latest Firefox (v63). Nice work, this is
handy!

------
MattHeard
No mention of color blindness or a11y, which seem like important factors in
color selection.

~~~
PavlovsCat
This simulates the effects of various types of color blindness on any webpage:

[https://www.toptal.com/designers/colorfilter](https://www.toptal.com/designers/colorfilter)

Something like that could even be part of automated testing for graphical
applications and websites -- why not?

------
sureaboutthis
> There's no real science

> It's not a science

I preach and preach that to people on certain other forums who insist you need
one of those palette generators or palette samplers, and everyone praises
them, but it's ART not SCIENCE or MATH! It's why there are artists who design
the look of things and not scientists or engineers.

~~~
PavlovsCat
I think a big thing but underrated thing is iteration. Giving things time to
"simmer", looking at things with fresh eyes often, i.e. having multiple
shorter sessions instead of few long ones, and simply playing around with and
comparing various ways how things could look, can get you quite a long way.

Otherwise, you end up with "coder colors".

[http://www.pouet.net/prod.php?which=53631](http://www.pouet.net/prod.php?which=53631)

------
citrus1330
I think it's assumed you would still use grays and whites if you use one of
those palette generators.

------
PavlovsCat
It's a bunch of variables, so expose them to the users, and let them create
and share color schemes. Pick some of those for the off-the-shelf selection,
and it'll be better than any _single_ color scheme.

Even better would be a standard way for websites and browsers to negotiate
color schemes, and for users to be able to set specific themes for sites, a
theme for all sites, themes depending on the URL, enforce legibility with
color blindness, and so on. It's 2018, yet we don't even trust people with
selecting user stylesheets in the GUI anymore.

To me, how to make neat colors is a discussion normal users should have, that
it's so much in the hand of web designers is a failure in and of itself.

------
noir_lord
While there are no absolutes when it comes to taste.

One design language that I really like is the Atlassian/Bitbucket one.

[https://atlassian.design/guidelines/brand/color-1](https://atlassian.design/guidelines/brand/color-1)

I've generally really liked the changes to bitbucket over the last few years
in terms of UI and UX.

They also have an impressive component archive.

[https://atlaskit.atlassian.com/packages](https://atlaskit.atlassian.com/packages)

A lot of the packages are under an Apache 2 license, I can't say all as I
haven't looked but the master repo is Apache 2.0 as well.

~~~
magicbuzz
Those colour names in the Atlassian palette are hilarious.

~~~
noir_lord
Every design needs more cowbell.

------
rudedogg
I think the key is to build the palette from a mental model of relationships.
You start with a base color, and choose "adjustments" down the line to
describe accent colors, etc.

The other perk about this approach is that you can then adjust the base color,
and everything referencing it usually looks pretty good or only needs slightly
adjusted.

I've been working on a tool for this off and on since 2015
([https://www.colorproducer.com/](https://www.colorproducer.com/)). The app
has some really annoying issues, mainly around UI. I think the main thing I
did wrong was to make it work on a per CSS selector/color property basis. Most
websites will have 50+ unique selectors with color value, so it becomes a lot
of work. I'm trying to address this, and have been thinking of a "mapping"
step, where the user picks out what selectors are a primary color, accent
color, etc., and then works solely with those groupings.

Hopefully this makes sense, I've been thinking about it a lot and may be a
little too stuck in my own head/thoughts.

------
zachkatz
I actually really love that first example. Wish more sites looked like that.

~~~
porphyrogene
For people with blue-yellow color blindness that page is a nightmare.

~~~
thoughtexplorer
If it makes you feel any better, it's also a nightmare when you can see blue-
yellow.

------
chevas
This was really helpful to see how the author thought through the palette's
creation. In my experience, I came to similar results, but over a long period
of time and rather haphazardly after endless tweaking.

I would add that often times it's helpful to define a "light on dark bg
palette" and "dark on light bg palette."

------
userbinator
_This calculated and scientific approach to picking the perfect color scheme
is extremely seductive, but not very useful.

Well, unless you want your site to look like this:_

There's a difference between picking maximally distinctive colours (which a
lot of palette generators are designed to do) for graphs and such, and picking
colours for UI.

Personally, I think less colour and higher contrast is better than the trend
of barely-distinguishable shades of grey; and of course, for desktop apps,
please use the platform's standard UI colours because the user may have
customised them for his/her preference/colour-perception and expect your app
to be too.

------
renke1
Let's say I created a suitable color palette. What would be the best way to
make sure the colors are used consistently? – Giving it names like primary_700
or accent_1_700 seems a bit too technical.

~~~
drewrv
Use a css preprocessor, and define variables with the technical names but
classes that end up in html should have descriptive names. Something like
this:

    
    
      $accent_1_700: #e60000;
      $accent_2_900: #ff9999;
    
      @mixin button_border($color) {
        border: 1px solid $color;  
      }
      
      .alert-button {
        background-color: $accent_2_900;
        @include button_border($accent_1_700);  
      }

This makes your color palette defined explicitly and easy to change in one
place, and makes which color on the palette you're using in a given context
defined explicitly as well.

------
rriepe
Strapless, a color library I built, automates a lot of this if you use
LessCSS: [http://strapless.io/](http://strapless.io/)

~~~
watersb
Just tried it. Impressive. Thanks!

------
chiefalchemist
I'm not sure (read: very new tbought) what this would look like in terms of a
broader theory, or mixins, but I would imagine it might be helpful, just like
with music, to think of colors as having a key; that at the very least there's
some way to automatically define the colors __not__ in the key.

Okay. It's a raw idea :) Maybe someone else here can flesh it out?

------
dlbucci
Cool article, but isn't the point of a palette that you limit your options so
it's easier to pick a color and the colors on your site are more consistent?
This article suggests every palette should have 6 colors and 9 shades for each
color, which doesn't really narrow things down...

------
ffritz
Awesome blog post, providing interesting approaches.

What I always struggle with is not the different shades, but finding suitable
other colors which go along with a given one. Let’s say your company already
has a hex code for a blue. How do you find appropriate greens and reds to go
along with it?

~~~
jungler
Here are some common techniques:

1\. Hue shift your complements towards the primary instead of trying to use
the full range. This mimicks what we experience in different lighting
conditions: under a red light, everything looks red.

2\. Create ramps of saturation within the palette. If you have a dark blue
primary, add a grayish transition and pastels to complement.

3\. Make a larger palette than you need right now and then trim it down. When
making palettes for pixel art(a great way to learn color), there's an
iteration between making color ramps and making test images to spot the
flexibility of the palette. You can do similarly for the site design: you
don't want to have tons of colors, you want colors that can be used in many
different roles.

------
bonoboTP
Also, for palette design it can be a good idea to get a good monitor and have
it calibrated.

------
scns
I use [https://www.colorhexa.com](https://www.colorhexa.com) for colors. It
gives you schemes based on your chosen color, previews, and more. It even has
a color blindness simulator.

------
ryantgtg
For years, I've been using [http://www.0to255.com](http://www.0to255.com) to
come up my scales. For each hex, you're shown a monochromatic scale of 32
colors. I love that site!

------
victor106
This is a great article. Anyone know of any articles that explain how to use a
tool(say Sketch) to pick the different shades of colors that the article
mentions?

------
pictur
[http://colormind.io/bootstrap/](http://colormind.io/bootstrap/)

------
amelius
I fear that this is exactly the kind of advice that makes websites all look
the same.

~~~
tchaffee
And books all look the same. White background with black text. Even print
magazines mostly all look the same. There is only so much variation you can
introduce before the design starts to draw attention away from your content.
Most websites designs should be comforting and ignorable.

