如何科学地建立色彩体系？我总结了这5个方面！

最近，我在想一个问题：如果设计师负责一个不受现有规范约束的新产品，我们应该如何定义产品的颜色系统？一些设计师可能会根据自己的主观想法来定义颜色值，认为这种颜色在界面上很好看，但我认为这还不够标准化，更应该考虑整体的通用性和科学性。

基于这个问题点，我在网上查看研究了一些资料和文章，参考了一下 Ant Design 和 Material Design，我学到了一些定义颜色 ID 来看看理论知识吧。

色彩

色彩是设计系统的重要组成部分，可用于品牌意识、信息水平、操作指南、互动反馈等场景。在细分层面，颜色可分为主色、辅助色和中性色。

当设计师调整颜色时，建议使用 HSB 模式，调整颜色更直观，符合心理预期，因为人脑也通过这种模式来区分颜色。

其中，H 代表色相，S 代表饱和度，B 代表亮度。色相是区分不同颜色的标准，通过 360°圆形色环用来取色，每次都代表一个色相。饱和度是指颜色的纯度。饱和度越低，越向白色过渡。亮度是指颜色的亮度。亮度越低，越向黑色过渡。

这是常用的软件 HSB 模式调整颜色截图，帮助您理解。

主色

主色一般与产品的品牌色相关，很大程度上决定了产品的整体色调和视觉风格，常用于主按钮、文字亮点、强调操作等界面场景。

产品 1.0 版本以上，Logo 一般都有定义好的品牌色，界面设计中的主色与品牌色保持一致，可以传达统一的理念。如果 0 新产品的开始还没有定义 Logo 对于品牌颜色，界面应首先设计和开发。此时，我们可以考虑产品行业的特点、产品概念、产品名称和用户特征，提取关键词和情感板，从而提取多个颜色系统，最终与多角色沟通，确定主色系统，避免后续反复调整的成本。

在确定了主色系统后，设计师应该如何定义具体的色值？大多数设计师可能会直接吸收相同颜色系统的大型工厂产品的颜色值，然后通过微调参数来确定差异。这确实是一种聪明的方法，毕竟，不容易出错。但我认为设计师需要有自己的思维过程，所以他们对国内外大型工厂产品的主要颜色进行了研究和分析，并总结了一些共同点和差异。

我发现 Apple 系列和国内产品的主色倾向于饱和度和亮度较高的颜色，基本分布在横向和垂直三等分的右上角。我认为主色值可以参考这个区域。

看下面产品的字色、按钮色、深色模式的效果。

谷歌和微软产品倾向于亮度较低的颜色。从设计层面来看，颜色有点暗，有点脏，不推荐。

我对外国设计师的视觉审美了解不多，研究过 WCAG 2.1 在没有障碍标准之后，我发现他们正在考虑障碍（色盲）用户，主色符合 WCAG 2.1 的 4.5:1 最小对比度（AA 等级)。这个标准涵盖了使用者 Web 各种内容更容易访问的建议，遵循这些标准会让更多的残疾人更容易获得网站内容。从对国产产品的分析中，我只发现知乎的主色符合这个标准。

这实际上引发了我们的思考，视觉效果和无障碍人群体验，哪一个更重要？我认为这两个层次都很重要，但在实际场景中，建议设计师结合品牌基调和视觉效果来定义特定的颜色值，并在美学、可读性和可用性之间取得平衡。请注意，亮度不应该太低，颜色会更脏，不符合年轻用户的审美观。

如果我负责一个产品，并且已经确定蓝色系统是主要颜色，我会选择更明亮的颜色值，以确保文本、按钮、深色模式和其他常见场景的可读性和可用性。颜色值为#247FFF，以后将使用辅助颜色。

辅助色

辅助颜色可用于特定功能、状态反馈、应用图标等场景，最常用于反馈的成功、失败和警告状态。

基于主色，我们如何定义辅助色？我总结了一些小方法。

1. 基于主色的色相，差值为 15°，围绕 360°色环提取 24 色。（差值 15°颜色属于同类颜色的临界点，有利于我们在不失去想要颜色系统的情况下划分色度层次)

2. 参照常用的配色理论：相似色、相邻色、三分色、互补色，得出部分色值。

3. 结合界面场景和使用效果，删除和补充颜色，最终确定所需的辅助颜色。(建议最多 12 避免色彩过多，不利于设计师的理解和使用)

4、将辅助颜色与主要颜色进行比较，以校正视觉感官的亮度。（虽然颜色的饱和度与亮度相同，但不同色调的视觉感官亮度不同。绿色、黄色和青色实际上看起来很浅，所以我们需要手动调整）

校准方法：将纯黑色层叠加在颜色上。如果选择层模式的色调，可以直观地看到无色视觉感官的亮度。可以使用相差较大的颜色 5 调整差值的饱和度或亮度，最后根据效果进行微调。(色相的差值可以被调整 5 饱和度和明度也适用于整除)

调色板

为了满足界面对颜色的需求，需要延伸主色和辅助色，建立不同梯度的调色板。

这里有两种计算方法：

1. 浅色调色板依次叠加在颜色上 20%、40%、60%、80%、90%不透明的白色；深色调色板依次叠加在颜色上 20%、40%、60%、黑色，80%不透明。

2. 浅色调色板，色相（H）色相依次差通常具有较高的光度 2，饱和度（S）依次减少 15，明度（B）依次增加 5；深色调色板，色相（H）色相依次差通常具有较低的光度 2，明度（B）依次减少 15，饱和度（S）依次增加 5。（Ant Design 和 Material Design 调色板也添加了色相旋转)。

从对比效果的角度来看，建议使用第一个 2 使用各种方法 HSB 模式值递减/递增得到完整的渐变色板，颜色更加明亮透明。Ant Design 官网还具有在线生成调色板的功能，类似于第二种方法的逻辑，可以快速生成，大家都可以使用。

主色和辅色调色板最终生成，效果如下。

中性色

中性色包括黑色、白色和灰色。中性色的合理使用可以使界面信息层次清晰，有助于浏览体验。常用于字色、控件色、背景色的场景。

由于纯灰色看起来很脏，人们对蓝灰色有更好的阅读体验，建议在桌面上使用灰色和蓝色。

计算方法：

1. 根据调色板的方法，选择与主色视觉感官明度相同的灰色，建立梯度色板。

2. 将蓝色调色板的不透明度调整为 灰色调色板的不透明度为10% 90%，两个色板叠加，最后吸收颜色，加入黑白色板，确定从白到黑 12 种颜色。

最后，我们确定了产品的颜色系统，界面中使用的颜色需要遵循调色板的颜色值和一致性设计。

总结

以上是设计系统中建立色彩系统的思考和总结。建议设计师在调整颜色时使用 HSB 模式，调整颜色更直观，符合心理预期。主色需要结合品牌调性和视觉效果来定义。 ID 色值在美感、可读性和可用性之间平衡。请注意，亮度不应太低，颜色会更脏。辅助色、调色板、中性色定义 ID 在色值过程中，建议遵循一定的色彩理论标准，科学地定义色彩，更具说服力。

还有很多不足，继续学习。

参考文献：

欢迎关注作者微信微信官方账号:「ALEI的设计思维」