颜色量化算法模型及在多元化App中的应用
色彩是我们感知世界、获取信息的重要媒介，随着多元化产品场景的不断拓展及运营内容的极速增多，我们不免每天都要和色彩打交道，但是设计师之间的主观感受差异，导致颜色之间也无法保持“调性”的统一。因此，设计一套科学高效的颜色适配方案，成为了我们首先要解决的问题。
本文将重点聚焦在我们的量化取色方案，围绕量化取色方案需求背景、色彩策略及使用场景进行讨论，并探讨量化取色应用的更多可能性。
过去一年多的时间里，应用商店和游戏中心跟随COOLOS2.0完成了大版本的升级改版。其中，为针对不同应用进行差异化展示，我们完成了普通、联运应用、联运爆款游戏三个类型APP的详情页设计。
量化取色方案是指利用颜色量化算法提取界面中的图片主色，并在保证色彩倾向不变的情况下，基于同一色相数值，通过将饱和度和明度控制在固定范围，输出既能符合应用场景，也能代表图片氛围的一套颜色方案。
Step1. 算法提取主色
提取图片主色，核心逻辑是遍历图片的像素，对图片中颜色和该颜色的像素个数进行统计，构造采样结果，然后提取主色或者其他风格的颜色。中位切割算法是最知名、应用最广泛的减色算法，常见的图像处理软件如 Photoshop、GIMP 等都使用了这个算法或其变种。
中位切割算法原理
假设有一张 RGB 图像，想要提取图片中的主色，中位切割算法流程如下：将图片的所有像素放到同一个区域（RGB 三维空间中）
对所有区域进行以下操作：
计算此区域内所有像素的 RGB 三元素最大值与最小值的差
选出相差最大的那个颜色（R 或 G 或 B）
根据那个颜色去排序此区域内所有像素
分割前一半和后一半的像素到两个不同区域（即「中位切割」）
重复上述步骤反复切分，直到最终切分得到⻓方体的数量等于主题颜⾊数量为⽌，计算区块的平均颜⾊，即可得出主色。
Android Palette调色板
最后选择dominantColor作为主色，运用到界面中。
取色结果与问题分析
由上图可知，虽然算法得出的主色能够代表图片，但是却并不一定能够满足页面呈现要求。因此，我们需在此基础上，结合色彩策略对主色进行干预，让界面阅读体验达到标准，并且整体配色统一自然。
Step2. 算法取色优化
优化策略选择
目前主流的量化取色优化方案有两种，分别是模板色彩匹配和自然色彩提取匹配。
通过步骤一提取出主色色相后，结合映射规则映射到色彩模板（一般为12-24种），然后使用相对应颜色的模板。
优点：设计师定制颜色模板，整体可控性高
缺点：产出的颜色方案种类少、相对单一
通过步骤一提取出主色色相后，在HSB色彩模式基础上，通过对饱和度和明度进行调整，得出适合界面的配色方案。优点：色彩丰富自然，图片与颜色关联性强。
HSB色彩模式是什么？
日常生活中，我们接触到最多的色彩模式非RGB莫属了，RGB色彩模式是由红（R）、绿（G）、蓝（B）三色按照不同比例叠加，表现出各种颜色，但由于RGB三色数值无法直观地对色相、饱和度、明度等信息进行展示，也就不符合我们颜色可控的需求。
而HSB色彩模式以人类对颜色的感觉为基础，描述了颜色的三种基本特性。
H（色相）：表示色彩颜色；在0~360°的标准色轮上，色相按位置度量。通常，色相是由颜色名称标识的，比如红、绿、橙。黑色和白色无色相；
S（饱和度）：表示色彩纯度；取值范围0～100%。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从灰度到纯色的变化；
B（明度）：表示色彩明暗；取值范围0～100%。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。
综合考虑界面丰富度、开发成本等多方因素后，我们选择了自然色彩提取匹配方案，以用户体验为导向，提升界面个性化。
具体优化策略
基于算法提取主色后，我们在HSB色彩模式下对其进行数值干预，在保持色相（H）值不变的情况下，调整饱和度（S）和明度（B），建立一套可行的色彩规律，保证视觉效果统一。
S（饱和度）：数值控制在60-70之间，区间之外的数值就近取60或70
B（明度）：数值控制在45-60之间，区间之外的数值就近取45或60
Step3. 色彩验证
得出配色方案后，除了依靠视觉衡量方案是否可行外，还需要有一个相对科学的标准对配色结果进行可读性检验，这就需要引入WCAG中对于颜色对比度的规范。
WCAG全称是Web Content Accessibility Guidlines（网页内容无障碍指南)，这是一组关于网页内容更容易访问的建议。其中关于颜色的使用标准为：色彩要在页面中达到一定的对比度，才能让人看清。为满足不同场景需要，WCAG制定了两条色彩对比度条例：对比度最低标准（AA级）和对比度增强标准（AAA级）。
对比度计算工具：https://webaim.org/resources/contrastchecker/（设定好前、背景色后，自动计算对比度结果，并判定是否满足WCAG的标准。）
参考Material Design和 iOS人机交互规范，基本都是以满足AA级标准为主，特殊情况下要求满足AAA级标准。而WCAG对比度最低标准（AA级）要求为：文本和文本图像的视觉呈现具有至少 4.5:1 的对比度。
Step4. 应用落地
目前，量化取色方案已经在应用商店和游戏中心的联运爆款游戏APP的详情页、游戏卡片等场景落地，包括页面背景渲染、按钮渲染等多种渲染方式，提升色彩带来的氛围渲染和沉浸感受。下图展示部分色彩渲染效果。
量化取色方案目前仅运用在应用商店详情页上，后续我们将继续挖掘更多落地可能性，相信在未来，量化取色方案将服务更多多元化产品场景，为COOLOS用户营造更好的多彩沉浸体验。也欢迎大家一起讨论，共同进步。