什么是RGB、HEX、HSL？

在Photoshop等绘图或修图软件中，经常会看到调色板下面的RGB选项，通常让你输入数值或者拉动调节杆。那么，什么是RGB、HEX、HSL呢？如何精确输入一定的数值来调和出我们想要的颜色？

无论是RGB、HEX，还是HSL，它们的作用只有一个：用数字表达出一种颜色。

它是电脑中用得最多的调色方式。在电脑调色板下面，经常能看到RGB（Red, Green, Blue）。

RGB通过输入的数值，将红色、绿色和蓝色的光源以一定的量混合在一起，形成颜色。

软件中通常让你输入Red、Green、Blue对应的三个整数的数值，且范围必须在0-255之间。稍加计算，我们会发现：通过调节RGB的数值，可以得到256×256×256=16777216种颜色！当然，这只是理论上的数量。实际上，你光凭肉眼根本无法分辨这么多种颜色，另外颜色的正确显示及准确过渡取决于显示器的色域和色彩深度。详见 @柴知道 在微博上发表的视频：

我们通过W3Schools简单进行试验一下：

将三种光的数值全部调成0，则显示的是黑色。

将三种颜色的数值全部调节成255，则显示的是白色。

下面这个视频所展示的是用调节RGB的数值来展现黑色-棕色-红色-橙色-黄色-绿色-蓝色-紫色-红色的渐变过程：

RGB的结构是：rgb(red, green, blue)。以下列举了一些常用颜色的RGB数值。

红色：rgb(255, 0, 0)

橙色：rgb(255, 128, 0)

黄色：rgb(255, 255, 0)

绿色：rgb(0, 255, 0)

蓝色：rgb(0, 0, 255)

紫色：rgb(170, 0, 255)

黑色：rgb(0, 0, 0)

白色：rgb(255, 255, 255)

灰色：rgb(128, 128, 128)（只要三色值相等即可，值越接近255，就越接近白色，反之亦然）

有些时候，除了Red, Green, Blue以外，还会有一个需要设置的数值，那就是Alpha（不透明度）。这时候我们把它们叫做RGBA，Alpha通常可有可无。Alpha值通常在0.0与1.0之间，1.0表示完全不透明，0.0表示完全透明。

例如，同样是红色(255, 0, 0)，A值0.3与0.8之间的区别显而易见：

上面是当A值为0.3时候显示的颜色。

这是A值为0.8时显示的颜色。

PS：让我们做一个眼力小测试吧！

上下两幅图中，哪个红色较浅，哪个较深呢？比较简单，普通人都能在3秒内辨别出来。

言归正传，我们再讲下一种：

其实它和RGB的原理差不多，都是用Red, Green, Blue相混合所产生的颜色，只不过换成了十六进制。

HEX的格式：# rrggbb

可能很多小伙伴对十六进制运用得不太熟练，建议大家先去熟练掌握不同进制的计数方法。

10用a表示，11用b表示，12用c表示，13用d表示，14用e表示，15用f表示。（也可以用大写字母表示，这里用小写字母。）

十六进制数列：1，2，3，4，5，6，7，8，9，a，b，c，d，e，f，10，11，…，aa，ab，ac，…，fc，fd，fe，ff。

对应的十进制数列：1，2，3，4，5，6，7，8，9，10，11，12，13，14，15，16，17，…，170，171，172，…，252，253，254，255。

举个例子，把RGB(255, 128, 0)转换成HEX的格式，就是# ff8000。在有些软件中，直接输入这串数字就能直接找到对应的颜色，例如刚刚举的例子，调色板就会出现下面这种颜色。

对，就是上面这种颜色。

HSL表示色相（Hue）、饱和度（Saturation）、亮度（Lightness）。结构是：hsl(hue, saturation%, lightness%)。其中饱和度和亮度是百分比，不是数值。

对色相、饱和度、亮度的概念不清楚的小伙伴，参见这篇文章：

色相（Hue）的数值表示这种颜色在色相环中的度数。0表示色相环中0°的位置，即红色。同理，120表示绿色，240表示蓝色。

饱和度（Saturation）由0%到100%，其中0%其实就是灰色，100%是最鲜艳、最充分的颜色。

亮度（Lightness）也是由0%到100%，其中0%其实就是黑色，100%也就是白色。注意：亮度可以粗略地认为它就是明度，但它们之间也是有区别的。

例如，我们把RGB(255, 128, 0)转换成HSL，就是hsl(30, 100%, 50%)。不知道怎么转换的小伙伴们，用下面这款小工具即可转换，简单快捷（不是打广告）：

HSL与RGB一样，都有一个附加值，即Alpha（不透明度），这时候HSL就变成了HSLA。A值和RGB一样，由0.0到1.0。0.0最透明（就是空白），1.0最不透明，就像下面两张图：

以上是这篇文章的全部内容，本期的「硬核科普」就到这里。下面说几点需要注意的：