Deconstructing 7 Famous Brands’ Color Palettes

Posted on Posted in Blog

Pablo Picasso once stated, “Why do 2 colors, put one next to the other, sing? Can one really explain this? No . Being an can never learn how to paint. inch

Ladies and gentlemen, Picasso was wrong.

You actually  can   figure out why “two colors, put 1 next to the other, sing. ” Download 195+ visual marketing design templates to use for social media posts, infographics, and more.  Or, more accurately, you can figure out why a few color combinations function (i. e., seem good) and precisely why other color combos don’t work (i. e., look terrible).  

I actually realize that Picasso possibly meant “one cannot learn how to paint” inside a less literal, more philosophical way. Such as, you can’t teach someone to have a sense of fashion or how to develop artistic sensibilities; there is some innate, incomprehensible trait that some people have and some people don’t.

It would seem, according to Picasso’s quote, that being able to determine what colors look good alongside each other is a talent you’re born along with, and not something you can study.

Again, I might disagree.

From the scientific standpoint, it is certainly plausible that will some people are genetically predisposed to being agreeable at art and design. But I’d argue that the “10, 000 hours theory” makes that thought irrelevant.   For all those unfamiliar with the ten, 000  hours theory, it states that will anyone can become the master of a specific skill provided that they excercise that skill regarding, approximately, 10, 000  hours during their life time.

So , whilst Picasso may have been created with some level of predisposition toward being good from painting, the primary good reason that he was so great is quite simple: this individual painted a lot.   And if you exercise a lot, you can get much better at picking the right color palettes, too.

Practice Makes a Perfect Palette

Now that we’ve completely ripped apart the quote from one of history’s most famous performers, let’s get practicing!

In the rest of this article, I’ll walk you through seven, real-word examples of color palettes on the web.   For each example, we will see if you can speculate which company or brand the color palette comes from. Then, we’ll jump into the color concept behind what makes a particular color palette work (or not work, if that happens to be the case).

Note: Be sure to scroll down nice and gradual so you have a chance to guess before exposing the answer!

Example  #1: Knowing Different Color Models

Alright, right here we go: Which usually website does the color scheme below come from?

color-scheme-example1

Scroll down to see if you’re right!

.

.

.

.

.

google-color-palette

Of course , that blue, green, yellowish, and red color colour scheme belongs to the one and only the great Google.

Even without having any previous education around color theory, there are several basic lessons we are able to take away from this palette on how different color models work.

For starters, you may have realized that the  red, blue, and yellow  within Google’s palette are primary colors — colors you can mix together to form all the other colors. Therefore , to create green — the only secondary colour in Google’s color palette — one just needs to mix azure and yellow collectively.

CMYK_color_model Today, if we were blending blue and yellowish paint, that concept of “mixing” would keep true. But that’s because the world associated with painting (and printing) adheres to the CMYK — cyan (blue-ish),   magenta (reddish), yellow, and essential (black) — colour model. Essentially, this color model will be comprised of the three primary colors plus black, the latter of which is used for creating darker variations of colors.

Here’s where things could get a little confusing: CMYK is a subtractive colour model, which means colours are created through taking in, or subtracting, specific wavelengths of noticeable light. The wavelengths of light that don’t get utilized are reflected, which reflected light ends up being the color we all see.

Therefore , using this model, you could argue that a eco-friendly object isn’t really green at all: it is simply an object that’s reflecting the wavelength for green and absorbing the wavelengths for all the other colors.

rgb_color_model Beside me so far? Great! Because the colors you noticed in the above illustration weren’t created using the CMYK color model: they were created using the RGB (red, eco-friendly, blue) color design, which is the model that computers, tvs, and other electronic devices use.   Unlike CMYK, RGB is an  additive model. Reddish colored, green, and azure light waves are usually added together specifically combinations in order to create colors.

color_blocks

So as the green in Google’s color palette is a supplementary color in the CMYK system, it’s in fact a primary color within the RGB system. And overall, Google’s color scheme does feel very primary; or fundamental. Like preschool or even kindergarten. (I normally think of those wooden blocks with the words painted on them while i see Google’s colours. )

All right, that’s enough with all the CMKY / RGB stuff — it might be just to give you a guide point for later upon in the post.   Let’s move on to another example.

Example  #2: Hue, Tone, Tint, Tone & Saturation

What company’s website does the color palette below belong to?  

color-scheme-example2

Scroll down to see if you’re right! .

.

.

.

.

twitter-color-palette

Twitter’s color scheme provides us having a superb example of a monochromatic color structure. Instead of thinking of the gray, dark azure, and light glowing blue in Twitter’s palette as separate shades, think of them since different flavors of the same color. Or more accurately, different flavors of the same color.

Let’s run  through some terms real quick  plus this  will just about all start to make a much more sense:

Hue: What we usually mean when we talk about colour. The hue is the  overarching, critical quality of a color (e. g. “red” or  “blue”).

Shade: What you obtain when you add dark to a  particular  hue (e. gary the gadget guy. dark blue is a shade of blue).

Shade: That which you get when you add white to a  particular  hue (e. g. light glowing blue is a tint associated with blue).

Tone: What you get if you add both dark and white  — a. k. the.   gray  — to a particular color (e. g. pale blue is a firmness of blue).

Saturation: While  “tone”  is a popular painting phrase, in the world of graphic design you’ll be more very likely to encounter the term  “saturation” when dealing with adding gray to color.   A lot more specifically, saturation identifies a range of color starting with gray (0% saturation) and ending having a pure, gray-less form of the color (100% saturation).   Desaturated colors are softer, and  potentially  duller compared to their highly saturated  counterparts, which are more vibrant.

Now, returning to Twitter: Let’s use the blue from the logo, the lighter blue, as our guide point. That’s our hue. That’s  “Twitter blue. ”  The darker blue is simply a shade of that Twitter blue, yet they have a higher saturation, which makes it a bit more vivid  and eye-catching (which makes a whole lot of sense considering Twitter is definitely that blue in order to draw attention to their  primary  CTA:   “Tweet”).

The particular gray used for the particular icons is also a shade of the Tweets blue, but it offers a  considerably  lower saturation  (around 20%).

All mentioned and done, we can  describe Twitter’s color scheme to be monochromatic. The shades all look good  next to each other simply because they all have the same root color in them: it’s just the shading, tinting, and  saturation levels that make all of them different.

This really is in stark comparison to Google’s polychromatic color scheme, where there are four  specific hues and no main color  binding all of them together. So , why do Google’s colours still seem to mesh and look good alongside each other? A key reason is because they all have got similarly high vividness levels.

Example  #3: Determining a Color Scheme

Aright, on to our own next example. In whose website does this particular color palette come from?

color-scheme-example3

Scroll down to find out if you’re right!

.

.

.

.

.

ups-color-palette

That one was a bit trickier. While most of us are aware of UPS’s famous (and trademarked) brown, that blue  may — at first glance — seem to come out of left field.   But regardless of whether or not you like that blue color, there’s a very clear reason why UPS decided it: It’s supporting to the brown.

In the world of color theory, complementary colors are usually pairs of colors that will sit directly across from each other within the color wheel. Whenever you put complementary colours next to each other in a design, they create a high amount of contrast (i. e., both colors really stick out) and the result is usually quite harmonious.

color-wheel-complementary-colors Now, there’s one more piece to this UPS complementary color  puzzle: Where the heck do you find brown in the color wheel?

The answer: brown is actually just a shade — or darker edition — of reddish-orange. So  to find brown’s complement, you first need to get reddish-orange on the color wheel. And when you need to do that, you’ll see that will blue appears right across from it.

Of course , complementary shades aren’t the only combination of colors  that can lead to a pleasing palette. There are also…

  • Similar colors , that are colors that show up next to each other to the color wheel.
  • Triadic colours , which are three colors that are evenly spaced around the color wheel.
  • Split-complementary colors , which consist of a base color plus the two colors that are adjacent to the base color’s enhance on the color wheel.

Here’s a small diagram to help you realize these better:

split-complementary-analogous-triadic

Today,   truth be told, there are several other types of colour combinations that are based on the color wheel — these are just the simplest. (If you’re looking for the deeper dive, check out  the  Tiger Color website. )

The main takeaway here is that the visible qualities of colors (e. g., hue, shade, tint, etc . ) aren’t the only aspects that affect how colors interact. By understanding how different colors are usually oriented on the colour wheel, you’ll  have the ability to make more harmonious  color choices.

Example  #4: Color  and Branding

Which company’s  internet site does the color palette below come from?

color-scheme-example5

Scroll down to see if you’re right!

.

.

.

.

.

fedex-color-palette

Whereas UPS added a new color (blue) to its normal brown and yellowish color palette when designing their website, rival FedEx do the opposite: FedEx taken out the  orange that individuals usually  see on their trucks  and instead doubled down on the purple.

As a result, UPS’s and FedEx’s website color palettes couldn’t be more different. While UPS offers this whole earth-tone vibe going on, making use of colors that could appear in nature, FedEx has more of a “strictly business” vibe. Their monochromatic scheme uses blue as the sole  accessorize color, which also adds to this palette’s inorganic, corporate really feel, as the color blue rarely occurs within nature (some people even claim that pink is an artificial color).

The takeaway here: Remember that your website’s color palette can affect how people perceive you and your business. Different colors correlate to different feelings. Brown, for example , is commonly associated with ruggedness and dependability. Purple, in the mean time, is associated with power and  sophistication.

We’ll explore  the relationship between color and psychology a bit more in the examples to follow.

Example  #5: Pairing Complementary Colours

Which usually popular   news internet site does the color colour scheme below come from?

color-scheme-example6

Scroll down to see if you’re right!

.

.

.

.

.

huffpo-color-palette

My oh my yes, HuffPost eco-friendly. From a psychological perspective, the color green will be associated with balance, tranquility, and reassurance (making it a good choice to get a news website, simply no doubt).  

However , HuffPost’s green is notably dark and desaturated — like a pine eco-friendly — which  means it’s also associated with prosperity and ambition.

Now, how about that will red? Red is among the most emotionally charged colour, tied to passion and love and hate and all that good stuff. So , when we look at HuffPost’s homepage, difficult surprising that our eyes are immediately drawn to those two reddish call-outs: the “Watch Live” call-out for the left and the “HuffPost Live” call-out in the right.  

Another reason why the red really pops in this situation? It’s complementary to the eco-friendly.

Interestingly, from the general rule in design that you should avoid pairing red along with green, despite their particular complementary relationship to the color wheel. For starters, this is because seeing reddish adjacent to green produces a Christmasy feel that many designers try to avoid. Except if, ya know, could possibly be designing Christmas stuff.

red-and-green-bad A second reason why you should prevent pairing red along with green: People suffering from color blindness — specifically  deuteranopia, which is the most common kind of color blindness  —   can have trouble distinguishing between the two colors.

A third reason: Red and green often “compete” with each other with regard to visual attention whenever they’re paired with each other,   which leads to both colors appearing brighter than usual (see left).

red-and-green-huffpost The developers behind HuffPost’s color scheme were certainly conscious of these phenomena, which is why A) they use the particular red very moderately in the design, plus B) they chose a dark, desaturated eco-friendly, which plays nicer with the red (see right).  

Example  #6: Serious Saturation and Principal Colors

Which popular  site does the color colour scheme below come from?

color-scheme-example4

Scroll down to see if you’re correct!

.

.

.

.

.

buzzfeed-color-palette

The first few words  which come to mind when looking at BuzzFeed’s color palette consist of “bright, ” “vivid, ” “in-your-face, ” and “stop-what-you’re-doing-right-now-and-read-this-OMG-OMG-OMG!!! inch

Clearly, BuzzFeed’s goal with this colour palette  is to bring in our attention.   But in terms of color theory, what’s happening here?

First of all, BuzzFeed — such as Google — uses primary colors: red, yellow, and glowing blue. But BuzzFeed’s red-colored, yellow, blue are brighter and more seriously saturated, and thus more  eye-catching.

Furthermore, if we ignore that will black (which isn’t really a color, per se, but is rather what  results from the total lack — or complete absorption — associated with visible light waves), we could say that BuzzFeed uses a triadic color scheme, as red-colored, yellow, and azure are spaced out there evenly around the color wheel.

In terms of color psychology,   red (as I mentioned in the earlier example) is the most psychologically charged color about, so it’s not surprising  that BuzzFeed utilizes it in their logo: They want you to feel  energized and excited.

smiley-faces Yellow, one more prominent color in BuzzFeed’s palette, is usually associated with both power and happiness. And speaking of happiness … won’t that row of yellow circles with all the black text on top of BuzzFeed’s homepage  help remind you of a row of smiley encounters?

The blue within BuzzFeed’s color palette can be reserved exclusively pertaining to links and call-to-action buttons, which is a sensible move. Blue, the truth is, is associated with calmness and trustworthiness. So , amidst  all the psychological chaos of BuzzFeed’s red and yellow-colored, the blue links feel inviting, as though to say, “Don’t be concerned, we know it’s crazy here, but you can believe in us! Go ahead, give us a click on! ”  

Lesson  #7: Desaturated Palettes

Alright, really time for our final example: Which popular   website does the colour palette below originate from?

color-scheme-example7

Scroll down to see if you’re right!

.

.

.

.

.

facebook-color-palette

If you had trouble figuring out which the above palette has been from Facebook, avoid feel bad: I deliberately made it just a little tricky by including the red and the yellowish.

Truth be told, in case you scroll around Fb, you’ll see that they employ a variety of colors, particularly when it comes to sidebar icons. (For our purposes, I focused particularly on the icons close to the top of the page to be able to extract the yellow-colored and the red. )

Now, this is where my master plan comes together: Take a look at the  Facebook color palette, after that scroll back up in order to BuzzFeed’s. Both websites employ  yellow, reddish colored, and blue in their colors schemes… the schemes couldn’t feel more different!

By now, you’re most likely able to explain the reason why this is. But let’s take a run through it collectively just for funsies.

For starters, Facebook utilizes a few different colors of its iconic glowing blue (just like Tweets does). It’s a simple way to add some contrast to a design with out veering off into an entirely different stylistic direction.

Nevertheless , the main culprit the following is saturation: Facebook’s yellowish, red, and glowing blue are all  desaturated to a similar education. And as a result, they all really feel calm and comfortable. Whereas seeing BuzzFeed’s color palette feels like taking a shot of  coffee, seeing Facebook’s colour scheme feels like getting covered up in a  cozy blanket.

Of  course, the way the two sites utilize their colors is extremely different. With BuzzFeed, blue — a color that generates trust and peace — only appears on links. Along with Facebook,   there might be a  fixed  glowing blue bar running right across the top of the web site, so those feelings of trust plus calmness are ever-present.

All said and done,   Facebook’s muted, blue-centric color palette makes us want to kick off the shoes and relax  a while. And thinking about the average American usually spends about 40 a few minutes each day checking Facebook, those color choices seems to be working out.

Have some color theory wisdom you’d like to share? Sound away in the comments area below!

download 195+ free design templates

New Call-to-action

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *