色彩规范

基本介绍

颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感。在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。

色彩的作用

组成

在真实的设计场景中，对色彩的复杂度要求是非常高的。色彩规范应该基本覆盖一套产品对用色的所有场景。

色彩系统的原则

理性的：我们在选色时，尽可能避免个人的设计风格，减少配色的主观性，理性有逻辑地选色。

可扩展的：使用这种选色方法可以扩展生成更多的颜色，以适应不同的变化。

和谐的：色彩规范中的颜色互相搭配使用时，应该是和谐的。

如何制作色彩规范？

在开始制作色彩规范之前，先介绍一下 HCL 色彩空间。

HCL (Hue-Chroma-Luminance) 与 RGB、HSB 一样同属色彩空间的一种，因为最早由国际照明协会 CIE提出，又被称作 CIELch。

目前大家常用的色彩数值可视化的色彩空间是 HSB，设计师可以通过 H(色相)，S（饱和度，B（明度）三个数值来量化色彩，实现理性配色。

但是传统的 HSB 色彩空间的缺点是，明度数值是基于计算机元件而言，而非人眼。另外，计算机的明度与人眼感觉到的明度并非线性匹配，这就导致在不同颜色中，即使色相相同，我们感觉到的明度（即感官明度）也是不一致的。

而 HCL 就避免了这个缺点，在 HCL 中，只要两种颜色的 L 相同，感官明度就是相同的，HCL 可以完美的量化我们对色彩明度的感觉。但是目前主流的设计软件基本上不支持 HCL 色彩空间配色，因此要借助插件或者网站。这里推荐 Figma 的一个插件：HCL color。➡️ 传送门

落地

落地分为两个方面：设计方面和开发方面。

设计方面

将颜色生成样式库，并规定设计同事不可以手动调色，只可以从设计规范中取色。

开发方面

在前期与开发同事沟通，将每个颜色定义为一个变量，在代码中不使用具体的色值，而是例如 red-100 的的色值，这样做的好处是：

在需要替换某个色值时，只需要在底层对变量改变即可实现全局的更改，提高了很多效率。 开发同事完全从库中取色，保证了色彩的准确性，提高了设计稿的落地率。