如何4步建立系统级色彩体系？来看京东高手的方法！

其实很多文章都详细介绍了色彩体系的推导。本文主要梳理了整体流程经验，补充了技术方法与色彩模型的差异。

相关干货：

前言：

本文简要介绍了色板生成、检验和应用的过程方法，包括主流的基准色选择、计算方法、补充色彩空间的底部差异以及 Tokens 结构。好吧，那就开始吧~

一、取色

1. 主色:从产品或品牌主色开始

注：以个人项目主色为案例，早期产品色为基础 HSB 选择颜色模型的主色

配色：品牌/产品要传达的调性

以拾取 24 色为例：H 360/24=15°递进，Brand Blue H218°。

配色方法：1、基于品牌传递的调性；2、基于相邻色、对比色和互补色。

配色类型:自定义(6)、8、12、16...）

2. 检查:主色保持视觉感官一致

保持视觉感官一致，适合长时间浏览和阅读。纠正饱和度 S 与亮度 B，HSB（brightness）亮度一致不能保证视觉感知一致，需要引入 Photoshop 图像灰度模式或 Lab 色彩空间下的亮度 L（Lightness）来测试一下。在保证主色主观舒适度的基础上，以品牌色亮度为基准，尽可能温和地过渡亮度，纠正过度跳跃的主色，从而衍生出接近视觉感官一致的全色色板。

二、延展

演算 1.0：透明叠色

可操作性快，色彩过渡平均。假设不以纯白纯黑为起点和终点，则需要确定最小起点值 确定95%(自定义) 11 颜色(自定义)，白色步幅为 n=5(自定义)黑色步幅 n=5(自定义)，得出 95%/n=19%。

演算 2.0：等序差值

操作简单，计算规律 S 值与 B 值。同样，如果不以纯白纯黑为起点和终点，则需要确定最小起点 Smin=5%(自定义)；Smax=100%(自定义)；Bmax=100%(自定义)；Bmin=浅色步幅为20%(自定义) n=5(自定义)，深色步幅为 n=5（自定义）。如果调色板被视为二维坐标轴，我们有主色坐标、深色坐标和浅色坐标，三个坐标点之间的平均值计算，一个衍生步幅坐标点。

通过这个规律，那么就可以使用了 Numbers 建立一个简单的计算工具，依靠公式修改基准颜色 S 值与 B 值，计算延伸完整的深浅色板。

演算 3.0：曲线拟合

依靠曲线函数，各种过渡变化。在直线的基础上，引入线段曲率和点速，也可以使用常用的曲线函数：EaseIn；EaseOut；EaseInOut 等等。曲线色梯相对难以自行推导，需要依靠工具生成。

三、检验

1. 检验色板：视觉感官的一致亮度

当然，除了亮度检查，还需要做 WCAG 2.1 标准下的对比度检验。

与直线生成的色板相比，曲线函数的优点可以生成更接近亮度一致性的色板，但仍然不能完全解决这个问题，所以问题是在颜色模型下吗？

2. 两种颜色模型的底层差异

追求一致亮度的视觉感知体验，目前涉及软件层面的色彩部分，几乎都是基于 RGB 或者 RGB 从色彩模型衍生出来的色彩空间。RGB 三色光叠加的原理发光元件是基于计算机显示技术开发的一种颜色模型。

事实上，发光元件的亮度与人眼感知的亮度有很大的不同。所以基于人眼测量的颜色模型就像 Lab、HCL 最新的谷歌 HCT，常用的 Photoshop 图像灰度模式与 Lab 中的 L 都是基于人眼测定的亮度 Lightness 通道。

下图可以直观地感受到两种颜色模型之间的差异，尽管它们都有相同的亮度 Lightness，但舒适性在视觉感官体验上存在明显差异。

这里补充颜色模型差异的主要原因是软件产品的服务对象是人本身，所选择的颜色模型应尽可能接近人眼感知层面的颜色模型。基于 HSL、HSB 产生的颜色也可以通过转换关系转换成 Lab、HCL，但由于色域范围不一致，颜色会出现不兼容的情况。

换算关系：sRGB(HSL/HSB) → linearRGB → CIEXyz → CIELab → CIELch， 在 W3C（15. Sample code for color conversions）具体的转换公式代码在文档中给出。

四、应用

工具资源

对比度检测 Color.review WCAG2.1： https://color.review/透明度叠加工具 Tint and Shade Generator： https://maketintsandshades.com/直线等亮度工具 chroma.js palette helper： https://gka.github.io/palettes色曲线工具 ColorBox by Lyft Design(搭梯子使用)： https://lyft-colorbox.herokuapp.com/

色板生成工具

基于 HSL/HSB

Eva Design System: Deep learning color generator： https://colors.eva.design/ColorBox： https://colorbox.io/

基于 HCL

Atmos - Create UI color palettes with ease： https://app.atmos.style/Colorpicker for data： http://tristen.ca/hcl-picker

基于 HCT

Material Theme Builder： https://material-foundation.github.ioFigma 插件(Color Space: First plugin with HCT)： https://www.figma.com

来源参考：

使用 Chroma.js 掌握多色调色阶： https://www.vis4.net/blogRe-approaching Color： https://design.lyft.com/re-approaching-colorDesigning Systematic Colors： https://uxplanet.org/designing-systematic-关于colors HCL 一些颜色笔记： https://segmentfault.com/a/1190000023056925产品配色 2.0：使用 HCL 替代色彩空间 HSL 生成配色： https://jessieji.com/2020/hcl-instead-of-hslThe Science of Color & Design： https://material.io/blog/science-of-color-designDesign tokens： https://m3.material.io/foundations/design-tokens/overvieww33C： https://www.w3.org/TR/css-color-4/#color-conversion-code

颜色系统干货较多：

欢迎关注「JellyDesign」的小程序：