这是颜料的精确混合，所以在全球内它都是相同的颜色。你无法在你的家用打印机上打印出潘通色，但你可以查看那官方的潘通色卡作为参考，专业的打印机会为你获取特定的潘通色，并将颜色添加到机器上进行打印。因此，打印潘通色通常比较昂贵，这就是为什么它主要用于需要在不同媒体上都相同的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设计中。

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

颜色查找工具

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

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

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

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

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

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

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

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

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

使用RGB色相环

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

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

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

单色

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

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

类似色

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

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

互补色

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

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

分离互补色

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

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

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

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

色相、色彩、色度、色调

06使用颜色变量

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

调色板

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

颜色变量

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

figma的色彩插件

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