目前 CROV DS 业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）
而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。
因此，我们需要基于我们自身的业务特征来产出一套足够完善的的色彩体系，让业务从用色上达成基本的一致统一。
我们设计师在定义颜色时，更多得是直接在色板上进行取色，但这样的取色方法存在诸多弊端。
可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。
其实这和不用网格系统来布局是一个道理（注：网格系统是一种能够极大提升布局效率的方法，后面会讲）。
色板中取色的范围趋近于无穷。如果将 HSB 模式下的单个 H、S 和 B 作为一个最小单元格，那么我们可以选择的格子高达数百万个。颗粒度过细的情况（其实根本就没有颗粒度）导致我们在取色时往往会被迫进行反复的微调和尝试。
直接在色板中取色主要依赖的是 “直觉” 这种相对感性的存在。
比如一个按钮的状态可以包括 normal、hover、pressed、disable 等多个状态，如果我们仅仅靠自己的直觉自由调整明度和饱和度，最后的配色方案其实缺乏内在的逻辑性和秩序性。
对于 B 端这些偏后台工具、场景复杂的业务，颜色运用得往往也比较广泛，如果我们没有一套完善的色彩体系，那每次一遇到新的项目及业务场景需要用到新的颜色时，之前定义的颜色难以复用，导致我们需要重新定义颜色。而且这种相对主观的方法也缺乏说服力，难以体现专业度。
而如果设计师提前定义好一套色彩体系，一方面只需要在对应的色板中选择即可，大大减少了设计决策。另一方面色彩体系所提供的不同色彩梯度也便于各个需求、业务场景的复用。而且色彩体系富有逻辑和秩序，因此从中挑选的颜色也同样是这样，显著降低设计师依赖 “直觉” 所带来的主观和不可控。
以同色系配色为主导，多色搭配为辅。同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
首先，所有的色彩模型统一采用 HSB 模型进行，正如 Ant Design 设计团队说的那样，这个模型利于调整色彩时对颜色有明确的心理预期，同时便于团队沟通。
这里再简单普及下 HSB 模型。H 指的是色相（Hue），S 指饱和度（Saturation），B 指明度（Brightness）。S 控制颜色混入白色的量，S 值越高，意味着混入白色的量越少，颜色也就越 “纯”。B 控制颜色混入黑色的量，B 值越高，意味着混入黑色的量越少，颜色也就越 “亮”（通俗点说，它们分别代表了明色区域和暗色区域）。
Crov Dropshipping 基于其时间自由灵活、可兼职副业、成本风险低的业务特征，使得对应的用户群越来越多得集中在年轻一代的 e-tailer（线上零售商）当中。他们不同于我们常规认知里那类传统的 retailer（线下实体零售商），大部分的 DSer 拥有自己的事业和工作，为了赚取外快，将其当做自己的副业。因此，年轻化是这类用户群的主要标签。
所以，我们采用了高饱和度、偏向蓝色色相的紫色，来作为 crov dropshipping 的品牌色。它的 HSB 值是 （250，80，100）。
为了覆盖掉 Crov DS 本身复杂的前后台业务场景，需要额外搭配各类型的辅助色。我们想要提取 24 类色相，所以直接通过 360/24 得出了色环中每类色相的基本角度 15°。
因此，这里以品牌色色相为基础，在 HSB 360° 色环中，对色相（H）正向和反向各自 ±15°，饱和度（S）和明度（B）保持不变，得到 24 色的色环彩带。
后续我们的颜色体系就在彩带上的 24 个颜色上面进行提取。
品牌色同色系是指，根据品牌色不同的饱和度和明度变化，生成不同深浅、不同明暗的一组颜色。同色系配色不仅传达了品牌性，多个梯度的变化也能够适应及通用尽可能多的业务场景，也便于多信息的层级划分。
而同色系配色的输出则遵循了 antDesign 发明的 tint/shade 色彩系统算法，说人话，就是在颜色中分别加入一定比例的黑色或者白色来更科学得生成色阶。
sketch 中可以直接将这套算法可视化处理，便于设计师直接生成所有颜色的色阶。
需要注意的是明色区（就是上方横向的那块取色区域，白色至纯色时 S 由 0 过渡至 100）和
暗色区（右侧纵向的取色区域，纯色至黑色时 B 由 100 过渡至 0）遵循了两种不同的规则，具体规则见下：
当 S 饱和度变化时（明色区域），S 值以 S/5 的结果值为一个增量进行递减，B 值以 (100-B)/5 的结果值为一个增量进行递增。我们品牌色的 S 和 B 分别是 80 和 100，所以这里的两个增量分别是 16 和 0。
品牌色在明色区的下两个色阶对应的 HSB 参数就是（250，64，100），（250，48，100），以此类推。
而当 B 明度产生变化时（暗色区域），S 值以 (100-S)/5 的结果值为一个增量进行递增，而 B 值以 B/5 的结果值为一个增量进行递减。得出的两个增量分别为 4 和 20。
品牌色在暗色区的下两个颜色对应的 HSB 参数即（250，84，80）、（250，88，60），剩下的所有颜色以此类推。
根据这两个定义规则推导出全部不同梯度的色阶，我们就可以将其作为品牌色同色系配色。
我们使用品牌色来传达品牌价值，还需要辅助色来满足多样化业务场景的需要，对用户进行不同的情绪引导，同时也可以缓解用户对单一主色产生的视觉疲劳。
辅助色的定义就可以直接用到我们之前基于品牌色所衍生出的 24 色 “彩带” 了。我们通过色环形式，来迅速得出品牌色的同类色、类似色、邻近色、中差色、对比色和互补色。
首先，由于相差 15° 的同类色与品牌色差距过小，色相对比感微弱，传递的调性过于相似，所以这里直接 pass。而邻近色生成的粉色和青色在界面中基本不会作为功能色使用，这里同样直接舍弃。
类似色即色相差在 30 度左右的颜色，属于较弱对比色。我们基于品牌色的色相各自 ±30 得出类似色。由于 H280 的类似色调性与品牌色类似，并且色彩体系中需要一个典型的冷色来覆盖一些场景，所以这里使用了 H220 的颜色作为冷系的辅助色。
中差色即色相相差 90 度左右的颜色，属于中等对比色。H340 偏粉，与常规红色相差过多，所以这里借鉴了 alipay 的辅助色校正原则 “色相差值不能超过 15”，对 H340 进行了色相校正，调整至 H355。
对比色即色相相差 120 度左右的颜色，属于强对比色。最后得出的 H130 调性与中差色的 H160 过于类似，直接舍弃。H10 与 H340 调性类似，但是可以向橙色系发展，所以微调到同类色进行色相校正。
互补色即色相相差 180 度左右的颜色，属于高强度对比色。最后得出的 H70 偏绿，这里同样进行了色相校正，将其调整为 H55。
最后，得出了共计 5 种辅助色。不过这些辅助色并不能直接使用，还需要进行感官明度的校正。
感官明度校正方法来自支付宝设计团队，这是是确认辅助色的最后关键一环。每种颜色都有属于自己的 “感官明度”，即发光度。品牌色即辅助色的发光度不一致，就会导致视觉上会有明显的明暗差别。所以，我们需要通过发光度来进行最终的颜色校正。
明度较高的灰色意味着高发光度，明度较低则意味着低发光度。保持品牌色发光度不变，我们对其他辅助色进行微调。
我们只需要将那些视觉明暗差距明显的颜色进行调整。注意，并非所有的颜色都要调整到品牌色的感官明度，这些值仅仅是一个参考。最终的校正依然取决于我们的视觉！比如黄色感官明度本身很高，但是视觉缓和、不像绿色那么刺激，所以基本无需校正。
最后得到校正后的如下辅助色。蓝色、绿色、黄色以及红色在界面中可以作为功能色使用，可以分别代表常规、成功、警告和报错状态。而橙色则可以用做突出类的提示信息，它比 bold 字重要高出一个层级。
与品牌色一样，使用 tint/shade 规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～
CROV DS 的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓 B 端产品长期使用时的视觉疲劳。
具体方法就是，分别在 #222、#555、#888、#b3b3b3 的一、二、三级中性文本色代表的色块上，覆盖一层 10% 透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考 antDesign 中通过透明度进行定义的方法，不一定需要按照某个具体色值来。
我们必须要承认的现实是，设计师所定义出的色彩在 mac 上看上去是很出彩，但是这并不能代表所有用户。也许在用户中依然有一部分人群，他们的显示器配置低和老旧。而且我们无法判断用户们的使用环境，有可能是在刺眼的阳光下、有可能是在昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。
而 WCAG（Web Content Accessibility Guideline，Web 内容无障碍指南）解决的正是这些障碍问题。WCAG 中的 POUR 无障碍原则包括了：易于感知的（Perceivable）、便于操作的（Operable）、稳定理解的（Understandable）、稳定耐用的（Robust）。
而颜色则正是对应了易于感知的这一无障碍原则。网站中的文字和图像应该具备足够高的色彩对比度，使之更易被用户感知识别。
WCAG 颜色对比度无障碍的两个标准分别为：【1.4.3 条例：最小对比度标准】和【1.4.6 条例：加强对比度标准】，分别对应着 AA 级和 AAA 级。
AA 级的定义为：普通文本的视觉呈现与背景至少要有 4.5：1 的对比度，大文本与背景至少有 3：1 的对比度
AAA 级的定义为：普通文本的视觉呈现与背景至少要有 7：1 的对比度，大文本与背景至少有 4.5：1 的对比度
（这里的大文本即≥18pt 常规字重的文本或者≥14pt 加粗字重的文本）
这两个条例被大厂们广泛运用到了产品的颜色标准当中。
比如 MD 规范中的文本移动性规范标准中的数据就是来自 WCAG 的 1.4.3 条例标准。
同样，阿里巴巴在前不久发布的 B-Design 中的无障碍色 acs 指标和 WCAG 本质上也是一样。
easy。这里直接上个网址，https://contrast-ratio.com/#%23373247-on-%23fff
我们分别在背景及文本录入色值，即可得到最终的对比度数据。比如我录入了白色和一级文本色数值，最后的 12.28 即两者的对比度，嗯，达到了 AAA 级标准。
一样的步骤，分别测试了其他文本色的对比度（产品无暗色模式，所以此处仅验证白色背景下的颜色对比度），分别达到了 7.59、4.71 和 2.38。可以看出除了 2.38 外，其他文本色的对比度均符合可见度最低标准。
不过 WCAG 中指出，一些特殊情况下的文本无最低对比度的限制，其中就包含了表单字段的占位符（placeholder）。而 2.38 对比度对应的文本色主要用于暗提示，因此这种情况就可以无视掉了~
https://malleable-cardigan-182.notion.site/4ff33f0e72164132a09c61f42b5e6c3b
若有收获，就点个赞吧
0 人点赞
