Colour is an interesting topic, which I feel is often overlooked and sometimes under-appreciated. One of the first things I was taught was the power of colour, how it can have an impact on human emotion, and that there should be purpose behind choosing one. I rarely see articles or posts talking about this subject, and because my memory needs refreshing a bit, we decided to write this post to hopefully help others, we hope it comes handy in your next project! Even if it’s just to give reason to why you chose a particular colour to a difficult client 😉

颜色是一个有趣的话题，我觉得它经常被忽视，有时却被低估。 我被教的第一件事是色彩的力量，色彩如何影响人类的情感，选择色彩应该有目的。 我很少看到有关该主题的文章或帖子，并且由于我的记忆需要刷新，我们决定写这篇文章以希望对其他人有所帮助，希望它对您的下一个项目有所帮助！ 即使只是为了说明为什么您为困难的客户选择特定颜色的理由reason

Although we don’t think there’s anything completely wrong with picking a colour based on the reason that… you simply like it. But we think more often than not it’s important to have a reason for using a specific colour, as it can be a powerful choice and have an impact not only on the visual aesthetics but also on evoking particular emotions and even influencing decisions that your customers make. For example Hubspot [1] found an interesting discovery when experimenting with different button colours for conversion rate. They A/B tested both green and red, with an intuition that green would perform better due to its correlations with ‘go’ and movement such as with traffic lights. However to their surprise the red outperformed green by 21%! They surmised that it was probably because it’s more of an urgent, attention seeking and salient colour.

尽管我们认为基于……您只是喜欢它的原因来选择颜色并不存在任何错误。 但是，我们常常认为拥有特定颜色的理由很重要，因为它可能是一个有力的选择，不仅会影响视觉美学，​​而且还会引起特定的情感甚至影响客户做出的决定。 例如，Hubspot [1]在尝试使用不同的按钮颜色转换率时发现了一个有趣的发现。 他们A / B测试了绿色和红色，并凭直觉认为，由于绿色与“行进”和运动(如交通信号灯)的相关性，绿色的性能更好。 但是令他们惊讶的是，红色的表现胜过绿色的21％！ 他们推测这可能是因为它更像是一种紧急的，引人注目的颜色。

辅助功能 (Accessibility)

There are also other behavioural studies to suggest that colours are not all equal, colours can even be influenced by your age and even gender. Joe Hallock’s [2] observations, for example, show that on average in his study that men dislike the colour purple, whilst women feel the opposite, but both dislike the colour brown. This might be useful the next time you design a website or app that’s targeted at a particular gender.

还有其他行为研究表明，颜色并不完全相同，颜色甚至可能受到您的年龄甚至性别的影响。 例如，乔·哈洛克(Joe Hallock)的观察[2]表明，平均而言，在他的研究中，男人不喜欢紫色，而女人则相反，但都不喜欢棕色。 下次您设计针对特定性别的网站或应用程序时，这可能会很有用。

Blue is the safest colour with all age ranges, especially those over 70. This however could be due to the fact that most people are able to see the colour blue clearer than any other colour, even those with colour-vision deficiencies.

蓝色是所有年龄段(尤其是70岁以上)中最安全的颜色。但是，这可能是由于大多数人都能看到蓝色比任何其他颜色都清晰的事实，即使是那些色觉不足的人也是如此。

“Red and green are the colours most affected by colour-vision deficiency. Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others.” [3]

“红色和绿色是受色差影响最大的颜色。 几乎没有人缺乏蓝色。 因此，几乎每个人都可以看到蓝色，或更准确地说，几乎每个人都可以将蓝色区分为与其他颜色不同的颜色。” [3]

Incredibly around 9% of the population [4] do suffer from some sort of colour blindness or deficiency, so it’s always important to put thought to accessibility in your design, especially when designing for an older demographic. A good way of doing this is not only to use safe colours of brown and yellow, but also different design treatments. Such as dotted, dashed or different sized lines and shapes. This can often be seen in road maps, this helps to decipher the map without the need for specific colours.

令人难以置信的是，大约9％的人口[4]确实患有某种色盲或色盲现象，因此在设计中特别考虑到可访问性总是很重要的，特别是在为年龄较大的人群设计时。 做到这一点的一种好方法不仅是使用棕色和黄色的安全色，而且要使用不同的设计处理方法。 例如虚线，虚线或不同大小的线和形状。 这通常可以在路线图中看到，这有助于解密地图，而无需使用特定的颜色。

一两种颜色最好 (One or two colours is best)

When it comes to how colour should be used in design, it’s also important to factor in the amount of colours used. We would always refrain from using too many bold colours. We usually only stick to a few, and tend to use a lot of white space with accents of vibrant colour to attract the eye to that particular element, usually in a way of a call to action. If you do use too many colours, especially if they’re all super bright, you’ll lose hierarchy with everything fighting for the attention. A solid way of making sure this isn’t the case is using an old interior design method of the ‘60/30/10’ rule. This rule isn’t set in stone so feel free to deviate, or break it entirely! But it’s always a good starting point. The idea is that you have a baseline colour, which takes up a 60% ratio, and then a secondary colour which takes up 30% and lastly an accent or touch of colour which takes up 10%. Within these ratios, you can, of course, have shades of the colour within.

在设计中应如何使用颜色时，考虑所用颜色的数量也很重要。 我们将始终避免使用过多的大胆颜色。 我们通常只坚持一些，并倾向于使用大量带有鲜明色彩的白色空间来吸引眼球到特定元素上，这通常是通过采取行动来实现的。 如果您使用了太多的颜色，尤其是所有颜色都非常亮，那么您将失去层次结构，所有事物都在争夺注意力。 确保不是这种情况的一种可靠方法是使用“ 60/30/10”规则的旧室内设计方法。 这个规则不是一成不变的，因此可以随意偏离或完全打破它！ 但这始终是一个很好的起点。 这个想法是，您有一个基准色，占60％的比例，然后是第二色，占30％，最后是强调色或淡淡的颜色，占10％。 在这些比率内，您当然可以在其中包含颜色的阴影。

An interesting example of this is with fortune 500 companies — the largest companies in the world. 82% of all companies only use up to two colours incorporated in their logos!

一个有趣的例子是世界500强公司-世界上最大的公司。 82％的公司仅在徽标中使用最多两种颜色！

“Most of the time companies are using just two colors, going three colors or more in a logo is rarely practiced.” [5]

“大多数时候公司只使用两种颜色，很少在徽标中使用三种颜色或更多。” [5]

Having too many colours is not the only eye-burning design flaw that can be made, another is using too many with high saturation. When there are too many vibrant colours or even too many muted colours there will be a lack of hierarchy and difficulty in differentiating between elements. Contrast is paramount. A quick and efficient way of testing this is simply by making your design black and white or greyscale, this will highlight how much of a contrast there is. If it’s difficult to visually notice the difference between elements and the design is difficult to see, then we’d suggest adding more contrast.

太多的颜色不是唯一可以使人眼前一亮的设计缺陷，另一个是使用太多的高饱和度。 当有太多鲜艳的颜色或什至没有太多柔和的颜色时，将缺少层次结构并且很难区分元素。 对比度至关重要。 一种快速而有效的测试方法就是将您的设计设为黑白或灰度，这将突出显示对比度的高低。 如果很难从视觉上注意到元素之间的差异并且很难看到设计，则建议增加更多的对比度。

色彩心理学 (Colour psychology)

Colour can be powerful, it can have an impact not only on the visual aesthetics and accessibility but also on evoking particular emotions and feelings. This is why it’s important to choose a colour that reflects your brand, if there’s no correlation the message that’s being portrayed may feel inconsistent or even evoke negative connotations. For example, having a meditation company’s brand colour in a vibrant Ferrari red might feel a little off.

颜色可能很强大，不仅会影响视觉美学和可访问性，而且还会激发特定的情感和感觉。 这就是为什么选择一种能反映您的品牌的颜色很重要的原因，如果没有相关性，那么所描绘的信息可能会导致不一致或什至引起负面含义。 例如，将冥想公司的品牌颜色涂成充满活力的法拉利红色，可能会感觉有些不舒服。

“The restaurant and hospitality industry has studied this a lot. For example, in the U.S orange makes people agitated, so they won’t stay long (useful in fast food restaurants). Browns and blues are soothing, so people will stay (useful in bars).” [4]

“餐饮业已经对此进行了大量研究。 例如，在美国，橘子会让人们感到不安，因此他们不会待久(在快餐店有用)。 棕色和蓝色令人舒缓，因此人们会留下来(在酒吧中很有用)。” [4]

However, this is a bit of a tricky topic as colours do affect people differently, especially in different cultures. There are some colours that are more objective, such as gold and green which are universally understood due to nature. However there are others that are more objective, for example, white in the UK signifies peacefulness and purity, and is often used in weddings. Whereas other cultures see it as a colour synonymous with death.

但是，这是一个棘手的话题，因为颜色确实会以不同的方式影响人们，尤其是在不同的文化中。 有一些更客观的颜色，例如金色和绿色，由于自然而被普遍理解。 但是，还有其他一些更为客观的东西，例如，英国的白色代表和平与纯正，通常用于婚礼中。 而其他文化则将其视为死亡的代名词。

Also on an individual level there could have been a particular experience such as something traumatic that has impacted on how a person views a particular colour. However, as a whole and particularly in Western Culture the colours below evoke these certain emotions:

同样在个人层面上，可能会有特殊的经历，例如某些创伤，影响了人们如何看待特定的颜色。 但是，总体上，尤其是在西方文化中，以下颜色唤起了这些特定的情感：

结论 (To Conclude)

It’s clear to see that colour can have a profound impact, not only bringing a brand, product or design to life but also in a way to evoke certain feelings and potentially to even be used as a behavioural tool. As always we think it’s imperative to test colours before making any assumptions, even if you think it’s obvious, as your user demographic could have a different perception. If you really haven’t got the means to test, then use this post or any in the ‘useful resources’ section below, and further reading on the topic, will get you majority of the way there.

显而易见，色彩可以产生深远的影响，不仅可以使品牌，产品或设计栩栩如生，而且可以唤起某种感觉，甚至有可能被用作行为工具。 一如既往，我们认为在做出任何假设之前必须测试颜色，即使您认为这很明显，因为您的用户群体可能会有不同的看法。 如果您真的没有能力进行测试，请使用本文或下面“有用的资源”部分中的任何内容，并进一步阅读该主题，您将获得大部分的了解。

We hope you found this post interesting and helpful, and that you may now have a second thought to choosing a particular colour for your next design! 🎨

我们希望您发现这篇文章有趣且有用，希望您现在可以再考虑为下一个设计选择特定的颜色！ 🎨

有用的资源 (Useful resources)

颜色可及性： (Colour accessibility:)

http://www.vischeck.com/

http://www.vischeck.com/

http://colorfilter.wickline.org/

http://colorfilter.wickline.org/

配色工具： (Colour combination tools:)

https://coolors.co/

https://coolors.co/

https://color.adobe.com/create/color-wheel

https://color.adobe.com/create/color-wheel

https://material.io/resources/color/

https://material.io/resources/color/

色彩心理学： (Colour psychology:)

https://www.colorpsychology.org/

https://www.colorpsychology.org/

https://www.empower-yourself-with-color-psychology.com/meaning-of-colors.html

https://www.empower-yourself-with-color-psychology.com/含义-of-colors.html

颜色文化差异： (Colours cultural differences:)

https://www.informationisbeautiful.net/visualizations/colours-in-cultures/

https://www.informationisbeautiful.net/visualizations/colours-in-cultures/

概括地说颜色(音频) (Colours in a nutshell (audio))

https://soundcloud.com/the-science-of-social-media/why-facebook-is-blue-the-science-of-colors-in-marketing-and-social-media

https://soundcloud.com/the-science-of-social-media/why-facebook-is-blue-the-science-of-colors-in-marketing-and-social-media

[1] https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx

[1] https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-ab-test-red-beats-green.aspx

[2] http://www.joehallock.com/edu/COM498/preferences.html

[2] http://www.joehallock.com/edu/COM498/preferences.html

[3] https://joeclark.org/book/sashay/serialization/Chapter09.html

[3] https://joeclark.org/book/sashay/serialization/Chapter09.html

[4] Weinschenk, S., 2011. 100 Things Every Designer Needs To Know About People. New Riders, pp.23, 28.

[4] Weinschenk，S.，2011年。 每位设计师都必须了解的人的100件事 。 《新骑士》，第23、28页。

[5] https://www.epcgroup.net/fortune-500-logo-analysis/

[5] https://www.epcgroup.net/fortune-500-logo-analysis/

As always we would love to hear your thoughts, do let us know in the comments below if you have any questions or want to know more!

一如既往，我们很乐意听到您的想法，如果您有任何疑问或想了解更多信息，请在下面的评论中告诉我们！

Would you like to work with us? We are a friendly bunch, come and say hello to fello 👋

您想和我们一起工作吗？ 我们是一群友好的人，来跟家伙打个招呼👋

Much ❤️ 🧡 💛 💚

❤️🧡💛