Color is an extremely strong tool that we can apply to solve many design challenges. Colors can draw attention to the right parts of the design when used logically, along with some intuition of course. Since color plays such a major role in shaping the aesthetics and usability of websites, changing a single color can change a user’s perception of the same design.

Ç的olor是一个非常强大的工具，我们可以应用，解决了许多设计挑战。 色彩在逻辑上使用时会吸引人们注意设计的正确部分，当然还有一些直觉。 由于颜色在塑造网站的美观性和可用性方面起着重要作用，因此更改单一颜色可以改变用户对同一设计的感知。

With roughly 16.8 million colors at their disposal, designers have the luxury of creating unique layouts. But, choosing the right color scheme can become pretty challenging since the possibilities are endless.

设计师可以使用大约1680万种颜色，可以创造出独特的布局。 但是，选择正确的配色方案可能会变得非常困难，因为可能性无穷无尽。

1680万种颜色？ (16.8 million colors?)

An RGB color system comprises three components — red (R), blue (B), and green (G). This system is one of the most ubiquitous in the world. It combines red, green, and blue light to create colors for screens, etc.

RGB色彩系统包含三个组件-红色(R)，蓝色(B)和绿色(G)。 该系统是世界上最普及的系统之一。 它结合了红色，绿色和蓝色的光来为屏幕等创建颜色。

Since each color channel can range from 0 to 255, that means there are 256 total options that an R, G, or B unit can take. As a result, there are a total of 256 x 256 x 256 = 16,777,216 colors that the RGB color system can represent.

由于每个颜色通道的范围可以从0到255，这意味着R，G或B单位可以使用256个总共选项。 结果，RGB颜色系统可以代表总共256 x 256 x 256 = 16,777,216种颜色。

Understanding how to pick the right colors can not only transform the quality of our designs but also enhance the user experience tremendously.

了解如何选择正确的颜色不仅可以改变我们的设计质量，而且可以极大地改善用户体验。

Before we start to apply color theory to our designs, we should understand:

在开始将色彩理论应用于设计之前，我们应该了解：

• How colors pair with one another, the pairings that work best, and how one can create effective color palettes.颜色如何相互配对，最有效的配对以及如何创建有效的调色板。
• How to use color schemes to produce effective designs.如何使用配色方案产生有效的设计。
• How colors evoke emotions and affect the messaging of products.颜色如何唤起情感并影响产品的信息传递。
• How contrast plays a major role in emphasizing certain elements.对比度如何在强调某些元素时起主要作用。

色轮 (The Color Wheel)

If you’ve ever audited an art class, you’ve probably seen the color wheel before. Many artists and designers use the color wheel to visualize the relationship between colors.

如果您曾经审核过美术课，则可能以前曾经看过色轮。 许多艺术家和设计师使用色轮来形象化颜色之间的关系。

The color wheel comprises three color groups — primary, secondary, and tertiary.

色轮包括三个颜色组- 主色， 第二色和第三色 。

1. Red, blue, and yellow make up the primary color group. These colors are equidistant from one another on the wheel, forming an equilateral triangle. Primary colors form the basis for all colors on the wheel.红色，蓝色和黄色组成原色组。 这些颜色在车轮上彼此等距，形成一个等边三角形。 原色是车轮上所有颜色的基础。
2. Secondary groups consist of green, orange, and purple. These colors are formed by mixing two primary colors.次要组包括绿色，橙色和紫色。 这些颜色是通过混合两种原色形成的。
3. Tertiary color groups are formed by mixing a primary and secondary color. These usually have a two-word name such as blue-green (teal), red-purple (magenta), etc.通过混合原色和第二色形成第三色组。 这些通常具有两个单词的名称，例如蓝绿色(青绿色)，红紫色(洋红色)等。

As we begin to select colors for our design projects, the color wheel will be vital in concluding which colors pair well together.

当我们开始为设计项目选择颜色时，色轮对于确定哪种颜色搭配得很好至关重要。

The color wheel is our guiding light to the end of the rainbow.

色轮是我们通往彩虹尽头的指示灯。

HSLa —色相饱和度亮度(和Alpha) (HSLa — Hue Saturation Lightness (and alpha))

Hue Saturation Lightness (and alpha) or HSLa, for short, is one method of declaring colors digitally.

色相饱和度亮度(和Alpha)或HSLa，是数字声明颜色的一种方法。

Here’s what it looks like in CSS:

这是CSS中的样子：

#some-element {       background-color: hsla(120, 30%, 50%, 1); }

And, here’s how to toggle this option in Sketch and Figma respectively:

并且，以下是分别在Sketch和Figma中切换此选项的方法：

HSLa is generally the preferred syntax for setting colors, for designers and developers alike. Below are some of the many reasons for this predilection:

对于设计人员和开发人员而言，HSLa通常是设置颜色的首选语法。 以下是这种偏爱的许多原因：

• HSLa is the most semantic practice of setting colors, giving designers complete control over the color scheme.HSLa是设置颜色的最语义化的做法，可让设计人员完全控制颜色方案。
• HSLa is extremely flexible in that one easily manage contrast to create related color schemes.HSLa非常灵活，因为它可以轻松管理对比度以创建相关的配色方案。
• Designers can’t intuitively adjust RGB and hex values. The brightness of a color, for example, wouldn’t intuitively translate to changes within the RGB or hex space. In HSLa, one can instead play around with the lightness (L) of the color to achieve the desired result.设计人员无法直观地调整RGB和十六进制值。 例如，颜色的亮度不会直观地转换为RGB或十六进制空间内的变化。 在HSLa中，可以替代地使用颜色的亮度(L)以获得所需的结果。
• HSLa allows us to quickly create color variations on the fly. Most of us can’t maintain this speed and consistency through the RGB or hex model.HSLa允许我们快速动态地创建颜色变化。 我们大多数人无法通过RGB或十六进制模型保持这种速度和一致性。

• The HSLa model makes it much easier to change color values programmatically.

  HSLa模型使通过编程更改颜色值变得更加容易 。

Let’s examine how each value affects our colors:

让我们检查每个值如何影响我们的颜色：

• Hue (H) — Hue is the “pure” color and is expressed as the angle (in degrees) around the color wheel. When thinking about hue, think of the color wheel, which is a circle. The reds are at 0° and 360°, the greens are at 120°, and the blues are at 240°.

  色相(H) -色相是“纯”颜色，表示为色轮周围的角度(以度为单位)。 考虑色相时，请考虑色环，它是一个圆圈。 红色为0°和360°，绿色为120°，蓝色为240°。

• Saturation (S) — Saturation refers to the intensity/purity of the hue. 0% is completely denatured (grayscale) while 100% is fully saturated i.e color itself.

  饱和度(S) -饱和度是指色调的强度/纯度。 0％完全变性(灰度)，而100％完全饱和，即颜色本身。

• Lightness (L) — Lightness, as the name implies, refers to the lightness of the color. 0% is black while 100% is white.

  亮度 (L) -顾名思义，亮度是指颜色的亮度。 0％是黑色，而100％是白色。

• alpha (a) — Alpha refers to the opacity or transparency value. 0% is fully transparent while 100% is fully opaque.

  alpha(a) -Alpha是指不透明度或透明度值。 0％是完全透明的，而100％是完全不透明的。

This list of HSLa color codes is an amazing resource if you want to visualize how changing these dimensions can affect our perception of colors.

如果您想直观地看到更改这些尺寸如何影响我们对颜色的感知， 此HSLa颜色代码列表是一个了不起的资源。

暖色 (Warm Colors)

Each color can either be classified as “warm” or “cool.” Warm colors are those that are intrinsically vivid or bold.

每种颜色都可以分类为“暖色”或“冷色”。 暖色是本质上生动或大胆的颜色。

Warm colors generally lie between red and yellow, including several variants and orange. A warm color palette also contains brown and tan colors.

暖色通常介于红色和黄色之间，包括几种变体和橙色。 暖色调的调色板还包含棕色和棕褐色。

Designers rely on warm colors to generate a feeling of, well, warmth. Take, for example, fire or volcanoes, which typically burn between the red and yellow spectrum. Sometimes these colors induce a feeling of aggression and are considered bold colors.

设计师依靠温暖的色彩来产生温暖的感觉。 以火灾或火山为例，通常在红色和黄色光谱之间燃烧。 有时这些颜色会引起侵略感，因此被认为是大胆的颜色。

Here’s how we can create a warm color palette in CSS using a single color as our starting point:

这是我们如何使用单一颜色作为起点在CSS中创建暖色调色板的方法：

/* Set hue to a value  between 0 and 8 */.color-1 {       background-color: hsla(0, 100%, 50%, 1); }/* Set hue to a value  between 8 and 15 */.color-2 {       background-color: hsla(10, 100%, 50%, 1);}/* Set hue to a value  between 15 and 30 */.color-3 {       background-color: hsla(20, 100%, 50%, 1);}/* Set hue to a value  between 30 and 45 */.color-4 {       background-color: hsla(40, 100%, 50%, 1);}/* Set hue to a value  between 45 and 60 */.color-5 {       background-color: hsla(50, 100%, 50%, 1); }

酷色 (Cool Colors)

On the other side of the color wheel, we have colors that are considered cool. Cool colors are inherently calm or soothing.

在色轮的另一侧，我们认为颜色很酷。 凉爽的色彩本质上是沉着或舒缓的。

Cool colors range between blue, purple and green, including several variants of these colors as well as neutral white and greys. These colors are often associated with water or winter climates (think calming blue waters).

凉爽的颜色介于蓝色，紫色和绿色之间，包括这些颜色的几种变体以及中性的白色和灰色。 这些颜色通常与水或冬季气候有关(想想平静的蓝色水域)。

Cool colors aren’t as overwhelming compared to their warm counterparts. Since these colors recede in space, it’s usually a good idea to use them to style secondary or tertiary elements. This technique allows users to focus on the primary content, which designers can represent using warm colors.

与暖色相比，冷色并没有压倒性的优势。 由于这些颜色在空间中逐渐消失，因此通常最好使用它们来设置第二或第三元素的样式。 该技术使用户可以专注于主要内容，设计师可以使用暖色来代表这些内容。

Below, I’ve used cool colors to create a simple yet elegant landing page:

在下面，我使用冷色调创建了一个简单而优雅的着陆页：

阴影和色调 (Shades and Tints)

We saw how to use hue to create cool and warm colors. But, HSLa doesn’t limit us to just the hue. We can also tweak the lightness of color to create shades and tints of a hue.

我们看到了如何使用色相来创建冷色调和暖色调。 但是，HSLa并不仅限于色调。 我们还可以调整颜色的亮度，以创建色调的色调。

We can create tints and shades by increasing and decreasing the lightness of the color. Adding white to color forms tints that add to the lightness of a hue. On the other hand, adding black to color forms shades that reduce the lightness of that hue.

我们可以通过增加和减少颜色的亮度来创建色调和阴影。 向颜色添加白色会形成色调，从而增加色调的亮度。 另一方面，在颜色中添加黑色会形成阴影，从而降低该色调的亮度。

You might have noticed that we can easily add shades or tints to colors by manipulating the lightness (L), which is determined by the third number in HSLa. Lightness ranges from 0% (black) to white (100%).

您可能已经注意到，我们可以通过操纵亮度(L)轻松地为颜色添加阴影或色调，该亮度由HSLa中的第三个数字确定。 亮度范围从0％(黑色)到白色(100％)。

By understanding how to handle the shades or tints of colors, designers can create a wider range of colors for the Web. Let’s take a look at how we can create a palette of increasingly lighter shades by keeping the hue constant:

通过了解如何处理颜色的阴影或色彩，设计人员可以为Web创建更广泛的颜色。 让我们看一下如何通过保持色调不变来创建逐渐变浅的调色板：

Here’s how to do that in CSS:

这是在CSS中执行此操作的方法：

/* Set some lightness for the first color */.color-1 {       background-color: hsla(240, 100%, 30%, 1);}/* Set lightness between 35% and 45% to create a slightly lighter shade of blue. */.color-2 {       background-color: hsla(240, 100%, 40%, 1);}/* Set lightness between 45% and 55% */.color-3 {       background-color: hsla(240, 100%, 50%, 1);}/* Set lightness between 55% and 65% */.color-4 {       background-color: hsla(240, 100%, 60%, 1);}/* Set lightness between 65% and 75% */.color-5 {       background-color: hsla(240, 100%, 70%, 1);}

Pretty sweet, isn’t it?

很漂亮，不是吗？

配色方案 (Color Schemes)

Now that we’ve learned some basic color theory and its importance in the real world, let’s explore how we can select and apply colors to our designs.

现在，我们已经学习了一些基本的颜色理论及其在现实世界中的重要性，下面让我们探讨如何选择颜色并将其应用于我们的设计。

Understanding how to harmonize colors allows us to create elegant and usable designs. This is where the color wheel comes handy because it eliminates most of the guesswork. We can leverage this handy tool to calibrate the colors that could go well together.

了解如何协调色彩使我们能够创建优雅且可用的设计。 这是色轮派上用场的地方，因为它消除了大多数猜测。 我们可以利用这个方便的工具来校准可以一起使用的颜色。

Like I mentioned before, the colors we select can make or break our design. Since colors have such a notable impact on the design, knowing our options can help us make better decisions.

就像我之前提到的，我们选择的颜色可以决定我们的设计成败。 由于颜色对设计有如此显着的影响，因此了解我们的选择可以帮助我们做出更好的决策。

Designers usually evaluate four color schemes before moving forward with a project:

设计师通常在进行项目前评估四种配色方案：

• Monochromatic单色
• Complementary补充
• Triadic三联体
• Analogous类似的

Each scheme can work to our advantage depending on how we want to showcase our designs.

每种方案都可以根据我们想要展示我们的设计的方式来发挥我们的优势。

单色方案 (Monochromatic Schemes)

Monochromatic designs provide us with the most basic color scheme possible, utilizing a single color along with varying shades and tints.

单色设计为我们提供了最基本的配色方案，利用了一种单色以及各种阴影和色调。

The most basic color scheme possible utilizes a single color with varying shades and tints to create a monochromatic palette.

最基本的配色方案可能利用具有不同阴影和色调的单色来创建单色调色板。

Each color within the monochromatic palette can be derived from the base color. Although all our elements might feel similar, we can eliminate the monotony with the use of high contrast. That is, when selecting a monochromatic color scheme, we should select a much darker and lighter shade of the main color.

单色调色板中的每种颜色都可以从基础颜色派生。 尽管我们所有的元素可能都感觉相似，但我们可以使用高对比度消除单调。 也就是说，在选择单色配色方案时，我们应该选择一种较深和较浅的主色阴影。

Designers can benefit from monochromatic color schemes since they provide an organized impression when applied to a project. By using a single color, elements in our layout can provide an immediate sense of harmony.

设计师可以受益于单色配色方案，因为当应用于项目时，它们可以提供有组织的印象。 通过使用一种颜色，我们布局中的元素可以立即提供和谐感。

The best way to go about monochromatic designs is to design in black and white with varying shades of gray. We can then enhance it further by choosing a different base color.

进行单色设计的最佳方法是采用黑白设计，并使用不同的灰色阴影。 然后，我们可以通过选择其他基本颜色来进一步增强它。

配套方案 (Complementary Schemes)

As depicted in the diagram before, a complementary color scheme utilizes colors opposite from each other on the color wheel. For instance, if we were to select blue as our main color, it would create maximum contrast and intensity with orange.

如上图所示，互补色方案利用色轮上彼此相反的颜色。 例如，如果我们选择蓝色作为主要颜色，它将与橙色创建最大的对比度和强度。

Complementary color schemes are generally more prevalent in logos and uniforms. A key example is the Los Angeles Lakers’ jersey, which features the iconic purple and yellow color scheme.

互补的配色方案通常在徽标和制服中更为普遍。 一个典型的例子是洛杉矶湖人队的球衣，它具有标志性的紫色和黄色配色。

Complementary schemes provide us with a dramatic display of color that we can also apply to websites!

互补方案为我们提供了生动的色彩展示，我们也可以将其应用于网站！

三合会计划 (Triadic Schemes)

Triadic color schemes, as the name implies, consist of three colors that are equidistant from one another on the color wheel.

顾名思义，三色配色方案由色轮上彼此等距的三种颜色组成。

Triadic schemes can provide supplemental pops of color while allowing for some flexibility in the range of colors.

三合一方案可以提供补充色泽，同时在颜色范围内提供一定的灵活性。

类似方案 (Analogous Schemes)

As showcased below, analogous color schemes use three or more colors that are adjacent to one another on the color wheel.

如下所示，类似的配色方案使用在色轮上彼此相邻的三种或更多种颜色。

In general, there’s one dominant hue that’s coupled with an auxiliary second color and a third color to accent the palette.

通常，一种主要色相与辅助第二种颜色和第三种颜色相结合，以突出调色板。

Analogous designs tend to create a gratifying and calming display. For example, we can use the color blue as the dominant hue along with teal and green to create soothing visuals:

类似的设计趋向于产生令人满意的和平静的显示。 例如，我们可以使用蓝色作为主色调，同时使用蓝绿色和绿色来创建舒缓的视觉效果：

It’s important to note that since analogous color schemes fall in line with one another, they usually yield a low-contrast experience, which can hurt accessibility.

重要的是要注意，由于类似的配色方案彼此一致，因此它们通常会产生低对比度的体验，这可能会损害可访问性。

Therefore, we should avoid analogous schemes for content that requires a user’s immediate attention. Instead, we can use them to create backgrounds that don’t compete with our products’ main content.

因此，对于应引起用户立即注意的内容，我们应避免采用类似的方案。 取而代之的是，我们可以使用它们来创建与产品的主要内容不竞争的背景。

色彩心理学 (Color Psychology)

I know we’ve covered a lot here, but there’s so much more that we can do with this knowledge. There’s no limit to our imagination, which is why the field of art and design is so everlasting.

我知道我们已经在这里介绍了很多内容，但是我们可以利用这些知识做更多的事情。 我们的想象力无止境，这就是为什么艺术和设计领域如此持久的原因。

At the end of the day, the designer will need to determine the “feel” of the product that they can communicate with the users either through the use of colors or similar techniques.

最终，设计人员将需要确定产品可以通过使用颜色或类似技术与用户进行交流的“感觉”。

Each color is associated with a particular meaning (both positive and negative) and has a different context, which is why color psychology can help impact how people perceive a design. When designers choose the “right” colors, they’re nonverbally communicating the emotion of their products or services.

每种颜色都有特定的含义(正面和负面)，并且具有不同的上下文，这就是为什么颜色心理学可以帮助影响人们对设计的看法的原因。 当设计师选择“正确”的颜色时，他们是在口头上传达其产品或服务的情感。

Below are some colors that product designers use to elicit certain emotions from their users:

以下是产品设计师用来引起用户某些情绪的一些颜色：

When using color psychology to our advantage, we should acknowledge that there’s no hard and fast mapping of colors to emotions. Color associations will vary throughout different parts of the world.

当利用颜色心理学为我们带来优势时，我们应该承认，没有将颜色映射到情感上的一成不变的方法。 在世界各地，颜色关联会有所不同。

There’s a lot we can do with this knowledge on colors. Nevertheless, there are still some best practices to which we should adhere to.

关于颜色的知识，我们可以做很多事情。 尽管如此，我们仍应遵循一些最佳实践。

规则1：避免低对比度的色彩组合 (Rule #1: Avoid Low Contrast Color Combinations)

Color combinations that result in reduced contrast hurt the accessibility of our websites. Accessibility matters, especially since more than one billion people, or 15% of the world’s population, experience some form of disability.

导致对比度降低的颜色组合会损害我们网站的可访问性。 无障碍获取至关重要，尤其是因为超过十亿人(占世界人口的15％)遇到某种形式的残疾。

The color combinations we should try avoiding are…

我们应避免使用的颜色组合是…

• The pairing of two or more bright colors两种或更多种鲜艳颜色的配对
• The pairing of two or more light colors两种或更多种浅色的配对
• The pairing of two or more dark colors两种或更多种深色的配对

Even if we somehow managed to create sufficient contrast using the pairings mentioned above, they won’t create a high enough contrast to stand out and grab a user’s attention.

即使我们使用上述配对设法以某种方式创建了足够的对比度，它们也不会创造出足够高的对比度以引起用户的注意。

规则2：避免霓虹色 (Rule #2: Avoid Neon Colors)

Neon colors are extremely bright versions of primary and secondary colors. These colors are almost always visually straining. It’s uncommon to see companies using neon colors for their primary content.

霓虹色是原色和副色的极亮版本。 这些颜色几乎总是在视觉上令人疲劳。 看到公司将霓虹色用作其主要内容的情况很少见。

Unless we’re extremely sure that neon colors will make our design pop, I would suggest refraining from using these. Also, since users are becoming smarter with each digital interaction, they’ve come to realize that neon colors are not the norm, which is why we might catch them off guard.

除非我们非常确定霓虹色会使我们的设计流行，否则我建议不要使用这些颜色。 另外，由于用户在每次进行数字交互时都变得越来越聪明，因此他们开始意识到霓虹色不是标准，这就是为什么我们可能会措手不及。

When used correctly, however, neon colors can create unique designs and help emphasize the message we want to relay to users:

但是，如果正确使用，霓虹色可以创造出独特的设计并有助于强调我们想要传达给用户的信息：

规则3：避免振动颜色 (Rule #3: Avoid Vibrating Colors)

When pairing two colors, both of which have a high saturation, we get vibrating colors. Vibrating colors tend to create a glowing or moving effect that can often irritate our eyes:

当将两种都具有较高饱和度的颜色配对时，我们会得到振动的颜色。 鲜艳的色彩往往会产生发光或移动的效果，常常会刺激我们的眼睛：

A classic example is a Christmas card, which uses a red and green pairing. This creates a glaring effect on the screen and can seem a little distracting and intense:

一个经典的例子是一张圣诞贺卡，它使用红色和绿色的配对。 这在屏幕上产生了耀眼的效果，并且看起来有些分散和强烈：

Most users will only skim our websites. The real action starts when they find our websites memorable enough to make repeated visits and complete the actions we intended in the first place.

大多数用户只会浏览我们的网站。 真正的行动始于他们发现我们的网站令人印象深刻，足以使您再次访问并完成我们最初打算采取的行动。

Since users aren’t reading every single word or checking every menu, we need to guide them to the most important facets by managing a sensible color palette.

由于用户不会阅读每个单词或检查每个菜单，因此我们需要通过管理明智的调色板将其引导到最重要的方面。