10 ms·

Building your color palette

705 points by tnorthcutt 8y ago

weinzierl 8y ago
> 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.
- sandworm101 8y ago
  Google how the human eye works. The rods and cones. Colour and harmony between colours is rooted in our biology. Your iphone screen looks very unnatural, unattractive, to a dog or a goose. They see very different colours than we. Our affinity to bright red is tied to how we used it to identify ripe fruit. Notifications, things they want you to click/grab/poke work best in red. You dont see many brown buttons on websites. We dont like touching brown the way we do red.
- yread 8y ago
  That might be true but this article basically says you have to rely on your eyes. You might as well get the designer to do everything. We programmers should also publish articles like this: dont even bother with Excel formulas you need a programmer
  - weinzierl 8y ago
    I didn't want to criticize. My argument was meant to support the thesis that the palette generators are useless. They are not only useless from the designers point of view stated in the article but also from a scientific view. > You might as well get the designer to do everything. We programmers should also publish articles like this: dont even bother with Excel formulas you need a programmer I couldn't agree more.
- davidivadavid 8y ago
  Whether you see it as having science behind it or not really depends on what problem you're considering. There are some interesting in-depth articles about how people build those palettes and ramps that you might find interesting: https://uxplanet.org/designing-systematic-colors-b5d2605b15c https://uxplanet.org/designing-systematic-colors-b5d2605b15c https://design.lyft.com/re-approaching-color-9e604ba22c88 https://design.lyft.com/re-approaching-color-9e604ba22c88
  - weinzierl 8y ago
    Thanks for the links, I skimmed the articles, they are very interesting and I will certainly read them later. They are not what I'm looking for, however. What I'm looking for are empiric, preferably cross-cultural, studies on color harmony. I'm interested in work similar to what has been done for Unique Hues and Focal Colors but for combinations of two or more colors and for the notion whether people find these combinations pleasing, neutral or displeasing. I wouldn't be surprised too much if we couldn't find universal pleasing combinations but I'm surprised that apparently no one has done these type of studies.
    - chazzyluc 8y ago
      May not be exactly what you want but you could look into the World Color Survey: http://www1.icsi.berkeley.edu/wcs/ http://www1.icsi.berkeley.edu/wcs/ https://youtu.be/gMqZR3pqMjg https://youtu.be/gMqZR3pqMjg
- guitarbill 8y ago
  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 Lab*, 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 8y ago
    > 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
- rriepe 8y ago
  I've made one so maybe I can help (http://strapless.io/ http://strapless.io/) It's only really scientific insofar as it's based on a model. We basically make a big cube with R,G,B on its sides instead of X,Y,Z. Different approaches will then "smush" that cube to try to better match how humans perceive colors. Those different smushes will usually have some scientific thinking behind them (mine is based on... historical justifications, good post here btw). Then we move around the cube to find colors. When I get a color, I try to match the luma too. Luma is itself a weird value, which tries to work through the relative perceptual brightness differences in colors. The relative perceptual brightness difference is, as far as I can tell, the thing that really makes a color look "wrong" in a color scheme. I didn't solve that with problem with Strapless, but instead relied on whomever figured out luma. I think if you looked into how luma works you'd find the current best scientific model for whether two colors "fit" together. I'd agree that color-generating isn't a science (definitely more of an art) but any good approach will have a bunch of underlying science and math.
- jacobolus 8y ago
  > Just recently I wondered if there is any scientific basis behind these approaches. No, not really. It’s mostly 17th–19th century pseudoscience, propagated by generations of uncritical art teachers. (Note: not all art teachers; some are amazing.) Complementary colors (which mix to neutral when you e.g. paint two sides of a top with them and spin it) are a thing though.
- pfranz 8y ago
  Most of those generators are showing you sets of colors that all compliment each other. When you're designing an interface you have different priorities, you need a more of a fill and accent colors, as well as other colors that give contextual clues (like confirmations or warnings). I think both concepts are useful, but this article is a way better approach.
zachkatz 8y ago
I actually really love that first example. Wish more sites looked like that.
- porphyrogene 8y ago
  For people with blue-yellow color blindness that page is a nightmare.
  - thoughtexplorer 8y ago
    If it makes you feel any better, it's also a nightmare when you can see blue-yellow.
- usaphp 8y ago
  You will love it for the first 30 minutes, after that it will become annoying and heavy on your eyes
- jnurmine 8y ago
  Why the yellow background though? It'd look nicer with the light cyan background. Save the yellow and red for some kind of attention colors. Even with the "right colors" one can go wrong if the colors are not used in a smart way: green over red or blue over yellow is seldom good for something people are expected to look at longer times. (Yes, I fully understand the first example was a "don't do this", but it was not the best it could be with those colors)
renke1 8y ago
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 8y ago
  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.
OJFord 8y ago
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'.
pg_bot 8y ago
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.
- epse 8y ago
  The point of a palette is that if your blue is your accent colour, the grey will already be a bit blueish and work great with it
- jacobolus 8y ago
  > 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) Unfortunately, the “math” of color models like HSL is only very loosely related to the science of human color perception. It was a model developed by computer graphics researchers of the 1970s who were not very knowledgeable about 20th century color science and dealing with very limited hardware capabilities compared to today, roughly based on outdated ideas from the 17th–19th century... and frankly not very well designed even within those constraints. As a result, leaning too heavily on HSL (especially for novices) typically leads to garbage results. An experienced artist picking colors visually will do much better than someone largely relying on HSL numbers. If you want to pick colors based on numbers, look up the Munsell color system (a big lookup table from the early 20th century; the “modern” version was developed by the leading American color scientists of the 1940s), CIELAB (from the 1970s, an inferior but based-on-a-simple-formula Munsell clone), or CIECAM or IPT models (more recent and more complicated formulas).
tbarkow 8y ago
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.
- stevenpetryk 8y ago
  Steve Schoger does a great job of designing with accessibility in mind! The future book that this chapter will be rolled into contains a whole discussion on it. If you check out the Refactoring UI screencasts, he uses an app (called Contrast, if you're curious) to make sure things meet AA minimum requirements.
- chiefalchemist 8y ago
  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 8y ago
    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/
the_bear 8y ago
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 8y ago
  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 8y ago
    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 8y ago
      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 8y ago
        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.
ffritz 8y ago
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?
- wool_gather 8y ago
  This is where the triads and tetrads that the article dismissed come in. But a good rule of thumb is to pay attention to saturation and brightness more than hue; they have a larger role in the harmoniousness of a pair of colors.
- jungler 8y ago
  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.
noir_lord 8y ago
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 8y ago
  Those colour names in the Atlassian palette are hilarious.
  - noir_lord 8y ago
    Every design needs more cowbell.
victor106 8y ago
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?
carapace 8y ago
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.
MattHeard 8y ago
No mention of color blindness or a11y, which seem like important factors in color selection.
- PavlovsCat 8y ago
  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?
justinpombrio 8y ago
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-in-cielab.png https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i... If RGB space corresponded to what our eyes saw, that would be a hexagon.
dlbucci 8y ago
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...
citrus1330 8y ago
I think it's assumed you would still use grays and whites if you use one of those palette generators.
nostrademons 8y ago
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 8y ago
  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.
chiefalchemist 8y ago
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?
rriepe 8y ago
Strapless, a color library I built, automates a lot of this if you use LessCSS: http://strapless.io/ http://strapless.io/
- watersb 8y ago
  Just tried it. Impressive. Thanks!
chevas 8y ago
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."
rudedogg 8y ago
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.
amelius 8y ago
I fear that this is exactly the kind of advice that makes websites all look the same.
- tchaffee 8y ago
  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.
bonoboTP 8y ago
Also, for palette design it can be a good idea to get a good monitor and have it calibrated.
sureaboutthis 8y ago
> 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 8y ago
  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
userbinator 8y ago
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.
ryantgtg 8y ago
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!
steve_taylor 8y ago
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/40f54b400785258b80d4792a1b540501 https://gist.github.com/steve-taylor/40f54b400785258b80d4792...
- tombrossman 8y ago
  Tested and working well with the latest Firefox (v63). Nice work, this is handy!
PavlovsCat 8y ago
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.
pictur 8y ago
http://colormind.io/bootstrap/ http://colormind.io/bootstrap/
scns 8y ago
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.

705 points by tnorthcutt 8y ago

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

sandworm101 8y ago
Google how the human eye works. The rods and cones. Colour and harmony between colours is rooted in our biology. Your iphone screen looks very unnatural, unattractive, to a dog or a goose. They see very different colours than we. Our affinity to bright red is tied to how we used it to identify ripe fruit. Notifications, things they want you to click/grab/poke work best in red. You dont see many brown buttons on websites. We dont like touching brown the way we do red.
yread 8y ago
That might be true but this article basically says you have to rely on your eyes. You might as well get the designer to do everything. We programmers should also publish articles like this: dont even bother with Excel formulas you need a programmer
- weinzierl 8y ago
  I didn't want to criticize. My argument was meant to support the thesis that the palette generators are useless. They are not only useless from the designers point of view stated in the article but also from a scientific view. > You might as well get the designer to do everything. We programmers should also publish articles like this: dont even bother with Excel formulas you need a programmer I couldn't agree more.
davidivadavid 8y ago
Whether you see it as having science behind it or not really depends on what problem you're considering. There are some interesting in-depth articles about how people build those palettes and ramps that you might find interesting: https://uxplanet.org/designing-systematic-colors-b5d2605b15c https://uxplanet.org/designing-systematic-colors-b5d2605b15c https://design.lyft.com/re-approaching-color-9e604ba22c88 https://design.lyft.com/re-approaching-color-9e604ba22c88
- weinzierl 8y ago
  Thanks for the links, I skimmed the articles, they are very interesting and I will certainly read them later. They are not what I'm looking for, however. What I'm looking for are empiric, preferably cross-cultural, studies on color harmony. I'm interested in work similar to what has been done for Unique Hues and Focal Colors but for combinations of two or more colors and for the notion whether people find these combinations pleasing, neutral or displeasing. I wouldn't be surprised too much if we couldn't find universal pleasing combinations but I'm surprised that apparently no one has done these type of studies.
  - chazzyluc 8y ago
    May not be exactly what you want but you could look into the World Color Survey: http://www1.icsi.berkeley.edu/wcs/ http://www1.icsi.berkeley.edu/wcs/ https://youtu.be/gMqZR3pqMjg https://youtu.be/gMqZR3pqMjg
guitarbill 8y ago
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 Lab*, 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 8y ago
  > 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
rriepe 8y ago
I've made one so maybe I can help (http://strapless.io/ http://strapless.io/) It's only really scientific insofar as it's based on a model. We basically make a big cube with R,G,B on its sides instead of X,Y,Z. Different approaches will then "smush" that cube to try to better match how humans perceive colors. Those different smushes will usually have some scientific thinking behind them (mine is based on... historical justifications, good post here btw). Then we move around the cube to find colors. When I get a color, I try to match the luma too. Luma is itself a weird value, which tries to work through the relative perceptual brightness differences in colors. The relative perceptual brightness difference is, as far as I can tell, the thing that really makes a color look "wrong" in a color scheme. I didn't solve that with problem with Strapless, but instead relied on whomever figured out luma. I think if you looked into how luma works you'd find the current best scientific model for whether two colors "fit" together. I'd agree that color-generating isn't a science (definitely more of an art) but any good approach will have a bunch of underlying science and math.
jacobolus 8y ago
> Just recently I wondered if there is any scientific basis behind these approaches. No, not really. It’s mostly 17th–19th century pseudoscience, propagated by generations of uncritical art teachers. (Note: not all art teachers; some are amazing.) Complementary colors (which mix to neutral when you e.g. paint two sides of a top with them and spin it) are a thing though.
pfranz 8y ago
Most of those generators are showing you sets of colors that all compliment each other. When you're designing an interface you have different priorities, you need a more of a fill and accent colors, as well as other colors that give contextual clues (like confirmations or warnings). I think both concepts are useful, but this article is a way better approach.

zachkatz 8y ago

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

porphyrogene 8y ago
For people with blue-yellow color blindness that page is a nightmare.
- thoughtexplorer 8y ago
  If it makes you feel any better, it's also a nightmare when you can see blue-yellow.
usaphp 8y ago
You will love it for the first 30 minutes, after that it will become annoying and heavy on your eyes
jnurmine 8y ago
Why the yellow background though? It'd look nicer with the light cyan background. Save the yellow and red for some kind of attention colors. Even with the "right colors" one can go wrong if the colors are not used in a smart way: green over red or blue over yellow is seldom good for something people are expected to look at longer times. (Yes, I fully understand the first example was a "don't do this", but it was not the best it could be with those colors)

renke1 8y ago

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 8y ago
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.

OJFord 8y ago

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

pg_bot 8y ago

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.

epse 8y ago
The point of a palette is that if your blue is your accent colour, the grey will already be a bit blueish and work great with it
jacobolus 8y ago
> 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) Unfortunately, the “math” of color models like HSL is only very loosely related to the science of human color perception. It was a model developed by computer graphics researchers of the 1970s who were not very knowledgeable about 20th century color science and dealing with very limited hardware capabilities compared to today, roughly based on outdated ideas from the 17th–19th century... and frankly not very well designed even within those constraints. As a result, leaning too heavily on HSL (especially for novices) typically leads to garbage results. An experienced artist picking colors visually will do much better than someone largely relying on HSL numbers. If you want to pick colors based on numbers, look up the Munsell color system (a big lookup table from the early 20th century; the “modern” version was developed by the leading American color scientists of the 1940s), CIELAB (from the 1970s, an inferior but based-on-a-simple-formula Munsell clone), or CIECAM or IPT models (more recent and more complicated formulas).

tbarkow 8y ago

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.

stevenpetryk 8y ago
Steve Schoger does a great job of designing with accessibility in mind! The future book that this chapter will be rolled into contains a whole discussion on it. If you check out the Refactoring UI screencasts, he uses an app (called Contrast, if you're curious) to make sure things meet AA minimum requirements.
chiefalchemist 8y ago
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 8y ago
  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/

the_bear 8y ago

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 8y ago
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 8y ago
  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 8y ago
    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 8y ago
      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.

ffritz 8y ago

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?

wool_gather 8y ago
This is where the triads and tetrads that the article dismissed come in. But a good rule of thumb is to pay attention to saturation and brightness more than hue; they have a larger role in the harmoniousness of a pair of colors.
jungler 8y ago
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.

noir_lord 8y ago

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 8y ago
Those colour names in the Atlassian palette are hilarious.
- noir_lord 8y ago
  Every design needs more cowbell.

victor106 8y ago

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?

carapace 8y ago

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.

MattHeard 8y ago

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

PavlovsCat 8y ago
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?

justinpombrio 8y ago

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-in-cielab.png https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i... If RGB space corresponded to what our eyes saw, that would be a hexagon.

dlbucci 8y ago

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

citrus1330 8y ago

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

nostrademons 8y ago

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 8y ago
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.

chiefalchemist 8y ago

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?

rriepe 8y ago

Strapless, a color library I built, automates a lot of this if you use LessCSS: http://strapless.io/ http://strapless.io/

watersb 8y ago
Just tried it. Impressive. Thanks!

chevas 8y ago

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

rudedogg 8y ago

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.

amelius 8y ago

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

tchaffee 8y ago
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.

bonoboTP 8y ago

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

sureaboutthis 8y ago

> 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 8y ago
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

userbinator 8y ago

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.

ryantgtg 8y ago

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!

steve_taylor 8y ago

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/40f54b400785258b80d4792a1b540501 https://gist.github.com/steve-taylor/40f54b400785258b80d4792...

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

PavlovsCat 8y ago

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.

pictur 8y ago

http://colormind.io/bootstrap/ http://colormind.io/bootstrap/

scns 8y ago

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.