一种基于HSV颜色模型的动态调色板算法研究与应用

本文相关的论文《一种基于HSV颜色模型的动态调色板算法研究与应用》录用并在《工业控制计算机》2022年第7期（7月25日出刊）上发表。此处内容仅做交流使用。

本文相关的成果已发布在《JINGWHALE智能动态调色板》。

- - - - - -  START  - - - - - -

在现代互联网网页设计中，调色板是指用于数字图像管理的给定有限颜色组。网页页面色彩体系规范一般通过调色板去承载，一套完备的色彩体系规范，需要提供主题色、功能色、中性色等同色系的调色板，以满足产品设计在不同场景下颜色的使用需求。

目前主流的设计系统中，不同的业务场景对色彩的需求是多样化的。一般网页文字设计的调色板，颜色彩需要跨度较大，色彩明暗不一，以便于文字、容器背景等元素的颜色设计；而诸如图表、有色图标以及插画等网页平面图形设计，调色板的色彩一般要求色彩比较明亮，饱和度以及透明度都较高。所以，对于特定的基础色来说，两套割裂的调色板，会使得页面的色彩并不和谐，拓展性也相对较弱；另外，对于单个调色板的色彩来说，色彩之间也并不自然柔和，甚至有些色彩的搭配会显得突兀。

基于以上问题，本文提出了一种基于HSV颜色模型的动态调色板算法：基于同一基准色，通过贝塞尔曲线动态梯度值机制配置HSV模型相关的参数值，使生成的调色板的色彩之间更柔、更自然；同时，不同基准色或者同一基准色不同参数的调色板单独或者组合使用，保证了页面色彩的拓展性以及和谐统一性。

01

基于HSV颜色模型的动态调色板算法研究与实现

HSV模型在1978年由埃尔维·雷·史密斯创立，它是三原色光模式的一种非线性变换，模型中颜色的参数分别是色相（H）、饱和度（S）、透明度（V）。通过相关颜色理论，对HSV颜色模型的色相（H）、饱和度（S）、透明度（V）有机协调控制，可以科学高效的完成色彩的生成与拓展。

为了让调色板各个颜色之间要有一定的差异性，并且色彩梯度要柔和自然；HSV动态调色板算法，以基准色为中心，通过遍历浅色区个数、深色区位个数，循环构建同色系调调色板的色彩，主要思想如下：

1）、调色板的颜色个数定为10，1-4序号位为浅色区衍生色，5序号位为基准色，6-10序号位为深色区衍生色（本文将基于基准色生成的色彩叫做衍生色）；

2）、通过设置基准色左右色相环的区间角度criticalColorAngle°作为色相（H）的取值范围；

3）、通过设置饱和度范围（SMin～SMax）、明度范围（VMin～VMax），作为衍生色彩饱和度（S）、透明度（V）的取值范围，其中SMin、SMax、VMin、VMax取值范围为0～1.00；

以基准色为参考位置，按照序号位顺序循环生成浅色区衍生色和深色区衍生色。衍生色依据相关的色彩理论，按照色相（H）、饱和度（S）、透明度（V）顺序，通过位置序号调用对应参数的贝塞尔曲线设置动态梯度值，依次计算生成。

衍生色的色相（H）值、饱和度（S）值、透明度（V）值具体算法如下：

1.1 衍生色色相H值算法思想

为了确保调色板的各个色为邻近色，在色相环中，衍生色色相值以基准色H值逆时针和顺时针criticalColorAngle°组成的2*criticalColorAngle°为区间相进行取值。其中，浅色区色相区间为基准色（H值- criticalColorAngle）至基准色H值，深色区色相区间为基准色H值至基准色（H值+ criticalColorAngle）。

为保证了衍生色色相值之间的柔和自然性，色相取值以设定的贝塞尔曲线HBezier 10等分取值与2*criticalColorAngle°区间10等分值相结合值作为H动态梯度值。

由于冷暖色系对颜色的影响，需要判断冷暖色系，对色相值做不同处理。当基准色是冷色系（设定色相H值在60°-240°内），浅色区衍生色H值 = 基准色H值 - H动态梯度值 * 衍生色位置参数，深色区衍生色H值 = 基准色H值 + H动态梯度值 * 衍生色位置参数；当基准色是暖色系（设定色相H值在60°-240°外），浅色区衍生色H值 = 基准色H值 + H动态梯度值 * 衍生色位置参数，深色区衍生色H值 = 基准色H值 - H动态梯度值 * 衍生色位置参数。

衍生色色相H值具体计算算法如下：

const GlobalOpts = opts.criticalColorAngle ? opts : DefalutOpts;  //用户设置参数
const criticalColorAngle = GlobalOpts.criticalColorAngle;     // 邻近色区域
const HBezier = GlobalOpts.HBezier;
const lightColorCount = 5; // 浅色区数量，主色左
const darkColorCount = 4;  // 深色区数量，主色右
const baseEasingPointSetp = lightColorCount + darkColorCount + 1;
function generateHValue(isLight, hsv, i) { //isLight是否为浅色区，hsv为基准色，i为当前衍生色的序号位
  // 计算H动态梯度值
  var HValue = "";
  var point = i * (1 / baseEasingPointSetp);
  var HEasing = bezierEasing(HBezier); 
  var dynamicStepH = HEasing(point) * (criticalColorAngle / baseEasingPointSetp);
  // 计算衍生色H值
  if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) { //冷色
    HValue = isLight ? hsv.h - dynamicStepH * i : hsv.h + dynamicStepH * i;
  } else { //暖色
    HValue = isLight ? hsv.h + dynamicStepH * i : hsv.h - dynamicStepH * i;
  }
  // 修正计算衍生色H值
  if (HValue >= 360) {
    HValue -= 360;
  } else if (HValue < 0) {
    HValue += 360;
  }
  return HValue;
}

当衍生色的色相H值计算完成后，进行衍生色的饱和度S值计算。

1.2 衍生色饱和度S值算法思想

为保证了衍生色饱和度值之间的柔和自然性，饱和度取值以设定的贝塞尔曲线SBezier 10等分取值与（SMax - SMin）区间10等分值相结合值作为S动态梯度值，由于生成的衍生色以基准色为参考位置，当计算浅色区衍生色饱和度S值时，浅色系饱和度S值按照动态梯度值减少；当计算深色区衍生色饱和度S值时，深色系饱和度S值按照动态梯度值增加。

衍生色饱和度S值具体计算算法如下：

const GlobalOpts = opts.criticalColorAngle ? opts : DefalutOpts;  //用户设置参数
const SMin = GlobalOpts.SMin; // 饱和度最小值
const SMax = GlobalOpts.SMax; // 饱和度最大值
const SBezier = GlobalOpts.SBezier;
const lightColorCount = 5; // 浅色区数量，主色左
const darkColorCount = 4;  // 深色区数量，主色右
const baseEasingPointSetp = lightColorCount + darkColorCount + 1;
function generateSValue(isLight, hsv, i)){ //isLight是否为浅色区，hsv为基准色，i为当前衍生色的序号位
  // 计算S动态梯度值
  var SValue = "";
  var point = i * (1/baseEasingPointSetp);
  var SEasing = bezierEasing(SBezier); 
  var dynamicStepS = SEasing(point)*((SMax-SMin)/baseEasingPointSetp);
  // 计算衍生色S值
  if (isLight) {
    SValue = hsv.s - dynamicStepS * i;
  } else if (i === darkColorCount) {
    SValue = hsv.s + dynamicStepS * i
  } else {
    SValue = hsv.s + dynamicStepS * i;
  }
  // 修正衍生色S值
  if (SValue > 1) {
    SValue = 1;
  }
  return SValue;
}

当衍生色的饱和度S值计算完成后，进行衍生色的透明度V值计算。

1.3 衍生色透明度V值算法思想

为保证了衍生色明度值之间的柔和自然性，透明度取值以设定的贝塞尔曲线SVBezier 10等分取值与（VMax - VMin）区间10等分值相结合值作为V动态梯度值，由于生成的衍生色以基准色为参考位置，当计算浅色区衍生色透明度V值时，浅色系透明度V值按照动态梯度值增加；当计算深色区衍生色透明度V值时，深色系透明度V值按照动态梯度值减少。

衍生色透明度V值具体计算算法如下：
 

const criticalColorAngle = 60;  // 邻近色区域
const lightColorCount = 5; // 浅色区数量，主色左
const darkColorCount = 4; // 深色区数量，主色右
const baseEasingPointSetp = lightColorCount+darkColorCount+1;
const VMin = 0.75; // 亮度最小值
const VMax = 1; // 亮度最大值
const Easing = bezierEasing(0, 0.55, 0.45, 1);
const GlobalOpts = opts.criticalColorAngle ? opts : DefalutOpts;  //用户设置参数
const VMin = GlobalOpts.VMin; // 亮度最小值
const VMax = GlobalOpts.VMax; // 亮度最大值
const VBezier = GlobalOpts.VBezier;
const lightColorCount = 5; // 浅色区数量，主色左
const darkColorCount = 4;  // 深色区数量，主色右
const baseEasingPointSetp = lightColorCount + darkColorCount + 1;
function generateVValue(isLight, hsv, i){ //isLight是否为浅色区，hsv为基准色，i为当前衍生色的序号位
  // 计算V动态梯度值
  var VValue = ""
  var point = i * (1/baseEasingPointSetp);
  var VEasing = bezierEasing(VBezier); 
  var dynamicStepV = VEasing(point)*((VMax-VMin)/baseEasingPointSetp)
  // 计算衍生色V值
  if (isLight) {
    VValue = hsv.v + dynamicStepV * i;
  } else {
    VValue = hsv.v - dynamicStepV * i;
  }
  // 修正衍生色V值
  if (VValue > 1) {
    VValue = 1;
  }
  return SValue;
}

当衍生色的色相H值、饱和度S值、透明度V值全部计算完成后，衍生色完成生成。

02

HSV动态调色板算法应用

通过以上HSV动态调色板算法研究与实现，以#4AD3FF为基准色为例，对色相、饱和度范围、透明度范围，以及相对应的贝塞尔曲线进行参数设置，生成用于网页文字设计（用于文字、容器背景等）调色板和网页平面图形（用于图表、有色图标以及插画等）调色板。

2.1  生成以#4AD3FF基准色的网页文字设计调色板

网页文字设计调色板，一般用于文字、容器背景等元素上，生成的色板颜色跨度较大，色彩明暗不一，相关的参数设置如下：

色相：邻近色角度criticalColorAngle=30；

饱和度范围：饱和度最小值SMin=0，饱和度最大值SMax=1.00；

透明度范围：透明度最小值SMin=0，透明度最大值SMax=1.00。

经过以上参数配置，通过HSV动态调色板算法生成的调色板如图1所示：

图1

2.2  生成以#4AD3FF基准色的网页平面图形调色板

网页平面图形调色板，一般用于图表、有色图标以及插画等图形上，颜色的饱和度和透明度较高。为了确保调色板色彩的高饱和度，限定S值的取值范围（0.2～1）；为了确保调色板色彩的高透明度，限定V值的取值范围（0.75～1）；同时，增添贝塞尔曲线，使生成的衍生色之间更加自然柔和。相关的参数设置如下：

色相：邻近色角度criticalColorAngle=30；贝塞尔曲线HBezier = (0, 0.55, 0.45, 1)；

饱和度范围：饱和度最小值SMin=0.20，饱和度最大值SMax=1.00; 贝塞尔曲线HBezier = (0, 0.55, 0.45, 1)；

透明度范围：透明度最小值SMin=0.75，透明度最大值SMax=1.00; 贝塞尔曲线HBezier = (0, 0.55, 0.45, 1)。

经过以上参数配置，通过HSV动态调色板算法生成的调色板如图2所示：

图2

图2中生成的调色板颜色融柔和自然、饱和度和透明度较高，便于网页设计中一般图表、有色图标以及插画等图形设计的颜色使用需求。

上述以#4AD3FF为基准色生成的两个调色板构成的组合调色板，基于同一基准色，保证了页面色彩的拓展性以及和谐统一性；同时，网页平面图形调色板加上了贝塞尔曲线，使得图2中的网页平面图形调色板调色板比图1中的网页文字设计调色板衍生色之间更加自然柔和。

03

结束语

本文提出了一种基于HSV颜色模型的动态调色板算法，满足了现代网页设计对颜色的多样性需求。本算法基于同一基准色，通过贝塞尔曲线动态梯度值机制配置HSV模型相关的参数值，使生成的调色板的衍生色之间更柔和自然性；同时，不同基准色或者同一基准色不同参数的调色板可以单独或者组合使用，保证了页面色彩的拓展性以及和谐统一性。