本人才疏学浅，如有错误请指正。 在Photoshop等绘图或修图软件中，经常会看到调色板下面的RGB选项，通常让你输入数值或者拉动调节杆。那么，什么是RGB、HEX、HSL呢？如何精确输入一定的数值来调和出我们想要的颜色？
无论是RGB、HEX，或是HSL，它们的作用只有一台：用数字表达出一种颜色。
<hr/>一、RGB
它是电脑中用得最多的调色方式。在电脑调色板下面，经常能看到RGB（Red, Green, Blue）。
RGB通过输入的数值，将红色、绿色和蓝色的光源以一定的量混合在一起，形成颜色。
软件中通常让你输入Red、Green、Blue对应的三个整数的数值，且范围必须在0-255之间。稍加计算，我们会发现：通过调节RGB的数值，可以得到256×256×256=16777216种颜色！当然，这只是理论上的数量。实际上，你光凭肉眼根本无法分辨这么多种颜色，另外颜色的正确显示及准确过渡取决于显示器的色域和色彩深度。详见 @柴知道 在微博上发表的视频：
我们通过W3Schools简单进行试验一下：
将三种光的数值全部调成0，则显示的是黑色。
将三种颜色的数值全部调节成255，则显示的是白色。
下面这个视频所展示的是用调节RGB的数值来展现黑色-棕色-红色-橙色-黄色-绿色-蓝色-紫色-红色的渐变过程：
调整RGB数值，得到不同的颜色
https://www.zhihu.com/video/1264975426562473984
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时显示的颜色。
<hr/>PS：让我们做一台眼力小测试吧！
上下两幅图中，哪个红色较浅，哪个较深呢？比较简单，普通人都能在3秒内辨别出来。
言归正传，我们再讲下一种：
<hr/>二、HEX
其实它和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。在有些软件中，直接输入这串数字就能直接找到对应的颜色，例如刚刚举的例子，调色板就会出现下面这种颜色。
对，就是上面这种颜色。
<hr/>三、HSL
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最不透明，就像下面两张图：
hsla(30, 100%, 50%, 0.2)
hsla(30, 100%, 50%, 0.7)
以上是这篇文章的全部内容，本期的「硬核科普」就到这里。下面说几点需要注意的：
- 这篇文章所讲到的颜色，要想精确地在你的电脑或手机等显示器上显示，你的显示器必须达到8 Bit（8位色深，能显示16777216种颜色）。
- 这篇文章所讲到的颜色由于技术原因，会有一定误差，但肉眼分辨不出来。
- 对于之前的「眼力小测试」，绝大多数人都能在3秒内分辨出来，即使是在iPhone 4s上也能正确显示这两种颜色。如果你一直都无法分辨出两种颜色的差别，首先要排查是否是显示器出现了问题。如果不是，说明你的色觉出现退化或出现异常，问题严重时建议就医。
- 这篇文章难免有疏忽之处，如有，请指出。
|
用Deepseek满血版问问看
