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.

因此，下次要求您创建“快速”调色板时，我希望这篇文章可以帮助您阐明为什么创建调色板值得您多一刻的关注，以及为什么获得此设计的关键基础元素如此重要从一开始就正确。