颜色是UI设计的主要元素之一。它可以将您产品的第一印象从精致和酷转变为疯狂和狂野。这不是关于混合漂亮的颜色；而是关于创建一个系统。但是，让我们从最基本开始，努力达到专业水平：

颜色值。什么时候用什么。

颜色可以以不同的方式记录下来，您可能会遇到的最常见的颜色是Pantone、CMYK、HEX和RGB。我们只在屏幕设计中使用HEX和RBG，但了解差异仍然至关重要，因为您很可能在线上和线下与品牌打交道。

Pantone  用于打印

它是墨水的精确混合，所以在全球范围内颜色相同。您无法在家用打印机上打印Pantone，但您可以查看官方的Pantone彩色书作为参考。专业打印机会为您获得特定的Pantone，并将其添加到他们的机器中进行打印。因此，打印Pantone颜色通常更昂贵，这就是为什么它主要用于需要在不同媒体上匹配的徽标或品牌元素，其余的留在CMYK中

CMYK 用于打印

混合四种颜色，青色、洋红色、黄色和键（黑色），是所有其他打印颜色的基础。这些也是您家用打印机和专业印刷厂的四种颜色。

RGB  用于UI 设计

RGB代表红色、绿色和蓝色。显示器发出这些颜色，所以它们是由光而不是墨水制成的。光的色谱比印刷品大。由于系统不同，印刷和屏幕颜色永远不会100%匹配。只要调色板内部和谐，这就没有问题。只要意识到这一点。

在UI设计中提供RGB值时，范围从0到255，例如R= 255，G =255，B=255或RBG=255,255,255是白色，而RGB= 0，0，0是黑色。

RGBA  用于用户界面设计

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

因此，例如RGBA = 255、255、255、0.5将是白色，透明度为50%。

HEX用于UI设计

用这个！RGB很好，但记下来有点乏味，所以HEX只是它的一个简短形式，它将始终显示与RBG对应物完全相同的颜色。由于其字符串格式，处理、复制、粘贴和共享更容易一些。

十六进制由6位数字组成，前面有一个散列。前两位数字是R，第二位是G，第三位是B。这就是为什么RGB和Hex是相同的。

注意：印刷和屏幕设计中的颜色永远不会完美对齐，因为它们以不同的方式创建：通过混合墨水打印，通过结合光线进行屏幕。重要的是让每个调色板在自身内部和谐。

在打印和屏幕之间转换颜色

有时，您可能会被赋予打印颜色来转换您的UI设计。或者你只是一个非常好的人，想帮助印刷设计师进行转换。

有许多在线转换器，但多年来，脱颖而出的是使用所谓的Pantone颜色桥的官方Pantone转换器。要使用数字版本，请转到Pantone颜色查找器页面。

在这里，您可以选择输入Hex、RGB或CMYK，并建议使用匹配的Pantone。单击它，您将被告知所有相关的颜色值。如果您想将Pantone转换为Hex，只需使用左侧菜单中的“Pantone到Pantone”部分（是的，措辞确实令人困惑，但它有效）。

提示：如果您要从屏幕转换为打印，请尝试在记录之前获取物理Pantone样本来比较颜色。任何设计团队或专业印刷店都应该拥有它们。

UI设计中有多少种颜色？

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

您仍然可以拥有这些颜色的变体（稍后将详细介绍变体）。正如您稍后将了解的那样，当选择更充满活力的设计时，它更多的是关于颜色的组合，而不是数量。

话虽如此，如果你有一些好主意，需要很多颜色，那么请随意这样做。规则是要打破的。

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

你可能有挑选和混合颜色的自然天赋。那绝对没问题，那就继续用吧。但是，如果您对匹配颜色感到有点不安全，您可以使用一些技术。

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

我们使用RGB色轮及其12个颜色段（由所谓的原色、次色和三色组成）。我把我的简化为几个部分，只是为了使示例更容易。通常，您会在设计软件中看到带有柔和颜色过渡的轮子来选择颜色。Adobe还有一个很棒的色轮工具，可以帮助您设置颜色。

单色

选择你的颜色，然后走向车轮的中心，以获得可爱的阴影。这种颜色组合创造了一个非常微妙和精致的外观。

类似的

通过这种方法，我们选择相邻的颜色。你可以在色轮中以任何一种方式移动。它们需要在90度角内，你应该得到一个好的结果。这种方法增加了一点活力，而不会失去优雅。

互补的

如果你正在寻找一些充满活力的东西，这就是你要走的路。从基本颜色开始，然后从车轮的另一侧添加互补颜色。您可以将此与添加更多单色颜色完美结合

拆分互补

或者进一步推动，添加类似的颜色以获得更大的活力。这被称为拆分互补方法。

这三种方法应该可以帮助你建立调色板，你可以查看更多的方法，如三元和四元，但它们需要更多的经验。

色相、饱和度、明度、色调

一旦你找到了你的颜色，这并不意味着你只坚持那些，它们是基础，但你仍然可以玩它们。了解调整颜色的不同方法很重要，只是不要过度。

色调是纯色，没有任何阴影色调。因此，如果我们绕过色轮的外部，我们会改变色调。

添加黑色的阴影色调。

添加白色的色调

添加灰色的色调

使用颜色变体

你真正应该玩的颜色是为了更深入一些，是所谓的变体。您可以手动更改色调，也可以使用材料设计调色板等工具。

鉁忥笍注意：圆圈上的钴戥表示文本颜色在背景前是否清晰可辨。白色表示白色文本在背景颜色上清晰可辨。黑色表示黑色文本在背景颜色上清晰可辨

添加您的十六进制值，它将为您创建变体。您可以根据设计需要使用尽可能多或尽可能少的变体。我通常使用3到5个，但最多9个完全没问题。他们也不需要成为确切的邻居，你可以为你的设计选择你喜欢的对比度，并省略一些。如果你想知道这些数字，我会在下一节中解释关于命名

Figma的色调插件

我最近发现了这个名为Figma色调的惊人插件，它在您的文件中创建所有色调，非常甜蜜。

以正确的方式命名颜色

命名颜色

因此，一旦您选择了颜色和变体，您将在样式表和/或设计系统中记录它们。

不要在颜色本身后命名颜色，如红色和蓝色，但使用通用的东西，因为颜色可能会随着时间的推移被替换和调整。

你用什么名字并不重要。它们只需要描述性和一致性，例如背景、灰色等，可以被称为中性。然后你有一个主要颜色和次要颜色，我的次要颜色通常是我的高光颜色。

命名变体

现在，您的变体是围绕主要或次要颜色构建的。因此，他们没有得到自己的名字，但通常需要通过数字来识别他们为变体。在材料调色板工具中，我们用100的使用步骤创建了它们，我也喜欢使用。不过，你也可以使用10的步骤。

对于我的基本颜色，我喜欢使用值500，然后在我需要时围绕它创建其他变体。

然而，不要把它们命名为1 2 3 4等，原因是你可能想在以后的某个时候在两者之间添加变体，然后它就会变得混乱。因此，给自己一些空间来准备不可能发生的事情。

不要忘记错误、警告、信息和成功的系统颜色，通常是红色、橙色、蓝色和绿色。如果你愿意，你可以调整它们以搭配你的品牌颜色。只要确保错误保持红色，永远！

添加“n-color”，使其易于访问！

另一个值得添加的东西是所谓的彩色，这意味着颜色顶部使用的颜色，如排版或图标。有意识地使用彩色有两个主要优点

1. 您被提醒检查颜色对比度的可访问性。要么在设计软件中使用插件，要么使用像这样的在线对比度检查器。拥有这个不好。顺便说一下，法律要求您根据WCAG法规可以访问您的页面。

1. 假设你的次要是深灰色，而你还没有定义颜色。通常，这种颜色也会变成一个变量，并用作文本颜色，现在，如果你把它改成亮蓝色，那么你需要更改设计文件中的所有文本，甚至代码。因此，保持事物的干净和简单。

自己用Figma试试吧！

您可以在Figma中下载免费的颜色样式表。亲自尝试一下。

60、30，10颜色分布规则

除了你使用什么颜色外，一个重要的部分是你如何使用它们。60,30,10规则是一个很好的经验法则。这意味着您将基本颜色用于高达60%的设计，然后使用30%的主要颜色，为了突出显示，您将次要颜色用于10%，例如，行动号召（CTA，如按钮）。

您的底座为60%，次要颜色为30%，CTA的主要亮点颜色为10%

这显然是颜色分布的“eeling”，而不是精确的测量。颜色可以在此解释为一种颜色或一种颜色及其变体。您可以玩这个，但是，请确保您的CTA始终相同且脱颖而出。