17 年的时候我曾经读到了一篇关于UI颜色选择的文章： Color in UI Design: A (Practical) Framework 也写过一篇关于UI中颜色使用的文章👉 ：

今天我想要温故而知新一下， 把Color inUI Design 这篇文章汉化一下，梳理一下关于UI中颜色的选择。

对于UI设计来说， 我们会发现一个app 或网站虽然会有很多颜色， 但其实还是将一个颜色进行不同量值的调整。

Darker & Lighter Variations

我们通常会在一个界面里看到一个主色调了浅色调或者深色调

在facebook 的这个界面中， 蓝色就是主色调，搜索栏是主色调的深色调， 图标是主色调的浅色。

同学们不会天真的以为深色调就是在主色调上加上一层透明的黑色遮罩吧.. 这个深色调显然是调出来的。

Swell Grid 这个天气预告软件里面用到了多种蓝色， 这些都是通过主色调调出来的。

再来看这个常见的套路： 一个按钮的三个状态，也是由一个基础颜色演变而来。

那么问题来了， 你获得获得这些颜色？

在开始之前，想和大家分享两个简单的principle：

1. 我们一直在真实的世界中寻找参考线索，也就是说即便屏幕这个东西是假的，但是我们依然会参照真实的世界来看界面。 我们希望光线和颜色是和真实世界的情况一致的。

2. 使用HSB(hue, saturation, and brightness) 调色系统， 这是最贴近真实世界的调色模式。

真实世界的颜色变量 Real-World Color Variations

试着环顾四周，扫视房间时，你会看到多少个“颜色变量”？

阴影

你可以将阴影视作是深色的颜色变量

接下来让我们将取到的颜色放到Sketch里面， 来探索一下这个两个颜色。

亮度下调了，再来看下图

亮度也变暗了，即便在古巴也是这样。

因此我们可以得出说，当我们要调一个颜色的阴影，那只要降低其明度，增加其饱和度就行了。 虽然我们只看了两个案例，但是大家可以多做测试，可以说都是这样的。

当然在这里我们发现hue（色相） 变得有点风光，飘忽不定， 但也是有一定原理的，晚点我们来说。

规则The Rules

暗色变量 = 较高的保护度+较低的明度

现在让我们回到facebook的案例中来：

饱和度上升了， 明度下降了， 不能直接在颜色上加上一个黑色透明遮罩是因为，我们不仅希望明度下降，还希望可以增加饱和度， 如果只是单纯的加上一个黑色， 其实无济于事。

那为什么在现实世界中，深色与更高的饱和度相关？ 我没有太多的想法。 但我是这样推测的：这是因为当光的强度（亮度）超过颜色的强度（饱和度）时，颜色必定会被洗掉-反之亦然。

听上去可能有点BS(bullshit）,但的确有那么点道理不是么~

浅色变量 = 较低的保护度+较高的明度

现在你可以猜出如果要得出浅色的变量套路是怎样的.

显然我们可以再向前一步， 当我们降低所有的饱和度，明度调到最大，会发生什么？

您可以将调出较为浅的颜色视作是添加了白色。 在Sketch里，有两种非常简单的方法可以为颜色添加白色：

1. 减少元素的不透明度（如果是白色背景）
2. 在元素顶部添加半透明的白色层

最重要的事

降低亮度和增加饱和度会产生较深的颜色变化。增加亮度和降低饱和度可以产生更明亮的颜色变化。

记住这个规则后我们就可以基于一个颜色调出许多颜色变化。

公平地说，并非每个设计都100％地遵循此规则。 在上方的Harvest网页菜单中，选定状态仅为较低的亮度（饱和度不变），而悬停状态仅为较低的饱和度（亮度不变）。 但是，我们已经研究了色彩在现实世界中的工作方式，并且我们知道为什么这些设计看起来不错是因为它们近似于我们提到的原理。

那色相呢？

谈到近似此处列出的原理时，我们应该谈论色相。 我也在上面说过：色相在整个饱和度和亮度相反的方向上都是次要的，因此在进行颜色调整时，通常可以完全忽略它。

首先，每种颜色都有一种“感知的亮度”。 这称为光度（ luminosity）。

基本图中的黄色和蓝色都有着百分百的明度但是哪个颜色更亮？

当然是黄色，对不对

即使亮度和饱和度保持不变，仅改变色相，你也将获得一定范围的亮度或可感知的亮度，我们将其测量为0到100之间的值。

这些是我们在30°间隔内的色相，所有色相均为100％饱和度和100％亮度。

这是我们复制的色相，进入“光度”混合模式 Luminosity blend mode（可在Sketch上调节，在白色背景上- ），并覆盖最终的灰色亮度。 这使我们可以测量原始颜色的亮度。

在“亮度混合”模式下，亮灰色表示高亮度，而暗灰色表示低亮度。

现在我们把这个放到一个图中看下

这种特殊的模式回答了额我们上面的问题。还记得调节阴影的时候么，色相会向下移动，有时会向上移动？为什么这样呢？

首先，请注意该图具有三个最大点和三个最小点。低点是红色，绿色和蓝色。高点是青色，品红色和黄色。

这些特殊的颜色会响吗？是。 RGB和CMY是流行的色彩系统，但我们暂时将其忽略，因为它会使你误入歧途。

重要的一点是：如果不计算饱和度和亮度，将色相移向红色（0°），绿色（120°）或蓝色（240°）将降低颜色的亮度或可感知的亮度。并且将色相移向黄色（60°），青色（180°）或洋红色（300°）将增加颜色的感知亮度。

诀窍是仅使色相的调动与饱和度和亮度的调动相匹配。如果要变暗，请将色相移向红色（0°），绿色（120°）或蓝色（240°），以最接近的为准，反之亦然（青色，品红色和黄色）（较浅）。 （当然，这是假设你也在降低亮度并增加饱和度）

这就是为什么珊瑚墙上的阴影会在色相中向下移动的原因-它正朝着0°的红色移动，这是最接近21°的最小点。

这就是为什么蓝绿色墙壁上的阴影会在色相中向上移动的原因-它正朝着240°的蓝色移动，这是最接近194°的最小点。

总结

因此，当涉及到颜色变化时，请问问自己：我是否只需要对已有颜色进行较浅或较深的变化？

如果您要使用简洁明了的方法，答案当然是“是”

• 调节暗色（Darker Variation）：

明度： 减少

饱和度： 增加

色调选择靠近最近的亮度最低点（红，绿，蓝）（可选）

• 调节亮色(Lighter Variation):

明度： 增加

饱和度 ：减少

色调选择靠近最近的亮度最高点（青色，洋红色，黄色）（可选）

实操

我们来看一个案例

我们想要在这个案例中添加一个颜色， 很显然我们需要给这个按钮一点颜色。

比如黄色。

但显然我们看不见字了。 那如何选这个按钮上字的颜色呢 ？

直接选择一个UI配色里最案的颜色么？当然不是~ 我们要用上这次学到的技能

根据我们这次学到的技能，我们需要加上一点饱和度，调低一点明度。

这就让我们获得了一个咖啡色的颜色。

还有一个方法， 我们可以用这个插件来直接获得我们想要的理想色，调出来其实和我们手动的差不多。 Accessible Color Generator https://learnui.design/tools/accessible-color-generator.html

当时别忘了， 我们这次还谈到，可以调节色相~

我们正在做一个更暗的变化，所以我们想将色相向最接近的方向滑动–0°（红色），120°（绿色）或240°（蓝色）。

在这个情况下，51°的黄色色调最接近红色。 因此，为了使文本变暗，我们将减小色相，将其滑动到接近0°的位置。

在文本中是这样的

现在这个18°的色相是橘红色。 如果你为此重建颜色，您会非常清楚地看到它。

对于这个特定的示例来说可能有点麻烦，但是我想在此界面中添加一些zing，因此色相移位是实现此目的的绝妙方法。

另一种非常简单的添加zing的方法是渐变。

让我们把紫色的侧边栏变成紫色渐变吧！

简单的步骤即可制作出漂亮的渐变效果：

• 使用你的基本色
• 找出较深的变量，包括色相变化
• 将较暗的变化放在底部（因为光线来自天空上方）

250°的色相需要调暗至240°。

此外，我们将给较暗变量的较高的饱和度和较低的亮度。

火红的黄色按钮和凉爽的紫色渐变侧边栏–一切都简单地完成并得到了简单的解释。