第一部分：不要使用RGB，除非您是色彩理论方面的专家。 (Part I. Don’t use RGB Unless you’re an expert in color theory.)

Pop Quiz: Without cheating, describe what color this hex code is likely to represent: #03A87C? Here’s a hint: RGB(3, 168, 124) (did that help at all?)

流行测验：在不作弊的情况下，描述此十六进制代码可能代表什么颜色： #03A87C ？ 这是一个提示 ： RGB(3, 168, 124) (有帮助吗？)

— The answer: ¡uoʇʇnq ʍoןןoɟ ǝɥʇ ɟo uǝǝɹƃ ǝɥʇ s,ʇI

—答案：¡oʇʇnqʍoןןoɟǝɥʇouǝǝɹƃs s，ʇI

What you’re communicating to your machine is the intensity of red, green, and blue light per pixel on RGB display. If you’re not an expert at additive color mixing, you likely won’t be able to predict what color combos will give the exact color you’re looking for. In the most basic sense, combinations of these three primary colors are used to generate the 16M+ colors we commonly see in our displays.

您要与机器通信的是RGB显示屏上每像素的红，绿和蓝光强度。 如果您不是加色混色方面的专家，则可能无法预测哪种颜色组合会给出您想要的确切颜色。 从最基本的意义上讲，这三种原色的组合用于生成我们通常在显示器中看到的16M +颜色。

关于本系列 (About this series)

In this series, I’ll be breaking down the mystique of choosing the right colors for the job. The goal is to give you the practical tools to make it look like you hired a designer to pick your color schemes. When your designs look good, we all win!

在本系列中，我将打破为工作选择正确的颜色的奥秘。 我们的目标是为您提供实用的工具，使其看起来就像您雇用设计师来挑选配色方案一样。 当您的设计看起来不错时，我们都会赢！

• Part 1: Don’t use RGB unless you’re an expert in color theory

  第1部分：除非您是色彩理论专家，否则不要使用RGB

• Part 2: Stay tuned

  第2部分：敬请期待

什么十六进制？ (What the hex?)

Here’s the rule to learn so that you can reject it properly (if you know what hex color codes are all about, skip to the next section).

这是要学习的规则，以便您可以正确拒绝它(如果您知道十六进制颜色代码的全部含义，请跳至下一部分) 。

Hexadecimal “digits” represent the 16 values included from 0 to 15, where instead of adding a “1” to the 10’s place when we pass the number 9, we keep counting higher in the 1’s place as if there were six additional digits that represented the numbers 10–15. Since we don’t have those numbers built into our keyboards, hex just uses a=10, b=11, c=12, d=13, e=14 and f=15. So that gives us 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.

十六进制的 “数字”代表从0到15的16个值，在传递数字9时，与其在数字1​​0的位置加一个“ 1”，我们继续在数字1的位置高计数，就好像还有六个数字代表数字10-15。 由于我们的键盘没有内置这些​​数字，因此十六进制仅使用a = 10， b = 11， c = 12， d = 13， e = 14和 f = 15 。 这样就得出了0、1、2、3、4、5、6、7、8、9，a，b，c，d，e，f。

Hexadecimal lets us represent 3 digit values using only 2 digits. For example: 255 becomes FF.

十六进制让我们仅使用2位数字来表示3位数字值。 例如：255变为FF。

用十六进制定义颜色 (Defining colors with hex)

Colors are created through channel mixing. When you see a color written in hex ( i.e.#AABBCC), what you’re seeing are the channel intensities for red (AA), green (BB) and blue (CC) pixels, divided from 0–255 (00–FF) steps. Zero is ‘off’, and there are 255 distinct intensity differences all the way up to full brightness.

通过通道混合来创建颜色。 当您看到以十六进制表示的颜色(即#AABBCC )时，您看到的是红色( AA )，绿色( BB )和蓝色( CC )像素的通道强度，范围为0-255( 00–FF )脚步。 零是“关闭”，一直到完全亮度为止，存在255个明显的强度差。

This amount of variation is where 16M+ color displays come from, since there are 255 × 255 ×255 = 16,581,375 different combinations you can create by varying the intensity of each channel or sub-pixel.

这种变化量就是16M +彩色显示器的来源，因为您可以通过更改每个通道或子像素的强度来创建255×255×255 = 16,581,375种不同的组合。

发生了什么可预测性？ (Whatever happened to predictability?)

In the images below, the button on the left results from the additive mixture of the three colored buttons on the right. Who’d have known that dark red, bright green and intense blue would result in a light wintergreen? And therein lies the problem with RGB. It is not at all intuitive. You can’t predict what colors were mixed together just by looking at the end color, and you can’t tell what end color you’ll get just by looking at the primary colors.

在下面的图像中，左侧的按钮由右侧的三个彩色按钮的累加混合产生。 谁知道暗红色，鲜绿色和深蓝色会导致浅冬绿色？ 这就是RGB的问题。 这一点都不直观。 您无法仅通过查看底色来预测将哪些颜色混合在一起，也无法仅通过查看原色来告诉您将获得哪种底色。

With additive light theory, #FFFFFF or RGB(255, 255, 255) (full intensity across all channels), gives us pure white light, while #000000 or RGB(0, 0, 0)(all channels off), creates blackness.

根据加法光理论， #FFFFFF或RGB(255, 255, 255) (所有通道的全强度)，给我们提供纯白光，而#000000或RGB(0, 0, 0) (所有通道均关闭)，产生黑色。

Knowing these basics about RGB now, it should be easy to understand that #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.

现在了解了这些有关RGB的基础知识，应该很容易理解#FF0000是纯红色， #00FF00是纯绿色，而#0000FF是纯蓝色。

A single, last takeaway is that whenever all channels are the same intensity (excluding black and white mentioned earlier), the end result is one of 253 shades of grey (e.g. #333333 is a darkish grey, #C3C3C3 is a lightish grey).

最后一个要点是，只要所有通道的强度相同(不包括前面提到的黑白)，最终结果就是253种灰色阴影之一(例如， #333333是深灰色， #C3C3C3是浅灰色)。

改用HSL (Use HSL instead)

If you want to make your life easier, and be able to choose colors that look good together, choose HSL or Hue, Saturation, Lightness. Period. End of article… (Well, OK. I’ll explain a little more).

如果您想使生活更轻松，并且能够选择看起来不错的颜色，请选择HSL或“ 色相” ，“ 饱和度” ，“ 亮度” 。 期间 。 文章结尾...(好吧，我会再解释一点)。

Hue is the color chroma we’re talking about: redness, greenness, blueness, orangeness, fuscianess, pinkness, etc. From 0–360 degrees, there’s a circle that starts on red, ends on red, and has all the colors of the rainbow in between.

色相是我们正在谈论的色度 ：红色，绿色，蓝色，橙色，紫红色，粉红色等。从0到360度，有一个圆圈从红色开始，以红色结束，并具有所有的颜色。之间的彩虹。

Saturation is the fullness of the color from grey to fully saturated. This is a scale from 0%–100% saturation. The less saturated, the paler the hue is, the more saturated, the more intense the hue is.

饱和度是指颜色从灰色到完全饱和的饱满度。 这是从0％至100％饱和度的标度。 饱和度越低，色相越淡，饱和度越高，色相就越强烈。

Lightness is how near to black or full brightness the color should be, also on a scale of 0%–100%. At 100% lightness, you’ve got white, at 0% you’ve got black.

亮度是颜色应接近黑色或全亮度的程度，也是0％–100％的等级。 亮度为100％时，您会变白；如果亮度为0％，则您会变黑。

This is not difficult. In fact it should just be the way.

这并不困难。 实际上，这应该只是方法 。

如何使用此信息 (How to use this info)

Starting with everything set to 0, if you only adjust the lightness, here’s what you will get.

从所有设置为0开始，如果仅调整亮度，则将得到以下结果。

Notice that for 0 lightness, it doesn’t matter what your hue and saturation are, you’ll have full black without any light.

请注意，对于0亮度，无论色相和饱和度如何，您都将获得全黑而没有任何光线。

Now, we’ll pick the 3rd button from above, and increase the saturation from 0 to 89. With Hue still set to 0, we end up with a fairly intense, fairly bright red color. When we adjust the hue alone, keeping the brightness and saturation the same, we have 360 different hues to play with.

现在，我们将从上方选择第3个按钮，并将饱和度从0增加到89。在Hue仍设置为0的情况下，我们最终得到相当强烈，相当明亮的红色。 当我们单独调整色调时，保持亮度和饱和度不变，我们可以使用360种不同的色调。

Taking these same hue values, if we adjust the saturation only, we’ll end up with 100 softer or bolder variations of each hue. Here, they’re less intense, slightly muted versions of the above colors. They have a softer feel. The closer saturation gets to 0, the more colorless or grey they’ll begin to look.

采用这些相同的色相值，如果仅调整饱和度，则每种色相最终会出现100个更柔和或更粗体的变化。 在这里，它们是上述颜色的强度较低，略微柔和的版本。 它们具有较软的感觉。 饱和度越接近0，则它们看起来越无色或灰色。

Using our third button again, if we make small adjustments to the hue, saturation and brightness together, we’ll be able to make a family of button styles that can be used for the same call to action element:

再次使用第三个按钮，如果我们一起对色调，饱和度和亮度进行少量调整，我们将能够制作出一系列按钮样式，可用于同一号召性用语：

As you can see, the principles behind HSL allow you to have fine-grained control over every aspect of your color choices without having to rely on designers or preset color tables. Most importantly, the results are somewhat predictable! If you want a brighter red, change the lightness, if you want it softer, lower the saturation, more blue? Find the hue you want it to be, and so on and so forth.

如您所见，HSL背后的原理使您可以对颜色选择的各个方面进行细粒度的控制，而不必依赖设计师或预设的颜色表。 最重要的是， 结果有些可预测！ 如果您想要更亮的红色，请更改亮度，如果您想要更柔和的颜色，请降低饱和度，再选择蓝色？ 找到您想要的色调，依此类推。

If you have the option, there’s never really any reason to choose RGB over HSL unless you need low-level control over the light intensities at the sub-pixel level. Otherwise, it makes the most sense to adjust colors in ways that center around human-perception, and not in ways that suit hardware display capabilities.

如果可以选择的话，除非您需要对子像素级的光强度进行低级控制，否则根本没有任何理由选择RGB而不是HSL。 否则，最有意义的是以围绕人类感知的方式调整颜色，而不是以适合硬件显示功能的方式进行调整。

即将在本系列中 (Coming up in this series)

Later in this series, I’ll explain how to create color themes with base, highlight, accent, and tone colors that can be used to theme entire apps or web pages, why you rarely see actual black in the world, what color combinations not to use, and more.

在本系列的后面部分，我将说明如何使用基色，突出显示，强调色和色调创建可用于整个应用程序或网页主题的颜色主题，为什么您很少在世界上看到真正的黑色，而没有什么颜色组合使用，以及更多。

Happy Coloring!

快乐着色！