颜色是用户界面设计中的主要元素之一。它可以将你的产品的第一印象从复杂的酷变成疯狂和迷乱。它并不是要混合漂亮的颜色，而是创建一个色彩系统。让我们从最基础的地方开始，然后努力上升到专业水平。

01

色值：什么时候使用色值？

颜色可以用不同的方式记录下来，最常见方式的可能是潘通色、CMYK、HEX和RGB。虽然我们在界面设计中只使用HEX和RBG，但了解它们之间的区别还是非常重要的，因为你很可能会在网上和线下与某个品牌打交道。

Pantone → 用于打印

Pantone色卡

图片来源：Pantone官网

这是颜料的精确混合，所以在全球内它都是相同的颜色。你无法在你的家用打印机上打印出潘通色，但你可以查看那官方的潘通色卡作为参考，专业的打印机会为你获取特定的潘通色，并将颜色添加到机器上进行打印。因此，打印潘通色通常比较昂贵，这就是为什么它主要用于需要在不同媒体上都相同的logo或品牌元素，其余的都是用CMYK。

CMYK → 用于打印

CMYK

混合这四种颜色，青色、品红、黄色和黑色，是所有其他打印颜色的基础。这也是家用打印机和专业打印机中的四种基础颜色。

RGB→ 用于UI设计

RGB

RGB代表红、绿、蓝。显示器会显示出这些颜色，所以它们是由光而不是颜料构成的。光的颜色光谱比印刷品大。由于它们的系统不同，打印出来的和屏幕显示的颜色永远不会100%匹配。这不是问题，只要调色板本身是对的，只是需要提醒这一点。

在用户界面设计中给出RGB值时，它的范围是0-255，例如，R=255，G=255，B=255或RBG=255,255,255是白色，而RGB=0，0，0是黑色。

RGBA→ 用于UI设计

与RGB相同，A代表一个额外的alpha通道。Alpha调节透明度，从0.0（完全透明）到1.0（完全不透明）。

例如，RGBA = 255, 255, 255, 0.5是具有50%透明度的白色。

HEX → 用于UI设计

用这个吧！RGB的形式不是不能用，只是记下它有点繁琐，而HEX（十六进制）是RGB的一个简短形式，它显示与RBG数值对应的完全相同的颜色。由于它的字符串格式，HEX更容易记住、复制、粘贴和分享。

HEX由6位字符组成，前面有一个井号。字符前两位代表R，三四位代表G，五六位代表B，这就是为什么RGB和HEX对应的颜色是相同的。

注意：印刷品和界面设计中的颜色永远不会完全一致，因为它们是以不同的方式生成的：印刷是混合油墨，界面设计是混合光的色谱。

02在打印和屏幕显色之间转换颜色有时你可能会需要打印的颜色来转换到你的UI设计中。

网上有许多在线颜色转换器，但多年来，最突出的是潘通官方的转换器，它使用所谓的潘通色彩桥梁。如果要使用数字版本的颜色，

Pantone颜色查找工具

在这里，你可以选择输入HEX、RGB或CMYK，然后会出现一个建议的、比较匹配的潘通色。点击这个系统建议的潘通色，你还会得到其他比较相关的颜色值。如果你想将潘通色转换为Hex，只需点击左侧菜单中的“Pantone to Pantone"（虽然这个措辞有点令人困惑，但它是有效的）。

✏️提示：如果你要把屏幕颜色转换为印刷品颜色，可以的话，在转换前用真实的潘通色卡来对比颜色。任何专业的设计团队或专业打印店都应该有。

03UI设计中有多少种颜色？

三色也是室内设计中的一个概念

尽管在UI设计中没有技术限制，但最好将颜色限制在两到三种内。

当然，你仍然能够使用这些颜色的变化（下文会有更多关于变化的内容）。但你很快就会知道，当你想要一个更有活力的设计时，更重要的是颜色的组合而不是使用的颜色的数量。

话虽如此，如果你有一些很棒的想法，需要使用大量的颜色，那就尽情去做吧。规则是用来被打破的。

04如何在UI设计中选择、混合和搭配颜色？

在挑选和混合颜色方面你可能有点天赋。但如果你对配色感到有点不放心，这里有一些技巧你可以使用。

使用RGB色相环

我个人是不相信颜色联想的，如蓝色是平静的，红色是充满活力的。因为这是随着文化的变化而变化的，它更多的是关于你创造情绪的颜色组合方式。

我们通常会使用RGB色相环，它有12个色块（由所谓的原色、第二色和第三色组成）。为了让例子更容易理解，我把色相环简化为几个部分。通常，你会在设计软件中看到色相环，它有一个柔和的颜色过渡，让你来挑选颜色。Adobe也有一个很棒的色相环工具，可以帮助你设置颜色。

单色（某个色彩的明度变化）

单色

挑选你的颜色，然后往色相环中央递进，你会得到一个可爱的渐变。这种颜色组合可以创造非常微妙和复杂的外观。

类似色（色相环中距离基色30度的颜色/在色相环上90度角内的色）

类似色

在色相环中任意一个90度内我们能得到类似色。用这种方法挑选颜色能在不失优雅的情况下为你的设计增加了一点灵动感。

互补色（色相中距离基色180度的颜色）

互补色

如果你正在寻找一些充满活力的元素，那么这就是你要做的。从一个基色开始，从距离基色180度的地方找到互补色。用这个方法你可以把基色和更多单色结合起来，效果很不错！

分离互补色（采用对比色中一色的相邻两色，组成三个颜色的对比色调）

分离互补色

在互补色的基础上，你可以更进一步加入一个类似色让你设计更有活力。

这三种方法应该可以帮助你创建你的调色板，还有更多的方法，例如对比色法（triadic）和矩形分割法（tetradic），你可以去看看，但它们需要更多的经验。

05玩转色相、色彩、色度、色调

确定了你的颜色后，并不意味着你只能用这些颜色，它们是基础，你仍然将它们玩出花样。了解调整颜色的不同方法很重要，但千万不要太过度。

色相、色彩、色度、色调

• 色相 → 是饱和度和亮度都为100%的颜色
• 色彩 → 是纯色与白色度组合产生的颜色
• 色度 → 是纯色与黑色度组合产生的颜色
• 色调 → 是纯色与灰色度组合产生的颜色

06使用颜色变量

如果想要增加一点层次感，你真正应该会用的是颜色变量。你可以手动改变色调，或者使用像MATERTAL DESIGN 调色板这样的工具。

MATERTAL DESIGN 调色板

✏️注意：圆圈上的“P”表示文本颜色此背景色中是否易读。白色表示白色文本在此背景色上易读。黑色则表示黑色文本在此背景色上易读。

颜色变量

添加十六进制的色值，工具会为你创建变量。你可以根据你的设计需要使用任意多或少的变量。我通常用到3到5个，但最多9个也完全可以。它们也不需要是精确相邻的，你可以为你的设计选择你喜欢的对比度，挑选一些。如果你对上面这些数字感到迷惑，在下一节我会解释颜色命名的问题。

figma的色彩插件

我最近发现了这个神奇的插件：Color Shades for Figma，它可以在你的文件中创建所有的颜色色调，非常贴心。

图片来源：Figma社区

07以正确的方式给颜色命名

颜色命名

因此，一旦你选择了你的颜色和变量，你可以把它们记录在一个样式表或设计系统中。

不要用颜色本身（红色、蓝色）来命名，而是使用一些通用的色值，因为颜色可能会随着时间的推移而被替换和调整。

颜色命名

你使用什么名字来命名并不重要，这些名字只需要具有描述性和一致性，例如，背景色、灰色等可以称为中性色。然后你有一个主色和一个副色，我的副色通常是我的高光色。

颜色变量命名

你的颜色变量是围绕主色或副色建立的。因此，它们没有自己的名字，但它们需要被区分，通常是通过一个数字。在调色板中，我比较喜欢用100、200、300...来命名。不过，你也可以使用10、20、30...。

颜色变量命名

对于基色，我喜欢用500命名，然后根据我的需要在它左右创建其他颜色。

但是请注意，不要将它们命名为1、2、3、4....。因为如果你在未来的某个时候想在这之间添加其他颜色，就会变得很混乱。所以，给自己留出一些空间，方便应对各种可能发生的情况。

颜色样式表

✏️别忘了表示错误、警告、信息和成功的系统颜色，通常是红色、橙色、蓝色和绿色。如果你愿意，你也可以调整它们来搭配你的品牌颜色，只要确保用红色标出错误就行了。

08添加“On-color"，让它具有可访问性！

另一个值得加入的东西是on-color，这意味着在另一个颜色之上使用的颜色，如文本或图标。有意识地使用on-color有两个主要好处：

加入on-color

1. 你会时刻被提醒检查颜色对比度的可读性。要么在你的设计软件中使用插件，要么使用像图中那样的在线对比度检查器。顺便说一下，根据WCAG的规定，你必须要让你的页面具备可访问性。

检查对比度的可读性

2. 比方说，你的辅助色是深灰色，而你还没有定义一个on-color。通常情况下，这个颜色会被做成一个变量，并被用作文本颜色。现在如果你改变这个颜色，比如变成亮蓝色，那么你需要改变你设计文件中的所有文本，甚至是代码。所以用上on-color，让事情保持的简洁和简单。

09自己用figma试试吧！

你可以在这里下载Figma的免费颜色样式表，自己尝试一下！

Figma颜色样式表

1060:30:10颜色分布法则

颜色分布规则

除了使用什么颜色之外，还有一个重要的部分是如何使用它们。60:30:10规则是一个很好的经验法则。这意味着在设计中你最多使用60%的主色，30%的辅助色用来突出内容，10%的地方使用强调来引导用户行为（如CTA、按钮）。

60%为主色，30%为辅助色，10%为CTA的强调色。

这是一种颜色排布的“感觉"，而不是精确的测量。在此，颜色可以是一种颜色或一种颜色及其颜色变量。你可以尝试一下，但是，要确保你的CTA始终是一致并且是突出的。

60:30:10规则

正如图中所看到的，运用这一法则你能得到有相当厚实的基础并能让人真正注意到CTA的页面。