Pablo Picasso once said, "Why do two colors, put one next to the other, sing? Can one really explain this? No. Just as one can never learn how to paint."
Ladies and gentlemen, Picasso was wrong.
你实际上能够figure out why “two colors, put one next to the other, sing.”
10,000小时理论, it states that anyone can become a master of a particular skill provided that they practice that skill for, approximately, 10,000 hours during their lifetime.
因此，虽然毕加索可能天生有一定程度的倾向于擅长绘画，但他如此出色的主要原因非常简单：他绘画了很多。而且，如果您经常练习，您也可以更好地选择正确的调色板。
练习使一个完美的调色板
Now that we’ve thoroughly ripped apart a quote from one of history’s most famous artists, 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’ll see if you can guess which company or brand the color palette comes from. Then, we’ll dive into the color theory behind what makes a particular color palette work (or not work, if that happens to be the case).
Note:请务必向下滚动良好和慢，这样您就有机会在透露答案之前猜测！
示例＃1：了解不同的颜色模型
Alright, here we go: Which website does the color scheme below come from?
向下滚动以查看您是否正确！
。
。
。
。
。
当然,蓝色,绿色,黄色,红色palette belongs to none other than the great Google.
甚至没有任何以前的教育color theory, there are some basic lessons we can take away from this palette on how different color models work.
For starters, you may have noticed that the red, blue, and yellow in Google's palette are primary colors -- colors you can mix together to form all of the other colors. So, to create green -- the only secondary color in Google’s color palette -- one simply needs to mix blue and yellow together.
Now, if we were mixing blue and yellow paint, that idea of "mixing" would hold true. But that’s because the world of painting (and printing) adheres to the CMYK — cyan (blue-ish), magenta (reddish), yellow, and key (black) — color model. Essentially, this color model is comprised of the three primary colors plus black, the latter of which is used for creating darker versions of colors.
Here’s where things can get a little confusing: CMYK is a subtractive color model, which means colors are created through absorbing, or subtracting, particular wavelengths of visible light. The wavelengths of light that don’t get absorbed are reflected, and that reflected light ends up being the color we see.
So, using this model, you could argue that a green object isn’t really green at all: it’s simply an object that’s reflecting the wavelength for green and absorbing the wavelengths for all the other colors.
到目前为止和我在一起？伟大的！因为您在上面的示例中看到的颜色不是使用CMYK颜色模型创建的：它们是使用RGB（红色，绿色，蓝色）颜色模型创建的，该模型是计算机，电视和其他电子设备使用的模型。与CMYK不同，RGB是一个加法模型。红色，绿色和蓝色的光波特别组合在一起以产生颜色。
因此，尽管Google的调色板中的绿色是CMYK系统中的辅助颜色，但它实际上是RGB系统中的主要颜色。总体而言，Google的配色方案确实非常重要。或基本。像学前班或幼儿园一样。（当我看到Google的颜色时，我总是想到那些用字母绘制的木块。）
Alright, that’s enough with the CMKY / RGB stuff -- it's just to give you a reference point for later on in the post. Let's move on to the next example.
示例2：色相，阴影，色调，音调和饱和度
What company's website does the color palette below belong to?
向下滚动以查看您是否正确！。
。
。
。
。
Twitter’s color palette provides us with a superb example of a monochromatic color scheme. Instead of thinking of the gray, dark blue, and light blue in Twitter’s palette as separate colors, think of them as different flavors of the same color. Or more accurately, different flavors of the same hue.
让我们快速浏览一些术语，这一切都会变得更加有意义：
Hue:What we usually mean when we talk about color. The hue is the overarching, discerning quality of a color (e.g. “red” or “blue”).
Shade:What you get when you add black to a particular hue (e.g. dark blue is a shade of blue).
Tint:What you get when you add white to a particular hue (e.g. light blue is a tint of blue).
Tone:What you get when you add both black and white — a.k.a. gray — to a particular hue (e.g. pastel blue is a tone of blue).
饱和：While “tone” is a popular painting term, in the world of graphic design you’ll be more likely to encounter the term “saturation” when dealing with adding gray to color. More specifically, saturation defines a range of color starting with gray (0% saturation) and ending with a pure, gray-less form of the color (100% saturation). Desaturated colors are softer, and potentially duller in comparison to their highly saturated counterparts, which are more vivid.
现在，返回Twitter：让我们使用徽标中的蓝色，较轻的蓝色作为我们的参考点。那是我们的色调。那是“ Twitter Blue”。较深的蓝色只是Twitter蓝色的阴影，但它具有更高的饱和度，使其更加生动和引人注目（考虑到Twitter使用该蓝色来吸引其主要CTA的注意力，这很有意义：“ Tweet”）。
The gray used for the icons is also a shade of the Twitter blue, but it has a considerably lower saturation (around 20%).
All said and done, we can describe Twitter’s color scheme as being monochromatic. The colors all look good next to each other because they all have the same root color in them: it’s just the shading, tinting, and saturation levels that make them different.
这与Google的多色配色方案形成鲜明对比，那里有四种不同的色调，没有根色将它们全部结合在一起。那么，为什么Google的颜色似乎仍然可以融合并彼此之间看起来不错？一个关键原因是因为它们都具有类似的高饱和度水平。
Example #3: Determining a Color Scheme
Aright，在我们的下一个示例上。这个调色板来自谁？
向下滚动以查看您是否正确！
。
。
。
。
。
这个有点棘手。尽管我们大多数人都熟悉UPS著名的（和商标）的棕色，但乍一看，蓝色可能似乎从左场出来。但是不管你是否喜欢蓝色的颜色很明显，为什么UPS选择它：它与棕色是互补的。
在色彩理论的世界中，互补的颜色是成对的颜色，它们彼此直接坐在色轮上。当您将互补的颜色在设计中彼此相邻时，它们会产生高度的对比度（即两种颜色真正凸出），结果通常非常和谐。
Now, there's one more piece to this UPS complementary color puzzle: Where the heck do you find brown on the color wheel?
答案：布朗实际上只是红橙色的阴影或更黑暗的版本。因此，要找到布朗的补充，您首先需要在色轮上找到红橙色。当您这样做时，您会看到蓝色出现在它对面。
Of course, complementary colors aren't the only combination of colors that can make for a pleasing palette. There are also ...
- 类似的颜色，它们是在色轮上彼此相邻的颜色。
- Triadic colors，这是三种颜色，在色轮周围均匀间隔。
- Split-complementary colors，由基本颜色和两种颜色组成，这些颜色与基本颜色在色轮上的补充相邻。
这是一个小图，可以帮助您更好地理解这些内容：
Now, truth be told, there are several other types of color combinations that are based on the color wheel -- these are just the most basic. (If you're looking for a deeper dive, check out老虎颜色网站）
The main takeaway here is that the observable qualities of colors (e.g., hue, shade, tint, etc.) aren't the only factors that affect how colors interact. By understanding how different colors are oriented on the color wheel, you'll be able to make more harmonious color choices.
示例＃4：颜色和品牌
哪个公司bob全站app网站下面的调色板是否来自？
向下滚动以查看您是否正确！
。
。
。
。
。
Whereas UPS added a new color (blue) to its typical brown and yellow color palette when designing their website, rival FedEx did the opposite: FedEx removed the orange that we usually see on their trucks and instead doubled down on the purple.
结果，UPS和联邦快递的网站调色板再也没有什么不同。尽管UPS具有整个地球氛围，但使用可能出现在自然界中的颜色，FedEx具有更多的“严格生意”氛围。他们的单色方案使用紫色作为唯一的重音颜色，这也增加了这种调色板的无机企业感觉，因为紫色在自然界中很少发生（有些人甚至声称紫色是人造颜色）。
The takeaway here: Remember that your website'scolor palette can affect how people perceive you and your business。不同的颜色与不同的情绪相关。例如，布朗通常与坚固性和可靠性有关。同时，紫色与权威和精致有关。
在示例中，我们将进一步探讨颜色和心理学之间的关系。
Example #5: Pairing Complementary Colors
哪个受欢迎news website does the color palette below come from?
向下滚动以查看您是否正确！
。
。
。
。
。
啊，是的，Huffpost Green。从心理的角度来看，颜色绿色与平衡，和谐和保证有关（毫无疑问，这是新闻网站的理想选择）。bob官网官方网站
但是，Huffpost的绿色显然是黑暗的，像松绿色一样，这也意味着它也与财富和野心有关。
Now, how about that red? Red is the most emotionally charged color, tied to passion and love and hate and all that good stuff. So, when we look at HuffPost's homepage, it's not surprising that our eyes are immediately drawn to those two red call-outs: the "Watch Live" call-out on the left and the "HuffPost Live" call-out on the right.
红色真正在这种情况下弹出的另一个原因？它是绿色的补充。
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 adjacent to green creates a Christmasy feel that most designers try to avoid. Unless, ya know, they're designing Christmas stuff.
A second reason why you should avoid pairing red with green: People suffering from color blindness -- specificallyDeuteranopia，这是最常见的色盲形式 -能够have trouble distinguishing between the two colors.
第三个原因：红色和绿色经常互相“竞争”，以吸引视觉关注，这会导致两种颜色看起来都比平常更明亮（见左）。
The designers behind HuffPost's color palette were certainly aware of these phenomena, which is why A) they use the red very sparingly in the design, and B) they chose a dark, desaturated green, which plays nicer with the red (see right).
Example #6: Deep Saturation and Primary Colors
哪个受欢迎网站下面的调色板是否来自？
向下滚动以查看您是否正确！
。
。
。
。
。
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 (本身并不是真正的颜色而是从可见光波的总缺席（或总吸收）产生的结果，我们可以说BuzzFeed使用了三合会的配色方案，因为红色，黄色和蓝色在色轮周围均匀地间隔。
在颜色心理学方面，红色（正如我在上一个示例中提到的那样）是周围最具情感的颜色，因此BuzzFeed在其徽标中使用它也就不足为奇了：他们希望您感到精力充沛和兴奋。
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?
BuzzFeed的调色板中的蓝色专门用于链接和召唤按钮，这是一个明智的动作。您知道，蓝色与平静和可信赖有关。因此，在Buzzfeed的红色和黄色的所有情感混乱中，蓝色的链接令人叹为观止，好像在说：“不用担心，我们知道这里很疯狂，但是您可以相信我们！“
第7课：饱和调色板
Alright, it's time for our final example: Which popular网站下面的调色板是否来自？
向下滚动以查看您是否正确！
。
。
。
。
。
如果您在弄清楚上述调色板是来自Facebook的问题，那就不要感到难过：我故意通过包括红色和黄色来使它有些棘手。
说实话，如果您在Facebook上滚动，您会发现它们采用了各种颜色，尤其是在侧边栏图标方面。（出于我们的目的，我专门针对页面顶部附近的图标，以提取黄色和红色。）
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!
到现在为止，您可能可以解释为什么这样做。但是，让我们一起奔跑，只是为了乐趣。
对于初学者来说，Facebook采用了一些不同的标志性蓝色阴影（就像Twitter一样）。这是一种在不转向完全不同的风格方向的情况下，添加与设计形成对比的简便方法。
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.
当然，两个站点采用它们的颜色的方式非常不同。有了BuzzFeed，Blue（一种灌输信任和平静的颜色）仅出现在链接上。借助Facebook，在网站顶部的顶部有一个固定的蓝色酒吧，因此那些信任和平静的感觉永远存在。
总而言之，Facebook柔和，以蓝色为中心的调色板使我们想踢开鞋子并放松一会儿。并考虑the average American spends about 40 minutes each day checking Facebook似乎,这些颜色选择to be working out.
您想分享一些颜色理论的智慧吗？在下面的评论部分中发出声音！
最初于2021年3月26日出版，上午8:00：00，更新于4月2日2021年4月2日
Topics:
Psychology of Color