关于设计:前端需要了解的色彩知识

概述

在前端畛域，咱们经常须要跟色调打交道，除了一部分从设计转过来的前端外（ps：历史起因），起初的新生代前端绝大多数根本都是学理工科出身的，个别没有通过专门的设计训练和造就，这样在还原设计图的过程中对于色调的了解都会或多或少有些出入，从而导致设计和前端产生不必要的矛盾（ps：本是同根生，都互相谅解下），本文旨在通过介绍相干的一些色调常识，为大家提供一些设计和前端双重视角下的观点，也心愿可能给大家提供一些对色调的不同的意识和了解。

色调实践

人类对色调的钻研其实很早都有记录，但真正把色调作为一门学科或者说有其理论体系，还要从牛顿说起，在之后一直的迷信倒退过程中，人们逐步对色调有了不同的意识，也正是因为迷信的倒退，色调实践在不同畛域都有了长足的倒退，本文着重分享两个对咱们前端来说须要着重理解的色调实践，即：色环实践以及加增色模式实践。

色环

色环实践经验了牛顿色环、伊顿色环（传统色环）、孟塞尔色环、Yurmby色环等几个不同的阶段，这里重点介绍传统的经典色环，也就是伊顿色环，其作为包豪斯体系中重要的实践课程，对设计畛域的影响微小（ps：对设计史感兴趣的童鞋，能够参看之前的这篇文章世界古代设计史），总体来说，色环实践能够简略提炼出以下几个常见的色调概念：

加色模式 & 增色模式

在介绍加色模式和增色模式，咱们先来看下咱们从小学到的对于色调的一些基本知识。咱们之前上学的时候，美术老师可能教过三原色和三基色的概念，或者辨别光学三原色和色调三原色等等，这其实就曾经是加色模式和增色模式的一个初步理解了，实质来说：三原色或者说三基色都是基于不同环境下资料而提出的一种根本色调而已，我这里以光学三原色和色调三原色来辨别，光学三原色是：红(R)、绿(G)、蓝(B)，也是咱们前端开发过程中罕用到的元色；而除了光学三原色外，还有一个色调三原色，或者叫美术三原色，它们是：红(M)、黄(Y)、蓝(C)，这个是印刷或者绘画过程中经常用到的元色。置信仔细的同学曾经发现我在标注英语的时候，色调三原色和光学三原色里的红色及蓝色如同是不一样的，没错，正是因为不同场景下对于色调应用的不同，而对色调进行加合的过程中呈现了不同的模式。这里，就要引出咱们这一部分的外围实践了，即：加色模式和增色模式。

上面给出不谨严的加色模式和增色模式的定义

加色模式是指对色调模型中的属性进行加和的模式；增色模式是指对色调模型中的属性进行排汇的模式

那么为什么光学色调是加色法而美术色调却是增色呢？因为实质上，在光学场景中，比方在计算机显示器中通常应用的是从一种光源来收回不同的元色给人出现色调，不同的显示器制作资料有不同的显示特点，比方有：阴极射线管显示器(CRT)、等离子显示器(PDP)、液晶显示器(LCD)以及有机发光半导体显示器(OLED)等等，但这些通常都会是从一个光源收回的，因此这些通常就是加色模型，而一般来说会有RGB模型、YUV(YCrCb)模型等，在前端来说，咱们常见的是以RGB模型进行的相干对应关系代码操作，这里波及到了色调模型，具体请看下一部分的介绍。而在美术或者印刷场景中，则是利用的物体反射光线的原理，也就是说咱们日常看到的物体的色彩其实是显示的它不能被排汇的色彩，例如：粉色颜料其实排汇了除粉色以外的所有光线，所以咱们能力看到它是粉色，因此增色其实是排汇的模式，因此在CMYK模型中，其就是典型的增色模式。

色调模型

在有了对色调的初步意识之后，如果想要来形容色调，咱们就须要建设一个模型来形容它，这里就引出了色调模型的概念，基于wiki百科和百度百科，咱们不谨严的给出如下的定义：

色调模型是用一个元组或者汇合来形容可见光的子集，这里的元组通常为三元或者四元。

通常来说，依照是否设施相干，咱们能够将色调模型分为设施相干色调模型以及设施不相干的色调模型，基于此大抵能够分为两大体系，即：RGB体系及XYZ体系，这里咱们将介绍以下几种常见的色调模型：RGB/CMYK、YUV/YCrCb、HS*、Lab、XYZ，上面将别离介绍下相干的色彩模型。

RGB & CMYK

RGB模型是典型的加法模型，其通过设立RGB为三个基色进行多种色彩的不同模型组合，其中R/G/B别离作为三维欧氏空间中的维度示意，对色彩进行相干的构建，如上图所示。

不同于RGB模型的加法合成，对于印刷相干的场景，则是典型的减法合成，而这里最常见的就是跟物质相干的根底颜料作为根底模型空间的维度，最常见的便是CMYK模型，其依然是合乎欧氏空间的模型构建，只是对于合成的算法过程中应用的是减法合成。

YUV & YCrCb

YUV模型作为RGB模型的变形模式，其罕用于视频、电视畛域的色调示意。因为在视频及电视畛域中，对于色调和饱和度的指标绝对更为要害，因此应用U+V来示意色度，应用Y来示意亮堂度。

随着视频编码技术的倒退，YCbCr模型作为视频流采纳的一种变形模型规范，其不再是通过u+v来示意色度，而是通过RGB输出信号的R与亮度的差别即Cr和通过RGB输出信号的B与亮度的差别即Cb进行维度构建，这绝对于YUV或者YPrPb编码而言便是数字色差信号而不再是模仿色调信号了。

YUV和YCrCb色调模型罕用于计算机视觉的相干剖析中，对于视频及图像剖析相干的同学能够更深刻理解一下

HSV & HSL & HSB & HSI

对于人的视觉而言，其实通常最容易形容的就是基于色相(Hue)、饱和度(Saturation)以及最初这一个明度或者说亮度来辨别，然而对于最初两个指标而言，不同模型的构建其实是不太一样的，这里咱们将重点介绍两种模型，即：类HSL和类HSV模型

对于HSL模型而言，最初定义的指标是一个混入了黑白的量，其最初的状态在欧氏空间中，体现为一个全椎体，如上图所示。

而对于HSV模型而言，最初定义的指标只是混入了一个彩色的量，其最初状态在欧氏空间中，体现为一个倒立的圆锥体，如上图所示。

正是因为这种对于S和 * 的解决不同，导致呈现了很多不同的名词及示意模型，这里咱们用以下表格做一下常见的 HS* 模型的比照：

论断：HSV = HSB，HSL ≈ HSI

如上图所示，后续咱们不加特地阐明的话，后续将以HSV和HSL这两种作为HS*的两种典型代表进行表述，作为RGB模型的变种，咱们后续在色调计算过程中对 HS* 和 RGB模型的换算进行详解。

LAB

随着倒退，人们对色调的钻研不再局限于设施根底条件的限定，由此，CIE(Commission Internationale de Photométrie)国内照明协会提出了Lab模型，其不同于RGB的模型，其中L代表亮度，而a则是从深绿色(低亮)到灰色(中亮)再到亮粉红色(高亮)的过渡，b则是亮蓝色(低亮)到灰色(中亮)再到黄色(高亮)的过渡，其合成模型如上图所示。

XYZ

在上一个Lab模型中咱们晓得，CIE对色调做了进一步的调研钻研，其实Lab模型也是XYZ模型的一个衍生变种，其对RGB模型中的光源做了坐标系方面的辨别，其对三元色进行了相干的修改，其是设施无关的，如上图所示，在欧氏空间中，两个坐标系产生了偏移。（ps：具体的变动，能够参考这篇文章RGB色调体系和XYZ色调体系）

色调空间

色调空间又称为色域，在上一部分咱们介绍了不同的色调模型，那么对于理论生产过程中会遇到各种不同的理论状况，因此各个厂家或者组织基于各自的设施或者场景的不同而理论造成的色调映射关系，从而提出了各自的色调范畴，这里咱们联合wiki百科及百度百科，不谨严的给出如下定义：

色调空间是基于色调模型而对理论特定场景的色调范畴的映射关系。

对于常见的色调空间，咱们列举了以下几种：

色调体系

在讲了对于色调的一些基础理论和形容之后，咱们来看一下设计畛域对于色调的相干使用和实际，这些对咱们前端和设计同学合作也会有比拟好的前置铺垫。

如果依照设计体系的规范制订，通常须要蕴含 愿景与准则（Vision & Principle）、 指南（Guidelines）、 库与工具（Libraries & Tools） 这三层，其中：

第一层：愿景与准则（Vision & Principle），是设计体系的外围价值观及总体纲领，指引整体设计体系的格调和调性。

第二层：指南（Guidelines），蕴含款式指南（Style Guideline）、模式指南(Patterns Guideline)、内容指南（Content Guideline）等更多通过文字和图像进行传播的内容，也是大部分设计中对色调(Color)、版式(Layout)、。

第三层：库与工具（Libraries & Tools），蕴含组件库（Components Libraries）、工具包（Toolkits）、协同工具（Collaborative Tools）等能够间接进行应用的内容，个别会输入可开发应用的组件库、以sketch或者psd的设计资源以及产品应用的figma、axure等物料。（ps：大型设计团队也会协同前端制作对应的组件库，比方常见的antd、element组件库等都是对应的设计团队的前端资源，一般来说大型的团队可能会将设计和前端划入用户体验团队，当然这也须要看整体的组织架构）

之前做设计的时候，做过相干的设计体系，有趣味的同学，能够看下这篇对应的设计体系实际——2018总结-多条业务线并行的UI根底框架标准（附案例）

在方才介绍了设计体系之后，咱们看到对于第二层的guidelines中，对于款式局部的规约，其中很重要的一个局部就是色调，其实色调是设计师展示视觉过程中最为重要的工具，在包豪斯体系中，作为三大形成之一的色调形成是非常重要设计实践，而如果将色调构建成合乎商业化的体系，通常来说须要蕴含两大部分，即：通用色调零碎和商业色调零碎。

对于色调零碎的分类，这里我将以蚂蚁金服的ant design色调体系作为样板来进行形容。

通用色调零碎，也就是antd中所说的零碎级色调体系，其是不蕴含任何对于商业及产品的特定色调要求，只是设计师选出了几种特定的色调，配合不同的视觉感触来表白不同的传播需要。

而商业色调体系，也就是antd中所说的产品级色调体系，通常须要配合品牌调性、产品性能等来从上述通用色调零碎中进行着重的筛选和设定，从而更好的服务商业化，用王受之学生的话讲就是：“设计是对外的，而艺术是对内的”。

现阶段的设计和工程联合的也越来越严密，能够通过Design Token等伎俩将设计体系和工程体系进行相干的对接，从而化解设计和前端链路过程中的沟通老本问题，晋升工程效力。对于设计方面的链路方面的晋升，能够看看蚂蚁金服去年SEE Conf对于设计工程化的几场介绍--提效神器 Design Tokens 的摸索与利用 - 昱星 & 元尧、设计工程化三部曲 - 倏昱 & 闻冰

这里我列举了几个比拟有名的设计团队所做的色调体系格调，大家能够参考一下：

色调计算

在感性的理解了色调实践、色调模型、色调空间以及理性的领会了色调体系之后，最初一部分咱们来看一下之前所建设的感性与理性是如何通过计算进行交融的，这一部分我将着重介绍和咱们前端相干的色调模型换算(RGB与HSV/HSL)，以及简略介绍下在换算过程中可能波及到的数学计算办法(贝塞尔曲线)，最初咱们将通过ant design的色板实现来看一下色调的具体利用。

RGB/HSL/HSV换算

在有了前边对于色调模型的意识后，咱们来看一下色调模型之间是如何进行换算的，因为前端利用过程中次要波及RGB向HS*的换算，因此这里咱们仅仅介绍RGB模型是如何向HSL及HSV进行坐标体系换算的。

从视频中咱们能够看出，RGB -> HSV 的过程为：

RGB歪斜 => 拉成六棱锥 => 转成六棱柱 => 转为圆柱

而 RGB -> HSL 的过程则为：

RGB歪斜 => 拉成双六棱锥 => 转成六棱柱 => 转为圆柱

从这个过程，咱们通过一系列简单的数学换算，能够失去如下转换公式：

留神：R、G、B都是换算到0-1区间的值，也就是这里的R/G/B是本来 0-255 区间的值除以255失去相应的值

Hue的换算

H的计算三者是一样的，即：

Lightness/Value/Intensity的换算

从上边的换算过程可知，L、V、I的对应方程为：

Saturation的换算

对于饱和度的换算，因为L、V、I的不同，导致换算过程中的S也产生了变动：

贝塞尔曲线

贝塞尔曲线作为数值计算中的重要办法，其对动静拟合不同静止轨迹有非常重要的作用，作为插值计算来解决伯恩斯坦多项式的重要办法，其对于科学计算非常重要。

在对色调计算过程中，应用贝塞尔曲线来解决两个数据值也是一项非常重要的伎俩，能够更加靠近对于色调体系的构建和对实在色调世界的拟合。

Ant Design 色板

在介绍了所有的色调相干的模型、计算等等之后，咱们来看一下前端中对于色调计算的一些利用，这里咱们以蚂蚁金服的 Ant Design 色板的生成算法作为案例进行一些简略的剖析，来看一下色调计算在组件库中的具体落地，对于更为具体的介绍，大家能够看一下偏右大佬所写的这篇《Ant Design 色板生成算法演进之路》，这里我仅仅做一下集体的了解与剖析简述。

antd色板 1.x算法

// 变亮@function tint($color, $percentage) {    @return mix(white, $color, $percentage);}// 变暗@function shade($color, $percentage) {    @return mix(black, $color, $percentage);}// 应用.useage {    background-color: tint(#2db7f5, 80%);}

第一版的办法很简略，咱们看到间接应用了黑白的混合去解决，这里的mix是sass中的颜色混合办法，这里应用的是简略的RGB模型进行换算，具体换算办法我找到了dart-sass的中的办法：

/// Returns [color1] and [color2], mixed together and weighted by [weight].SassColor _mixColors(SassColor color1, SassColor color2, SassNumber weight) {  // This algorithm factors in both the user-provided weight (w) and the  // difference between the alpha values of the two colors (a) to decide how  // to perform the weighted average of the two RGB values.  //  // It works by first normalizing both parameters to be within [-1, 1], where  // 1 indicates "only use color1", -1 indicates "only use color2", and all  // values in between indicated a proportionately weighted average.  //  // Once we have the normalized variables w and a, we apply the formula  // (w + a)/(1 + w*a) to get the combined weight (in [-1, 1]) of color1. This  // formula has two especially nice properties:  //  //   * When either w or a are -1 or 1, the combined weight is also that  //     number (cases where w * a == -1 are undefined, and handled as a  //     special case).  //  //   * When a is 0, the combined weight is w, and vice versa.  //  // Finally, the weight of color1 is renormalized to be within [0, 1] and the  // weight of color2 is given by 1 minus the weight of color1.  var weightScale = weight.valueInRange(0, 100, "weight") / 100;  var normalizedWeight = weightScale * 2 - 1;  var alphaDistance = color1.alpha - color2.alpha;  var combinedWeight1 = normalizedWeight * alphaDistance == -1      ? normalizedWeight      : (normalizedWeight + alphaDistance) /          (1 + normalizedWeight * alphaDistance);  var weight1 = (combinedWeight1 + 1) / 2;  var weight2 = 1 - weight1;  return SassColor.rgb(      fuzzyRound(color1.red * weight1 + color2.red * weight2),      fuzzyRound(color1.green * weight1 + color2.green * weight2),      fuzzyRound(color1.blue * weight1 + color2.blue * weight2),      color1.alpha * weightScale + color2.alpha * (1 - weightScale));}

能够看到这里应用的是RGB模型的线性计算，因为RGB模型线性换算过程中对距离的变动非常微小，对于人眼的视觉效果非常不敌对

antd色板 2.x算法

@import "bezierEasing";@import "tinyColor";// We create a very complex algorithm which take the place of original tint/shade color system// to make sure no one can understand it // and create an entire color palette magicly by inputing just a single primary color.// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin.colorPaletteMixin() {@functions: ~`(function() {  var warmDark = 0.5;     // warm color darken radio  var warmRotate = -26;  // warm color rotate degree  var coldDark = 0.55;     // cold color darken radio  var coldRotate = 10;   // cold color rotate degree  var getShadeColor = function(c) {    var shadeColor = tinycolor(c);    // warm and cold color will darken in different radio, and rotate in different degree    // warmer color    if (shadeColor.toRgb().r > shadeColor.toRgb().b) {      return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();    }    // colder color    return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();  }  var primaryEasing = colorEasing(0.6);  this.colorPalette = function(color, index) {    var currentEasing = colorEasing(index * 0.1);    // return light colors after tint    if (index <= 6) {      return tinycolor.mix(        '#ffffff',        color,        currentEasing * 100 / primaryEasing      ).toHexString();    }    return tinycolor.mix(      getShadeColor(color),      color,      (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100    ).toHexString();  };})()`;}// It is hacky way to make this function will be compiled preferentially by less// resolve error: `ReferenceError: colorPalette is not defined`// https://github.com/ant-design/ant-motion/issues/44.colorPaletteMixin();

在第二版的算法中，应用的HSL模型进行的整体色板粒度变动，而后换算到RGB模型中。

其中在基于HSL模型宰割粒度的时候，这里作者应用了本人定义的一个转化办法，对于灰度的判断，应用的是r与b的比拟，而这里的旋转角度及darken比例集体认为应该是作者依据理论生产数据取得的经验值，这里我并没有从相干材料中获取到对应的推到根据。

这里的RGB的混合也不再应用sass中的办法，而是基于tinyColor中的混合办法，mix办法如下：

tinycolor.mix = function(color1, color2, amount) {    amount = (amount === 0) ? 0 : (amount || 50);    var rgb1 = tinycolor(color1).toRgb();    var rgb2 = tinycolor(color2).toRgb();    var p = amount / 100;    var rgba = {        r: ((rgb2.r - rgb1.r) * p) + rgb1.r,        g: ((rgb2.g - rgb1.g) * p) + rgb1.g,        b: ((rgb2.b - rgb1.b) * p) + rgb1.b,        a: ((rgb2.a - rgb1.a) * p) + rgb1.a    };    return tinycolor(rgba);};

mix过程中的比例也不再是线性，而是应用的一个固定的贝塞尔曲线进行绘制的曲线，从上图中大体看出其根本合乎线性的拟合。

antd色板 3.x算法

前置算法，判断亮度，应用了转灰度的算法公式(ps：601校对公式，由NTSC亮度方程推导而来)，即：

Y = 0.299 R + 0.587 G + 0.114 * B

在tinycolor的库中，实现形式如下：

function getBrightness() {    //http://www.w3.org/TR/AERT#color-contrast    var rgb = this.toRgb();    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;},

在下边的 isLight 获取就是从上述的 getBrightness 转化而来

/* stylelint-disable no-duplicate-selectors */@import "bezierEasing";@import "tinyColor";// We create a very complex algorithm which take the place of original tint/shade color system// to make sure no one can understand it // and create an entire color palette magicly by inputing just a single primary color.// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin.colorPaletteMixin() {@functions: ~`(function() {  var hueStep = 2;  var saturationStep = 0.16;  var saturationStep2 = 0.05;  var brightnessStep1 = 0.05;  var brightnessStep2 = 0.15;  var lightColorCount = 5;  var darkColorCount = 4;  var getHue = function(hsv, i, isLight) {    var hue;    if (hsv.h >= 60 && hsv.h <= 240) {      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;    } else {      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;    }    if (hue < 0) {      hue += 360;    } else if (hue >= 360) {      hue -= 360;    }    return Math.round(hue);  };  var getSaturation = function(hsv, i, isLight) {    var saturation;    if (isLight) {      saturation = hsv.s - saturationStep * i;    } else if (i === darkColorCount) {      saturation = hsv.s + saturationStep;    } else {      saturation = hsv.s + saturationStep2 * i;    }    if (saturation > 1) {      saturation = 1;    }    if (isLight && i === lightColorCount && saturation > 0.1) {      saturation = 0.1;    }    if (saturation < 0.06) {      saturation = 0.06;    }    return Number(saturation.toFixed(2));  };  var getValue = function(hsv, i, isLight) {    var value;    if (isLight) {      value = hsv.v + brightnessStep1 * i;    }else{      value = hsv.v - brightnessStep2 * i    }    if (value > 1) {      value = 1;    }    return Number(value.toFixed(2))  };  this.colorPalette = function(color, index) {    var isLight = index <= 6;    var hsv = tinycolor(color).toHsv();    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;    return tinycolor({      h: getHue(hsv, i, isLight),      s: getSaturation(hsv, i, isLight),      v: getValue(hsv, i, isLight),    }).toHexString();  };})()`;}// It is hacky way to make this function will be compiled preferentially by less// resolve error: `ReferenceError: colorPalette is not defined`// https://github.com/ant-design/ant-motion/issues/44.colorPaletteMixin();

对于目前的antd 色板生成算法，这里是基于HSV模型进行的相干交融，其中：

1. 对于色相，在60到240度的色相进行了色相的粒度宰割；
2. 对于饱和度，加深和减淡局部做了不同的粒度解决，其中减淡更快；
3. 对于明度，明度削弱也比加和粒度要更大；

不同于2.x应用的贝塞尔曲线去拟合曲线，这里又改回线性组合来进行合乎色调体系的可控调整，从而使得整体的计划特地清晰明了，但又不同于1.x中的暴力组合，这里的灰度推算是基于亮度方程来作为科学依据的换算，算是交融了1.x和2.x各自的特点

总结

在前端开发过程中，咱们在帮忙设计师对于色调体系的构建时，除了对于日常常见的一些感知层面的了解外，咱们更应该重视对于深层原理的摸索与探索，诘问迷信深层的认知，对于咱们摸索前端畛域的深层有着至关重要的作用，比方在色调中的计算机视觉方面的摸索，让咱们对于工程与设计链路的扩大提供了更高层次和维度的意识，心愿各位同学在后续研发过程中，都能通过摸索底层诘问，获取到对于本人工作边界的认知摸索。

色调的钻研绝不仅仅波及到色调实践、色调模型、色调空间、色调计算等，其实色调是一门非常有意思且能够很深刻的学科，对于咱们前端来讲则更为重要，作为连贯设计与数据的纽带，也作为关联用户与企业的先锋，咱们对前端实践学习的同时也要对相干迷信理论知识作补充，做到可能对常识的灵活运用，帮忙企业和用户晋升更好的体验，这也是咱们作为前端工程师的更高价值所在，共勉！！！

参考

• 图像特效及滤镜算法汇总
• Ant Design 色板生成算法演进之路
• HSL and HSV
• 贝塞尔曲线扫盲
• Color code converter
• 前端也要懂的一些色调常识
• 前端须要理解的色彩模型，RGB、HSL和HSV
• 如何疾速实现一个色彩选择器
• RGB和HSB色调模型和算法
• 零碎级和产品级色调体系
• antd中的调色版计算方法
• COLOR SYSTEMS
• 色调模型与色调空间
• 【摄影教程】色调根底（三）：摄影罕用的色调空间
• 什么是YUV
• YUV简介
• 加色法与减色法
• 设计体系：数字产品设计的系统化办法
• 设计体系（一）丨设计体系的涌现：适应组织的须要
• 设计体系（二）丨什么才是设计体系？构造、准则与认知误区
• 设计体系（三）丨设计体系有什么用？价值与缺点
• 设计体系（四）丨如何创立设计体系？
• Naming Tokens in Design Systems
• Design Token 利用指南——设计篇
• Tint and Shade Functions
• Bézier基函数的导出
• 回绝被忽悠 手机屏幕材质/技术浅解析