RGB、Hex、HSL、HSB(HSV)

aRGB

a：alpha 透明度，0~1 之间的小数

R：Red 红色，0~255 之间的整数

G：Green 绿色，0~255 之间的整数

B：Blue 蓝色，0~255 之间的整数

RGB 对机器很友好的色彩模式，但并不够人性化

因为人类对色彩的认识往往是”什么颜色？鲜艳不鲜艳？亮还是暗？”

HSL 模式和 HSV(HSB) 都是基于 RGB 的，是作为一个更方便友好的方法创建出来的。

Hex

十六进制，对应RGB的0-255共256种颜色状态

通过两位16进制(16*16=256)正好表示，简洁

HSL

H：Hue 色调，0~360 圆环形式以角度表示

S：Saturation 饱和度，0~1 之间的小数

L：Lightness 亮度，0~1 之间的小数

HSL是工业界的一种颜色标准，通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，

HSL即是代表色相，饱和度，明度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

HSB (HSV)

H：Hue 色调，0~360 圆环形式以角度表示

S：Saturation 饱和度，0~1 之间的小数

L：Lightness 亮度，0~1 之间的小数

V：Value 明度，0~1 之间的小数

HSB 和 HSV 是一样的，只是叫法不同

Lab （色彩模型）

颜色模型 (Lab) 基于人对颜色的感觉。Lab 中的数值描述正常视力的人能够看到的所有颜色。因为 Lab 描述的是颜色的显示方式，而不是设备（如显示器、桌面打印机或数码相机）生成颜色所需的特定色料的数量，所以 Lab 被视为与设备无关的颜色模型。颜色 色彩管理系统使用 Lab 作为色标，以将颜色从一个色彩空间转换到另一个色彩空间。Lab 颜色模式的亮度分量 (L) 范围是 0 到 100。

Adobe photoshop中的LAB

Lab色彩模型是由亮度（L）和有关色彩的a, b三个要素组成。

L表示亮度（Luminosity），

a表示从洋红色至绿色的范围，

b表示从黄色至蓝色的范围。

L的值域由0到100，L=50时，就相当于50%的黑；a和b的值域都是由+127至-128，其中+127 a就是红色，渐渐过渡到-128 a的时候就变成绿色；同样原理，+127 b是黄色，-128 b是蓝色。所有的颜色就以这三个值交互变化所组成。

例如，一块色彩的Lab值是L = 100，a = 30, b = 0, 这块色彩就是粉红色。

注：此模式中的a轴,b轴颜色与RGB不同，洋红色更偏红，绿色更偏青，黄色略带红，蓝色有点偏青色

CMYK

印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。

四种标准颜色是：

C：Cyan = 青色，又称为‘天蓝色’或是‘湛蓝’M：

Magenta = 品红色，又称为‘洋红色’；

Y：Yellow = 黄色；

K：Key Plate(blacK) = 定位套版色（黑色）

有些文献解释说这里的K指代Black黑色，

为了避免与RGB的Blue蓝色混淆不用B而改称K，虽然这是一种有用的助忆，但事实上这种说法是不正确的。

HSL、HSV、HSB

HSB 和 HSV 是是一样的，只是叫法不同，HSL 则还有一些细微的区别：

1）在所有的情况下

H(Hue) 代表色相，S(Saturation) 代表饱和度

Hue（色相）是指取值范围在0-360°的圆心角，每个角度可以代表一种颜色

Brightness 在 HSB 模式中是B ,  在 HSV 中V是数值，但是所表述的是一个东西：对光的量或光源的功率的感知。

色相和明度（值）可以在0 - 1或者0% - 100%间取值。

2）HSL 稍微有一些不同

Hue（色相）和 HSB/HSV 模式中一样用数值表示，

但是， S，同样代表“饱和度”，定义不一样，且需要转换。

L 代表亮度，和 Brightness/Value 不一样。

Brightness（明度）是被认为是”光的量“，可以是任何颜色。

3）而 Lightness（亮度）是作为”白的量“来理解的

Saturation（饱和度）不一样，因为在两个模型中，饱和度都按比例缩放以适应明度或亮度的定义。

两者的区别，和他们之间对于饱和度的定义的不同。咱们拿案例看吧，先选同一个色 #F200FF

放入 HSL Color Picker，显示 HSL 数值为：H(297), S(100), L(50)

但是我们放在 Sketch 里面看一下，显示的 HSB 数值为，H(297), S(100), B(100) 

同样，需要提醒的是，CSS 里头支持的是 HSL，而不是 HSB，不要把 HSB 的数值直接套用了，不然的话你看到的可能会是不一样的颜色。

HSL 和 HSB 哪一个更适合人机界面，是有争议的，实际运用的区别会和我上面的例子一样，具体的区别和优劣势，可移步到这看：

Color Models: RGB, HSV, HSL

色度、色彩、色调

色度、色彩、色调是通过分别添加黑色、白色、灰色到所选颜色中而形成。

它们在背景和排版等网页设计中非常有用，通常与互补色配对使用以形成对比。

色度

将不同等级的黑色加入到一种颜色中，产生该特定颜色逐渐变暗的变体，或称为“色度”。色度用于链接悬停效果或作为页脚和页眉背景效果较好。

色彩是将白色加入到一种颜色中，得到越来越浅的版本。色彩也可用于CSS悬停效果，作为模态背景效果也比较好。

色调是将灰色加入到一种颜色中，根据所使用的灰色等级不同几乎可以产生无穷无尽的不同色彩。色调较少见于网页设计，在评论、引言或重点突出文字等排版元素中会比较有用。

色彩的三要素 —— 色相、明度、纯度

色相（表，表现）

色彩的相貌和特征。

自然界中色彩的种类很多，色相指色彩的种类和名称。

如；红、橙、黄、绿、青、蓝、紫等等颜色的种类变化就叫色相。

明度（表，面子）

色彩的亮度或明度，也叫明亮度。

颜色有深浅、明暗的变化。比如，深黄、中黄、淡黄、柠檬黄等黄颜色在明度上就不一样，紫红、深红、玫瑰红、大红、朱红、桔红等红颜色在亮度上也不尽相同。这些颜色在明暗、深浅上的不同变化，也就是色彩的又一重要特征一一明度变化。

色彩的明度变化有许多种情况，

一是不同色相之间的明度变化。如：白比黄亮、黄比橙亮、橙比红亮、红比紫亮、紫比黑亮；

二是在某种颜色中加白色，亮度就会逐渐提高，加黑色亮度就会变暗，但同时它们的纯度(颜色的饱和度)就会降低，

三是相同的颜色，因光线照射的强弱不同也会产生不同的明暗变化。

纯度（里，里子）

色彩的鲜艳程度，也叫饱和度，原色是纯度最高的色彩。

颜色混合的次数越多，纯度越低，反之，纯度则高。

原色中混入补色，纯度会立即降低、变灰。物体本身的色彩，也有纯度高低之分，西红柿与苹果相比，西红柿的纯度高些，苹果的纯度低些。

有好的表现，必然有一定的面子跟里子做基础。

关于水的色彩观念 —— 水，首先是无色的；其次是白色的（可以降低纯度，提高明度；最后是任意色的（经光照反色多彩或折射七彩）。

色生心中：人性化的HSL模型

HSL色彩模型又是什么？HSL同样使用了3个分量来描述色彩，与RGB使用的三色光不同，HSL色彩的表述方式是：H(hue)色相，S(saturation)饱和度，以及L(lightness)亮度。

听起来一样复杂？稍后你就会发现，与“反人类”的RGB模型相比，HSL是多么的友好。

HSL的H(hue)分量

代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。

HSL的S(saturation)分量

指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。

数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化。

HSL的L(lightness)分量

指的是色彩的明度，作用是控制色彩的明暗变化。

它同样使用了0%至100%的取值范围。

数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

采用HSL颜色体系后, 更能便捷地选取自己偏好或当前合适的颜色.

特别对于随机色的表示, 采用RGB可能不太友好(有时偏暗, 外观不佳), 可试试HSL. 如下所示(仅示范, 细心调试后更佳):

网页调色板

颜色选择器

使用颜色选择器，在选择器区域内点击并拖动光标，在右侧标出一种颜色。

在颜色样本下方区域输入Hex、RGB、HSL、Lab、CMYK值来搜索某个特定颜色；点击样本将其添加到您的调色板。

选中一个颜色之后，使用颜色选择器下方的下拉菜单尝试不同色彩搭配。

色彩调和

色彩调和是两种或两种以上颜色从其在色轮上的关系衍生而来的令人非常愉悦的组合。

色彩调和，也称为色彩和弦，可以用来探究一种调色板，或可作为一种独立的色彩方案。

色轮上互相正对着的颜色被称为互补色。

互补色有很高的对比度，配合更为中性的调色板使用时，作为重点色的效果非常好。

三合一色彩和谐由三种在色轮上互相之间距离相等的颜色组成。

与互补色类似，三合一方案通常非常明亮，对比度较高，一种颜色作为主导时效果最佳。

四色色彩和谐由色轮上相隔60度的两组对比色形成。

四色系对创建调色板来说是非常好的起点；使用色度、色彩和色调进行微调。

类似色色彩和谐是通过选择与所选颜色直接相邻的颜色创建而成。

类似色方案在网页设计很常见，与互补色搭配使用实现对比，非常具有通用性。

与类似色色彩和谐一样，中性色方案通过选择与所选颜色两侧形成，但距离只有一半。

类似色方案通常使用30度间隔的颜色，但中性色系使用15度间隔的颜色。

更多颜色知识，请见本文最下方的参考推荐，都是米扑博客总结的经典

最经典、最炫酷、最实用的颜色库，推荐米扑博客颜色表，最强烈的推荐哦！

米扑博客颜色表：https://blog.mimvp.com/color/

参考推荐：

米扑博客颜色表 （强烈推荐）

HSL 颜色处理

HSL 与 RGB 转换

RGB与HSB之间的相互转换

JS HEX十六进制与RGB、HSL颜色的相互转换

RGB、HSV色彩模式转换函数及模拟windows调色板

HTML 颜色名

W3School 颜色测试

14款Web开发速查表

RGB、HEX颜色生成器

寻找完美色彩是如此简单

色彩HSL、HSV、HSB有什么区别