Colour has a great impact in the world around us and this is no different in User Interfaces (UI). However, it’s not always given the importance it deserves. Sometimes colour is understood as a purely aesthetic element that is completely relative and subjective. Nonetheless, colour plays a key role (on multiple levels) in the user experience of a product, and therefore it is worth our attention as designers.

顏色在我們周圍的世界中具有很大的影響，這在用戶界面(UI)中也不例外。 但是，它并不總是得到應有的重視。 有時，顏色被理解為完全相對和主觀的純粹美學元素。 但是，顏色在產品的用戶體驗中起著多層次的關鍵作用，因此值得我們作為設計師關注。

In this post I’ll show you some tips on how to build a successful palette. I’ll talk through some of the basics around colour, the key roles colour plays when designing a user experience, and give you some pointers on how to apply this knowledge when creating your own colour palette.

在這篇文章中，我將向您展示有關如何構建成功調色板的一些技巧。 我將介紹有關顏色的一些基礎知識，顏色在設計用戶體驗時扮演的關鍵角色，并為您提供一些有關如何在創建自己的調色板時應用這些知識的指導。

術語 (Terminology)

When talking about colours, and more specifically creating a palette for your UI, it’s key that you know the different elements that make up a colour so you can use them to your advantage. Before I give this brief overview, I’d like to point out that when I refer to black and white, I mean ‘pure’ white and black (respectively the hex colour codes #FFFFFF and #000000), rather than a rich black like #010b13, which is a very dark shade of cyan-blue or other off-whites or off-blacks.

在談論顏色時，尤其是為用戶界面創建調色板時，關鍵是要了解構成顏色的不同元素，以便可以利用它們來發揮自己的優勢。 在我進行簡要概述之前，我想指出，當我指的是黑白時，我的意思是“純”的黑白兩色(分別是十六進制顏色代碼#FFFFFF和＃000000)，而不是像＃010b13，它是深藍色的深藍色或其他灰白色或灰黑色。

色調 (Hue)

Hue is the pure state of a colour. A hue is the colour without any black or white added to it. We could say that hue is kind of a more fancy way of saying colour.

色相是一種純粹的顏色狀態。 色調是未添加任何黑色或白色的顏色。 我們可以說色相是一種更有趣的顏色表達方式。

著色 (Tint)

A tint is when white is added to a colour/hue. In Sketch for instance you can create tints by lowering the opacity of said colour (as long as the layer behind your colour/ hue is white)

色調是指將白色添加到顏色/色調中時的色調。 例如，在Sketch中，您可以通過降低顏色的不透明度來創建色彩(只要顏色/色相后面的圖層是白色)

陰影 (Shade)

A shade is when black is added to a colour/hue. In Sketch, the way I do this is to overlay black on top of my colour/hue and reduce the opacity of the black to control the shade (higher opacity of black = darker shade)

陰影是將黑色添加到顏色/色相時。 在Sketch中，我這樣做的方法是將黑色覆蓋在我的顏色/色相上，并降低黑色的不透明度以控制陰影(黑色的較高不透明度=較深的陰影)

音 (Tone)

A tone is a combination of a tint and a shade. A tone is created when grey is added to the colour/hue. When saying grey, we are referring to pure grey, which is an intermediate colour between pure black and pure white. Pure grey is an achromatic color. Meaning a colour “without colour,” as it is composed of black and white (in different proportions depending on the pure grey)

色調是色調和陰影的組合。 將灰色添加到顏色/色調時，將創建一個色調。 說灰色時，我們指的是純灰色，它是純黑色和純白色之間的中間顏色。 純灰色是消色差顏色。 表示“無色”的顏色，因為它是由黑白組成的(根據純灰色的不同比例)

值 (Value)

The value refers to how light or dark a colour is, it’s the amount of light that a colour gives.

該值是指顏色的亮或暗程度，即顏色發出的光量。

飽和 (Saturation)

Saturation is how vibrant a colour is. This term relates to the purity of the colour. More saturated colours are vibrant and less saturated ones are more dull.

飽和度是顏色的鮮艷程度。 該術語與顏色的純度有關。 飽和度越高的色彩越鮮艷，而飽和度越低的色彩越暗淡。

It is important to have a basic understanding of this terminology so you can apply it to your colour palette creation process.

對這個術語有基本的了解是很重要的，因此可以將其應用于調色板創建過程。

顏色扮演的角色 (The roles that colour plays)

Colour has many roles in UI design. I’d like to outline what some of these roles are, and how each can help us create a strong UI design and ultimately, a better user experience.

顏色在UI設計中扮演著許多角色。 我想概述其中的一些角色，以及每個角色如何幫助我們創建強大的UI設計，并最終改善用戶體驗。

1.用顏色來表達情緒 (1. Colour as a mood-setter)

This is perhaps the most commonly understood role of colour. Each colour can create a mood and is associated with certain feelings and assumptions. It is important to have a basic understanding of the psychology of colour so you can create the correct mood and transmit the right message to your target audience.

這也許是最常被理解的顏色作用。 每種顏色都可以產生一種情緒，并與某些感覺和假設相關聯。 對顏色的心理學有基本的了解很重要，這樣您才能創建正確的心情并將正確的信息傳達給目標受眾。

In this post I’d like to pay more attention to the other roles of colour that are not talked about as often. Since the basics of colour psychology are more generally understood I think the easiest way to provide this information is in an image.

在這篇文章中，我想更多地關注顏色的其他角色，而這些角色并沒有被廣泛討論。 由于色彩心理學的基本知識得到了更廣泛的理解，我認為提供此信息的最簡單方法是在圖像中。

It’s worth pointing out that the positive or negative connotation of a certain colour might also depend on the variations of said colour (if it has a tint, or a shade applied to it or if the saturation is high or low). In the image above the hues we see are just representative of that particular colour.

值得指出的是，某種顏色的正負含義也可能取決于該顏色的變化(如果它具有色彩或陰影，或者飽和度是高還是低)。 在上面的色相圖中，我們看到的只是該特定顏色的代表。

It is also key to note that the positive or negative connotations for each colour represented in the image above, are based on a traditionally western interpretation of colour. The emotions that colours transmit may vary between different cultures. It is key that as designers we take into consideration these potential differences when designing for cross-cultural contexts. A few examples of these differences of interpretation can be seen with:

還需要注意的是，上圖中表示的每種顏色的正負含義都是基于傳統的西方色彩解釋。 在不同文化之間，顏色傳遞的情感可能有所不同。 至關重要的是，作為設計師，我們在跨文化環境中進行設計時要考慮到這些潛在的差異。 可以從以下示例中看到這些解釋差異的一些示例：

• White: While white is generally associated with positive attributes in western culture (purity, cleanliness, simplicity, hope, etc) this does not apply to certain Asian cultures where this same colour is associated with death and mourning.

  白色：雖然白色通常與西方文化中的積極屬性(純度，清潔，樸素，希望等)相關聯，但不適用于某些亞洲文化，其中相同的顏色與死亡和哀悼相關聯。

• Blue: While in western culture blue is generally associated with trust, reliability and peace in some South American cultures it’s associated with trouble.

  藍色：在西方文化中，藍色通常與某些南美文化中的信任，可靠與和平相關，而與麻煩相關。

Have a look at this great infographic by ‘Information is beautiful’ that outlines the difference in the meaning of colours in different cultures.

看看“信息就是美麗”這個偉大的圖表，它概述了不同文化中顏色含義的差異。

2.顏色是決定因素 (2. Colour as decision-influencer)

As outlined in its first role, each colour can evoke a certain feeling or emotion. This can play a very important role in retail. Selling requires persuasion and although there are many factors that influence a customer’s buying behaviour, it is clear that visual cues, and in particular colour, play an active role. Visual cues are the fastest form of communication, and therefore are the very first thing that potential customers will process when they land on a website.

如其第一個角色所述，每種顏色都可以喚起某種感覺或情感。 這在零售中可以發揮非常重要的作用。 銷售需要說服力，盡管有許多因素會影響客戶的購買行為，但很明顯視覺提示(尤其是顏色)會發揮積極作用。 視覺提示是最快的溝通形式 ，因此，這是潛在客戶登陸網站時要處理的第一件事。

The psychology of colour is not only used to reflect a brand’s personality and evoke certain feelings in the audience but also to influence the actions that consumers take on a website.

顏色的心理不僅可以反映品牌的個性并喚起觀眾的某些感覺，還可以影響消費者在網站上采取的行動。

Certain colours can prompt users to take certain actions within the interface. An example of this is a red button that says ‘sale’. Because red promotes concepts like urgency and excitement it can be used to prompt users to take action quickly. Another example could be a green button. Because of the meaning that green has in western culture it provokes feelings of calmness, and a sense of going forward and growth. Choosing green for a button could indicate to the user that there is more information or more steps that need to be taken.

某些顏色可以提示用戶在界面內執行某些操作。 一個例子是一個紅色的按鈕，上面寫著“ sale”。 因為紅色促進了緊迫性和興奮性等概念，所以它可以用來提示用戶Swift采取行動。 另一個示例可能是綠色按鈕。 由于綠色在西方文化中具有含義，因此引起了鎮定的感覺以及前進和成長的感覺。 為按鈕選擇綠色可能會向用戶指示有更多信息或需要采取的更多步驟。

3.界面顏色指導 (3. Colour as a guide through the interface)

Colour can play a key role in guiding users through an interface. By using colour appropriately you can guide your users through an interface, leaving some options open and closing others. A good example of this is an active button versus a disabled one. The active button gives the user the option to take a path to another part of the interface, while the disabled one blocks or removes the option to access another area of that same interface.

顏色在引導用戶通過界面方面可以發揮關鍵作用。 通過適當地使用顏色，您可以引導用戶通過界面， 保持某些選項打開并關閉其他選項 。 一個很好的例子是一個活動按鈕與一個禁用按鈕。 活動按鈕使用戶可以選擇進入界面另一部分的路徑，而禁用按鈕可以阻止或刪除訪問同一界面另一區域的選項。

While in the previous example the role of colour is enabling the user to perform an action or not, colour as navigation can take other shapes, like for example when an item is selected the colour of said item might change. In this scenario colour enables the user to have visibility of the system’s status, meaning that with a change of colour for a selected item the user knows the system has registered their choice.

盡管在前面的示例中顏色的作用是使用戶能夠執行或不執行操作，但是顏色在導航時可以采用其他形狀，例如，當選擇某個項目時，該項目的顏色可能會更改。 在這種情況下，顏色使用戶可以查看系統狀態 ，這意味著通過更改所選項目的顏色，用戶可以知道系統已經注冊了他們的選擇。

Lastly colour can help with error prevention. An example of this is using colour to indicate a form has been filled in with the wrong information. Rather than waiting for the user to submit the form and display an error message, we can use colour (red in most cases) to indicate that there is something wrong with one of the fields. In the same way we can use colour to indicate success or an active field (green in most cases).

最后， 顏色可以幫助防止錯誤 。 這方面的一個示例是使用顏色來指示表單中填寫了錯誤的信息。 不用等待用戶提交表單并顯示錯誤消息，我們可以使用顏色(大多數情況下為紅色)來指示其中一個字段存在問題。 以同樣的方式，我們可以使用顏色表示成功或活動字段(大多數情況下為綠色)。

4.顏色作為層次創建者 (4. Colour as hierarchy creator)

Hierarchy is defined by the specific arrangement of certain elements based on their importance. With some items being represented as ‘above’ (more important), ‘below’ (less important) or ‘at the same level’. Hierarchy is key as it will prompt users to scan the elements on the page in the order that the designer deems appropriate.

層次結構是根據某些元素的重要性通過其特定排列來定義的。 有些項目以“高于”(較重要)，“低于”(較不重要)或“處于同一水平”表示。 層次結構是關鍵，因為它會提示用戶按照設計者認為適當的順序掃描頁面上的元素。

In UI design, hierarchy can be created in very different ways. One of them is by using colour (alone or in combination with other elements such as typography and spacing).

在UI設計中，可以以非常不同的方式創建層次結構。 其中之一是使用顏色(單獨使用或與其他元素(如版式和間距)組合使用)。

Colour can take on various approaches to create a desired hierarchy. These approaches are dependent on three components of colour: saturation, lightness/darkness and hue. These components can be mixed and matched to create said hierarchy.

顏色可以采用各種方法來創建所需的層次結構。 這些方法取決于顏色的三個組成部分：飽和度，明暗度和色相。 這些組件可以混合并匹配以創建所述層次。

1st approach — Saturation

第一種方法-飽和

Designs where there is saturation in certain elements grab the user’s attention and direct it to said component. This can be seen in the example below, where all elements are de-saturated and only the ‘call-to-action’ (CTA) buttons have saturation in their colour. The hierarchy of this design could be attributed to multiple elements, however, it is arguably led by the fact that the CTA jumps at us for being the only element on the page that has a high saturated colour.

某些元素存在飽和的設計會引起用戶的注意，并將其定向到所述組件。 在下面的示例中可以看到這一點，其中所有元素均不飽和，只有“號召性用語”(CTA)按鈕的顏色飽和。 這種設計的層次結構可以歸因于多個元素，但是，可以說是CTA成為頁面上唯一具有高飽和色的元素而引起我們的關注。

2nd approach — Hue

第二種方法-色相

As I outlined in the section on colour as a mood-setter, certain colours grab our attention faster or more efficiently than others. This is the case of red for example, it jumps at us almost immediately. Being aware of which colours tend to stand out more and which ones don’t can help us create the desired hierarchy on a design. However, which colour stands out most in each context is dependent on the third component, lightness and darkness.

正如我在關于色彩的設定中概述的那樣，某些顏色比其他顏色更快或更有效地吸引了我們的注意力。 例如，在紅色的情況下，它幾乎立即跳向我們 。 知道哪些顏色傾向于突出，哪些顏色不突出可以幫助我們在設計上創建所需的層次結構。 但是，在每種情況下哪種顏色最突出取決于第三部分，明暗。

3rd approach — Contrast

第三種方法-對比

In a design that uses mainly dark colours (independently of if they are saturated or not), light hues will stand out more while darker ones will recede into the background and vice versa. This leads us to contrast. We can play with lightness and darkness on a design to create the desired level of contrast that will lead to the creation of hierarchy. The higher the contrast on a component, the more prominent it will be for the user.

在主要使用深色(與顏色是否飽和無關)的設計中，淺色將更加突出，而深色將退回到背景，反之亦然。 這使我們形成對比。 我們可以在設計上進行明暗對比，以創建所需的對比度水平，從而形成層次結構。 組件上的對比度越高，對用戶來說越突出。

5.顏色作為輔助功能的實現者 (5. Colour as accessibility enabler)

Accessibility is a key factor designers must consider when designing interfaces. Good or bad accessibility will dictate who can and cannot use your design. As designers we should always design with accessibility in mind so that our designs can be used by anyone, regardless of physical, mental or cognitive disabilities and impairments.

可訪問性是設計人員在設計界面時必須考慮的關鍵因素。 可訪問性的好壞將決定誰可以使用和不能使用您的設計。 作為設計師，我們在設計時應始終牢記可及性，以便任何人都可以使用我們的設計，無論其身體，精神或認知上的障礙和障礙。

Colour plays a key role in creating an accessible product. Contrast is, perhaps, the first factor that comes to mind when talking about accessibility in our use of colour. When talking about contrast, in this case, I am referring to background-to-text contrast. There are guidelines in place to help you create an accessible product. Guidelines such as The Web Content Accessibility Guidelines.

顏色在創建可訪問產品中起著關鍵作用。 相比之下，當談論我們使用顏色的可訪問性時，首先想到的就是對比度。 在談到對比度時，在這種情況下，我指的是背景到文本的對比度。 有適當的準則可以幫助您創建可訪問的產品。 諸如Web內容可訪問性準則之類的準則 。

To help you meet the guidelines, there are many tools out there. However, my personal favourite as a UI designer would be a plug in called Cluse. Cluse allows you to quickly test and adjust background-to-text contrast without having to resort to external resources. Another great (online) tool is Colorable.

為了幫助您滿足準則，這里有很多工具。 但是，作為UI設計師，我個人最喜歡的是名為Cluse的插件。 Cluse允許您快速測試和調整背景與文本之間的對比度，而無需訴諸外部資源。 另一個很棒的(在線)工具是Colorable 。

Despite colour’s ability to improve the accessibility of your product, it should never be the only medium through which you do so. Colour should not be the only way you communicate, especially when it comes to crucial information on the interface.

盡管顏色能夠改善您產品的可訪問性，但它絕不應成為您這樣做的唯一媒介。 顏色不是您交流的唯一方式，尤其是在界面上的重要信息方面。

A good example of this is error states on forms. If you only communicate error through colour (in this case red), a user with colour blindness might completely miss the error and try to continue without correcting said error. In this case make sure you use icons or some kind of message that transmits that same error information the colour red is communicating.

一個很好的例子是表單上的錯誤狀態。 如果您僅通過顏色(在這種情況下為紅色)傳達錯誤，則色盲用戶可能會完全忽略該錯誤，并嘗試在不糾正該錯誤的情況下繼續操作。 在這種情況下，請確保您使用的圖標或某種消息會傳輸紅色顯示的相同錯誤信息。

The concept of not only using colour to improve accessibility also translates into more complex components of an interface like charts, graphs and labels. In order to improve usability in these instances make sure to incorporate some kind of visual pattern as well as the colour of choice. A good example of this is the labelling system that Trello uses.

不僅使用顏色來改善可訪問性的概念還轉化為界面的更復雜組件，例如圖表，圖形和標簽。 為了在這些情況下提高可用性，請確保合并某種視覺樣式以及選擇的顏色。 Trello使用的標簽系統就是一個很好的例子。

選擇調色板：提示和技巧 (Choosing your palette: tips and tricks)

In order to create a successful colour palette you should keep in mind all points made above in this post (paying special attention to ‘Colour as a mood setter’ and ‘Colour as accessibility enabler’). However, below I have gathered specific tips and tricks to watch out for in order to create a colour palette that is aesthetically pleasing, accessible and flexible.

為了創建成功的調色板，您應該牢記本文中以上提到的所有要點(特別注意“以顏色作為心情設定者”和“以顏色作為輔助功能”)。 但是，下面我收集了要提防的特定提示和技巧，以創建美觀，可訪問且靈活的調色板。

1.超越品牌思考 (1. Think beyond the brand)

Generally when we think of a colour palette in design, we think of a branded colour palette. Although this color palette is key to define the interface, in UI design we need a little more flexibility. This is because unlike the colours on a logo or branded materials (business cards, banners, etc), the UI colour palette must also accommodate the comfortable usage of the interface. This gives an extra dimension for colour choice beyond the traditional lines of representing brand values or creating visual impact.

通常，當我們在設計中考慮調色板時，就會想到品牌調色板。 盡管此調色板是定義界面的關鍵，但在UI設計中，我們需要更多的靈活性。 這是因為與徽標或商標材料(名片，橫幅等)上的顏色不同，UI調色板還必須適應界面的舒適使用。 除了代表品牌價值或創造視覺效果的傳統線條之外，這為顏色選擇提供了額外的空間。

In my own experience I often see this as something that is not well understood, and can lead to rigid interfaces and poor accessibility. This is due to the lack of ‘neutral’ colours. These colours tend to be shades of off white and grey, ranging from very light to very dark (these colours might vary if designing for a light or dark mode).

以我自己的經驗，我經常將其視為一種尚未被很好理解的東西，并且可能導致僵化的界面和差的可訪問性。 這是由于缺少“中性”顏色。 這些顏色傾向于是灰白色和灰色的陰影，范圍從非常亮到非常暗(如果設計為亮或暗模式，這些顏色可能會有所不同)。

From a brand’s perspective it would make complete sense not having extra shades of grey that don’t exist anywhere else in that brand. However, from a user interface point of view those colours will make up the majority of the interface, they will help the actual brand colours stand out and have specific functions and are therefore a must in the creation of a (UI focused) colour palette. Elements such as forms, functional icons, cards, shadows and text among others, usually have one of these neutral colours applied to them. This brings me to the next section of this post, the 60–30–10 rule.

從品牌的角度來看，完全沒有該品牌其他地方不存在的額外灰色陰影是完全有意義的。 但是，從用戶界面的角度來看，這些顏色將構成界面的主要部分，它們將幫助實際的品牌顏色脫穎而出并具有特定的功能，因此在創建(以UI為重點的)調色板中是必須的。 表單，功能圖標，卡片，陰影和文本等元素通常具有應用其中性色的一種。 這將我帶到本文的下一部分，即60–30–10規則。

2.選擇比例 (2. Choosing your proportions)

There is an interior design rule for choosing the proportions of your colours that states that regardless of the colours you use in your design, they should (when and if possible) each be distributed in a 60% — 30% -10% proportion ratio. With 60% being the dominant colour, 30% being the secondary color, and 10% being an accent color.

有一個用于選擇顏色比例的室內設計規則，該規則規定，無論您在設計中使用哪種顏色，它們都應(在可能的情況下)以60％-30％-10％的比例分配。 其中60％為主色，30％為第二色，10％為重點色。

With this in mind, when it comes to designing a user interface, the 60% is usually taken by the neutral colours mentioned in the previous section (whites and greys). In the same way, the 10% is usually reserved for important elements that will help the user navigate the interface, components such as call-to-action buttons.

考慮到這一點，在設計用戶界面時，通常使用上一節中提到的中性色(白色和灰色)來占據60％。 同樣，通常將10％保留給重要元素，以幫助用戶瀏覽界面，號召性用語按鈕等組件。

The ‘60–30–10’ rule allows users to shift their attention from one focal point to another, it helps create harmony and hierarchy. However, it is not set in stone and you’ll find that although it’s good to keep it in mind it’s not always possible to apply it depending on the nature of the interface.

“ 60–30–10”規則允許用戶將注意力從一個焦點轉移到另一個焦點，這有助于建立和諧和層次結構。 但是，它并不是一成不變的，您會發現盡管牢記它是一件好事，但并非總是可以根據界面的性質來應用它。

3.遠離純灰色和黑色 (3. Stay away from pure greys and blacks)

This is a tip that will make your designs look much more fresh and modern. In the section ‘Think beyond the brand’ I mentioned the need for a range of greys and off whites in our colour palette. When referring to these greys, I am not talking about pure greys (an achromatic colour that is composed of pure white and pure black). I am referring to greys with a hint of saturation (meaning adding a bit of another colour into the mix). The reason for (generally) avoiding pure greys and blacks is that in reality these colours don’t actually exist and by adding a bit of saturation (I usually add a little blue to make it more clean looking, however, this will depend on the background colour) your users will relate more to these colours subconsciously as they derive from a base colour that is already present on the interface.

這是一個技巧，可以使您的設計看起來更加新鮮和現代。 在“超越品牌思考”部分中，我提到了調色板中需要一系列灰色和白色的需求。 當提到這些灰色時，我并不是在談論純灰色(由純白色和純黑色組成的無彩色)。 我指的是帶有淡淡飽和度的灰色(意味著在混合中添加了另一種顏色)。 (通常)避免使用純灰色和黑色的原因是，實際上這些顏色實際上并不存在，而是通過增加一些飽和度來實現(我通常添加一些藍色以使其看起來更干凈，但是，這取決于背景色)，因為它們是從界面上已經存在的基礎色中派生出來的，您的用戶將更加有意識地將其與這些顏色相關。

4.顏色組合 (4. Colour combinations)

When making a choice of which colours to combine, keep in mind these five rules of thumb for creating a harmonious and balanced colour palette.

在選擇要組合的顏色時，請牢記創建和諧和平衡的調色板的這五個經驗法則。

Monochromatic

單色

In this kind of combination all colours are tones, tints, or shades of one base colour. This approach is characterised by being subtle and easy to use. However, we must be careful not to choose this as our default option simply because it’s easier. In fact, if not used properly it can make a design feel boring and lazy. In other instances, if used correctly it can be a good example of the saying ‘less is more’. A good use of this type of combination might be in a product that needs to be strictly kept in brand. In this case, playing with a monochromatic palette of the brand colours might help.

在這種組合中，所有顏色都是一種基色的色調，色調或陰影。 這種方法的特點是微妙且易于使用。 但是，我們必須小心不要僅僅因為它更容易而選擇它作為我們的默認選項。 實際上，如果使用不當，可能會使設計感到無聊和懶惰。 在其他情況下，如果使用得當，則可以說是“少即是多”。 此類組合的良好用法可能是需要嚴格保留品牌商標的產品。 在這種情況下，使用品牌色彩的單色調色板可能會有所幫助。

Analogous

類似的

This combination focuses on matching colours that are next to each other on the colour wheel (in either direction). The main advantage of combining colours in this way is that it’s flexible and versatile as it allows you to play with different hues but without having to think too much about how they will interact with each other since they are similar in nature. On the one hand, this combination can help your design look uniform and consistent. On the other hand, it can become overwhelming if there are too many colours. To avoid this a good solution might be to pick one of the colours to be the dominant hue and use the others as accents or secondary colours.

這種組合著重于在色輪上(在任一方向上)彼此相鄰的匹配顏色。 以這種方式組合顏色的主要優點是它靈活且用途廣泛，因為它使您可以使用不同的色調進行播放，而不必過多考慮它們之間的相互作用，因為它們本質上是相似的。 一方面，這種組合可以幫助您的設計看起來均勻一致。 另一方面，如果顏色太多，可能會變得不堪重負。 為了避免這種情況，一個好的解決方案可能是選擇一種顏色作為主要色調，而將其他顏色用作強調色或第二種顏色。

Complementary

補充

This combination takes colours on opposite sides of the colour wheel (such as red and green, blue and orange, etc.). The main advantage of this kind of combination is that the two colours combined appear to be even brighter than they do on their own. This is a high-contrast combination and it usually has a strong impact. However, keep in mind that when using this combination your design might benefit from adding tones and tints of each colour in the same way the monochromatic combination does. This will make your UI appear more balanced and less jarring.

此組合在色輪的相反兩側獲得顏色(例如紅色和綠色，藍色和橙色等)。 這種組合的主要優點是，兩種顏色組合在一起看起來比它們自己更明亮。 這是一個高對比度的組合，通常會產生很大的影響。 但是，請記住，使用這種組合時，您的設計可能會受益于單色組合中添加每種顏色的色調和色調。 這將使您的UI顯得更加平衡且不那么刺耳。

Triadic

三聯體

This combination takes three colours that have equal space between each other within the colour wheel (meaning the colours are at equidistant points). This way of choosing colours provides a high contrast and impactful colour palette, much like the complementary colour combination. Having three colours means this option becomes more flexible.

這種組合采用了三種顏色，它們在色輪內彼此之間具有相等的間距(這意味著顏色在等距的點處)。 這種選擇顏色的方式提供了高對比度和影響力大的調色板，非常類似于互補色組合。 具有三種顏色意味著該選項變得更加靈活。

Tetradic

四肢的

Tetradic colour palettes use the same concept as triadic combinations but they add one more colour: taking four colours from equidistant points on the color wheel. The more colours you have, the more flexibility you gain with the palette. However, it can also become more difficult to balance.

四色調色板與三色組合使用相同的概念，但它們又增加了一種顏色：從色輪上的等距點獲取四種顏色。 您擁有的顏色越多，調色板獲得的靈活性就越大。 但是，它也可能變得更加難以平衡。

5.創建調色板的工具 (5. Tools for creating a colour palette)

There are many tools out there that help you create a colour palette but here are my personal favourites.

有很多工具可以幫助您創建調色板，但這是我個人的最愛。

Canva colour wheel

帆布色輪

The Canva colour wheel allows you to create colour palettes using specific colour combinations like the ones described above (monochromatic, complementary, analogous, triadic and tetradic). This tool also offers great summarised information on colour theory and terminology.

Canva色輪可讓您使用上述特定顏色組合(單色，互補色，類似色，三重色和四色)創建調色板。 該工具還提供了有關顏色理論和術語的大量摘要信息。

Canva colour wheel

帆布色輪

Coolors.co

Coolors.co

This website has a more randomised way of picking colours but is more fun than other tools I have used. Another great thing about this tool is that the colours take most of the screen which is good as it gives you a better sense of the palette you’d be creating. They also offer unique features like colour blindness view or the ability to create a colour palette from a photo.

這個網站有更多隨機選擇顏色的方式，但是比我使用的其他工具更有趣。 此工具的另一個優點是，顏色占據了整個屏幕的大部分，這很好，因為它使您可以更好地感知要創建的調色板。 它們還提供獨特的功能，例如色盲視圖或從照片創建調色板的功能。

Coolors.co

Coolors.co

Adobe colours

Adobe顏色

This Adobe tool is quite similar to the Canva colour wheel, however, it has more colour combinations for you to play with and it allows you to select a base colour and change each colour independently. It also provides you with the ability to test accessibility.

此Adobe工具與Canva色輪非常相似，但是，它具有更多的顏色組合供您使用，它允許您選擇基本色并獨立更改每種顏色。 它還使您能夠測試可訪問性。

Adobe colours

Adobe顏色

Color Tool — Material Design

色彩工具—材質設計

This tool can come in handy to see how your colours would be applied to different UI components and test their accessibility.

該工具可以派上用場，以查看如何將您的顏色應用于不同的UI組件并測試其可訪問性。

Color Tool

色彩工具

Curls

卷發

This tool is great to read a short reminder on each of the combination types as well as to get inspiration for potential colour palettes on each of these combinations

該工具非常適合閱讀有關每種組合類型的簡短提醒，以及從這些組合的每種組合中獲得潛在調色板的靈感

Curls

卷發

Find more tools

查找更多工具

As mentioned these are just my personal favourites. However there are many more. Check them out! Let me know if you think any of these are better than the ones in my list (I haven’t tried them all).

如前所述，這些只是我個人的最愛。 但是還有更多。 去看一下！ 讓我知道您是否認為其中任何一個比我列表中的要好(我還沒有嘗試全部)。

List of colour picker tools

顏色選擇器工具列表

結論 (Conclusion)

As outlined in this post, colours are a key aspect of the user interface, and play many roles; from setting the mood, creating hierarchy, supporting accessibility, and more.

如本文所概述，顏色是用戶界面的關鍵方面，并扮演著許多角色。 從設置心情，創建層次結構，支持可訪問性等等。

The creation of a colour palette can be tricky and to some designers it will come more naturally than to others. However, there are some tips and tricks to help you put together a successful palette in a more practical and methodical way. Tips such as knowing the purpose of your palette, understanding rules of thumb for combining colours and using online tools.

調色板的創建可能很棘手，對于某些設計師而言，它比其他人更自然。 但是，有一些技巧可以幫助您以更實際和更有條理的方式組合成功的調色板。 提示，例如了解調色板的用途，了解組合顏色的經驗法則和使用在線工具。

So next time you are asked to create a ‘quick’ colour palette, I hope this post will help you articulate why creating a colour palette deserves more than a moment of your attention and why it’s so important to get this key foundation element of the design right from the beginning.

因此，下次要求您創建“快速”調色板時，我希望這篇文章可以幫助您闡明為什么創建調色板值得您多一刻的關注，以及為什么獲得此設計的關鍵基礎元素如此重要從一開始就正確。