Pablo Picasso once said: “Why do two colors sing next to each other? Can you really explain that? No. Like you can never learn to paint.”
Ladies and gentlemen, Picasso was wrong.
You can actually find out why “two colors stand next to each other and sing”. Or more specifically, you can find out why some color combinations work (i.e., look good) and why other color combinations don’t (i.e., look terrible).
I realize that Picasso probably meant “you can never learn how to paint” in a less literal, more philosophical way. As in, you can’t teach anyone to have a sense of style or develop artistic sensitivity. that there is an innate, incomprehensible quality that some people have and some don’t.
According to Picasso’s quote, it seems like a talent you were born with rather than something you can learn to determine which colors look good next to each other.
Again, I would not agree.
From a scientific point of view, it is certainly plausible that some people are genetically predisposed to be good at art and design. But I would argue that the “10,000 hour theory” makes this term irrelevant. For those unfamiliar with the 10,000 hour theory, it is said that anyone can become a master of a certain skill provided they practice that skill for approximately 10,000 hours during their lifetime.
While Picasso was born with a certain disposition to paint well, the main reason he was so good is quite simple: He painted a lot. And if you practice a lot, you’ll be better able to choose the right color palettes too.
Practice makes a perfect palette
After thoroughly ripping out a quote from one of the most famous artists in history, let’s practice!
In the remainder of this article, I’ll walk you through seven examples of color palettes on the web. In each example, we see if you can guess which company or brand the color palette is from. Then we’ll dive into the color theory behind what makes a particular color palette work (or not, if it does).
Note: Make sure to scroll down slowly and nicely so you can guess before you reveal the answer!
Example 1: Understanding Different Color Models
Okay, let’s go: which website did the color scheme below come from?
Scroll down to see if you are right!
Of course, this color palette in blue, green, yellow and red belongs to none other than the great Google.
Even without prior training in color theory, there are some basic lessons we can take from this palette on how different color models work.
For starters, you may have noticed that red, blue, and yellow are primary colors in the Google palette – colors that you can mix and match to make up all of the other colors. To create green – the only secondary color in Google’s color palette – all you have to do is mix blue and yellow together.
Now, if we were to mix blue and yellow paint, this idea of ”mixing” would apply. However, this is because the world of painting (and printing) follows the CMYK color model (cyan (blue), magenta (reddish), yellow and key (black)). Essentially, this color model consists of the three primary colors plus black, with the latter used to create darker color versions.
This is where things can get a bit confusing: CMYK is a subtractive color model, which means that colors are created by absorbing or subtracting certain wavelengths of visible light. The wavelengths of light that are not absorbed are reflected, and the reflected light ultimately has the color that we see.
So, using this model, one could argue that a green object is not really green at all: it is simply an object that reflects the wavelength for green and absorbs the wavelengths for all other colors.
Until now with me? Great! Since the colors you saw in the example above were not created using the CMYK color model, they were created using the RGB (red, green, blue) color model used by computers, televisions, and other electronic devices. In contrast to CMYK, RGB is an additive model. Red, green, and blue light waves are added in certain combinations to create colors.
While the green in the Google color palette is a secondary color in the CMYK system, it is actually a primary color in the RGB system. Overall, Google’s color scheme feels very primary. or simply. Like preschool or kindergarten. (I always think of those wooden blocks with the letters painted on them when I see the colors from Google.)
Okay, that’s enough with the CMKY / RGB stuff – it just serves to give you a point of reference for later in the post. Let’s move on to the next example.
Example 2: hue, hue, hue, tone and saturation
Which corporate website does the color palette below belong to?
Scroll down to see if you are right!.
Twitter’s color palette gives us a great example of a monochromatic color scheme. Instead of looking at gray, dark blue, and light blue as separate colors in the Twitter palette, consider them as different flavors of the same color. Or more precisely, different flavors of the same shade.
Let’s go through a few terms really quickly, and this will all make a lot more sense:
Hue: What we usually mean when we talk about color. The hue is the superordinate, demanding quality of a color (e.g. “red” or “blue”).
Shadow: What you get when you add black to a certain shade (e.g. dark blue is a shade of blue).
Hue: What you get when you add white to a specific shade (e.g. light blue is a shade of blue).
Volume: What you get when you choose both black and white a certain shade – a.k.a. Gray – add (e.g. pastel blue is a shade of blue).
Saturation: While “tone” is a popular painting term, if you add gray to the color, you’re more likely to come across the term “saturation” in the world of graphic design. In particular, the saturation defines a color range that begins with gray (0% saturation) and ends with a pure, gray-free form of the color (100% saturation). Desaturated colors are softer and possibly duller compared to their highly saturated counterparts, which are more vivid.
Back to Twitter: Let’s use the blue of the logo, the lighter blue, as a reference point. This is our shade. This is “Twitter blue”. The darker blue is just a hue of that Twitter blue, but has a higher saturation which makes it a bit more vibrant and eye-catching (which makes a lot of sense considering that Twitter is using this blue to draw attention to their primary CTA steer: “Tweet”).
The gray used for the symbols is also a shade of the Twitter blue, but has a significantly lower saturation (approx. 20%).
All said and done, we can describe Twitter’s color scheme as monochromatic. The colors all look good next to each other as they all have the same base color: it’s just the levels of shade, tint, and saturation that make them different.
This is in stark contrast to Google’s polychromatic color scheme, which has four different hues and no base color holds them all together. Why do Google’s colors still seem to mesh and look good side by side? One main reason is that they all have similar levels of saturation.
Example 3: determining a color scheme
Well, move on to our next example. Whose website did this color palette come from?
Scroll down to see if you are right!
This one was a little trickier. While most of us are familiar with UPS’s famous (and trademarked) brown, at first glance that blue seems to be coming from the left panel. Whether or not you like this blue color, there is a clear reason UPS chose it: it compliments the brown color.
In the world of color theory, complementary colors are color pairs that are directly opposite each other in the color wheel. When you place complementary colors next to each other in a design, they create a high level of contrast (i.e. both colors really stand out) and the result is usually pretty harmonious.
Now there’s one more piece of this complementary UPS color puzzle: where the hell do you find brown on the color wheel?
The answer: brown is actually just a shade – or a darker version – of reddish-orange. So to find the complement of brown, you first need to find red-orange on the color wheel. And when you do that, you’ll see blue appear right across the street.
Complementary colors are of course not the only color combination that can make for an appealing palette. There are also …
- Analog colorsThese are colors that appear next to each other on the color wheel.
- Triad colorsThese are three colors evenly spaced around the color wheel.
- Split complementary colorsthat consist of a basic color plus the two colors that are next to the complement of the basic color in the color wheel.
Here is a little diagram to help you understand these better:
To be honest, there are several other types of color combinations based on the color wheel – these are just the most basic. (If you’re looking for a deeper dive, check out the Tiger Color website.)
The most important point here is that the observable properties of colors (e.g. hue, hue, hue, etc.) are not the only factors that affect how colors interact. Knowing how different colors align on the color wheel can help you make more harmonious color choices.
Example 4: color and branding
Which company Website does the color palette below come from?
Scroll down to see if you are right!
While UPS added a new color (blue) to its signature brown and yellow color palette when designing its website, rival FedEx did the opposite: FedEx removed the orange we normally see on their trucks and doubled the purple instead.
As a result, the UPS and FedEx website color palettes couldn’t be more different. While UPS has this whole earthy atmosphere and uses colors that might appear in nature, FedEx has more of a “strictly business” feel to it. Their monochromatic scheme uses purple as the only accent color, which also adds to the inorganic corporate feel of this palette, as the color purple is rare in nature (some people even claim purple is an artificial color).
Most important here: remember that the color palette of your website can affect the way you and your business are perceived. Different colors correlate with different emotions. Braun, for example, is often associated with robustness and reliability. Purple is now associated with authority and sophistication.
In the following examples, we’ll explore the relationship between color and psychology a little further.
Example 5: Pairing complementary colors
Which popular News website does the color palette below come from?
Scroll down to see if you are right!
Oh yes, HuffPost green. From a psychological point of view, the color green is associated with balance, harmony, and calmness (which undoubtedly makes it a great choice for a news website).
However, HuffPost’s green is particularly dark and desaturated – like a pine green – which means it’s also associated with wealth and ambition.
How about this red? Red is the most emotionally charged color associated with passion, love and hate and all that good stuff. So when we look at the HuffPost home page, it is not surprising that our eyes are immediately drawn to these two red labels: the label “Watch Live” on the left and the label “HuffPost Live” on the right.
Another reason the red is really popping in this situation? It’s complementary to the green.
Interestingly, it’s a general rule in design that you should avoid pairing red with green, despite their complementary relationship on the color wheel. For starters, this is because seeing red next to green creates a Christmassy feel that most designers try to avoid. Unless they’re designing Christmas things.
Ein zweiter Grund, warum Sie es vermeiden sollten, Rot mit Grün zu kombinieren: Menschen, die an Farbenblindheit leiden – speziell Deuteranopie, die häufigste Form der Farbenblindheit – kann Probleme bei der Unterscheidung zwischen den beiden Farben haben.
Ein dritter Grund: Rot und Grün “konkurrieren” oft miteinander um visuelle Aufmerksamkeit, wenn sie miteinander gepaart werden, was dazu führt, dass beide Farben heller als gewöhnlich erscheinen (siehe links).
Die Designer hinter der Farbpalette von HuffPost waren sich dieser Phänomene durchaus bewusst, weshalb A) sie das Rot im Design sehr sparsam verwenden und B) ein dunkles, entsättigtes Grün wählen, das besser mit dem Rot spielt (siehe rechts).
Beispiel 6: Tiefe Sättigung und Primärfarben
Von welcher beliebten Website stammt die unten stehende Farbpalette?
Scroll down to see if you’re right!
The first few words that come to mind when looking at BuzzFeed’s color palette include “bright,” “vivid,” “in-your-face,” and “stop-what-you’re-doing-right-now-and-read-this-OMG-OMG-OMG!!!”
Clearly, BuzzFeed’s goal with this color palette is to attract our attention. But in terms of color theory, what’s going on here?
For starters, BuzzFeed — like Google — uses primary colors: red, yellow, and blue. But BuzzFeed’s red, yellow, blue are brighter and more deeply saturated, and thus more eye-catching.
Also, if we ignore that black (which isn’t really a color, per se, but is rather what results from the total absence — or total absorption — of visible light waves), we could say that BuzzFeed uses a triadic color scheme, as red, yellow, and blue are spaced out evenly around the color wheel.
In terms of color psychology, red (as I mentioned in the previous example) is the most emotionally charged color around, so it’s not surprising that BuzzFeed employs it in their logo: They want you to feel energized and excited.
Yellow, another prominent color in BuzzFeed’s palette, is associated with both energy and happiness. And speaking of happiness … doesn’t that row of yellow circles with the black text at the top of BuzzFeed’s homepage remind you of a row of smiley faces?
The blue in BuzzFeed’s color palette is reserved exclusively for links and call-to-action buttons, which is a smart move. Blue, you see, is associated with calmness and trustworthiness. So, amidst all the emotional chaos of BuzzFeed’s red and yellow, the blue links feel inviting, as if to say, “Don’t worry, we know it’s crazy here, but you can trust us! Go ahead, give us a click!”
Lesson #7: Desaturated Palettes
Alright, it’s time for our final example: Which popular website does the color palette below come from?
Scroll down to see if you’re right!
If you had trouble figuring out that the above palette was from Facebook, don’t feel bad: I deliberately made it a little tricky by including the red and the yellow.
Truth be told, if you scroll around Facebook, you’ll see that they employ a variety of colors, especially when it comes to sidebar icons. (For our purposes, I focused specifically on the icons near the top of the page in order to extract the yellow and the red.)
Now, this is where my master plan comes together: Take a look at the Facebook color palette, then scroll back up to BuzzFeed’s. Both sites employ yellow, red, and blue in their colors schemes … yet the schemes couldn’t feel more different!
By now, you’re probably able to explain why this is. But let’s run through it together just for funsies.
For starters, Facebook employs a few different shades of its iconic blue (just like Twitter does). It’s an easy way to add some contrast to a design without veering off into an entirely different stylistic direction.
However, the main culprit here is saturation: Facebook’s yellow, red, and blue are all desaturated to a similar degree. And as a result, they all feel calm and relaxed. Whereas seeing BuzzFeed’s color palette feels like taking a shot of espresso, seeing Facebook’s palette feels like getting wrapped up in a cozy blanket.
Of course, the way the two sites employ their colors is very different. With BuzzFeed, blue — a color that instills trust and calmness — only appears on links. With Facebook, there’s a fixed blue bar running right across the top of the site, so those feelings of trust and calmness are ever-present.
All said and done, Facebook’s muted, blue-centric color palette makes us want to kick off our shoes and relax a while. And considering the average American spends about 40 minutes each day checking Facebook, those color choices seems to be working out.
Have some color theory wisdom you’d like to share? Sound off in the comments section below!