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 ?? 🧡 💛 💚

??🧡💛