如何使用和计算RGB、HSL和Hex web color十六进制颜色编码方法？

在网页使用的颜色标记方式中，大家自古以来就使用了十六进制颜色代码（#000000）、RGB颜色值标记和HSL颜色标记。包括网页设计师最常用的十六进制颜色代码标记方法，以及十六进制代码是如何计算颜色的？有没有办法直接在头脑中计算颜色？如何使用和记忆HSL颜色？有什么技巧或窍门吗？让我们来阅读一系列问题。

RGB颜色

网页设计中RGB颜色的标记方法是RGB(0~255, 0~255, 0~255)，其中括号内用逗号分隔的三组数值正好是( R ，G，B）颜色值，所以取值范围是0到255的256个值。关于RGB颜色大家都应该知道的混色原理是加法混色。让我们用灯光来思考一下。假设 0 到 255 之间的值被视为光的亮度。 0 表示灯未打开，255 表示灯打开至最亮。所以如果我把红灯调到最亮的设置，另外两种颜色不开的话，就是RGB(255,0,0)。当然这样的话，如果只有红灯亮，没有其他颜色亮的话，你看到的就是红色的。然后如果我只打开一半的红灯，像这个RGB(127,0,0)，它会变成深红色，因为它不是在最亮的设置上，这应该很容易理解。

如果颜色预设都是100%饱和度，如果你想调低颜色使其更亮，只需将颜色饱和度调整为0%即可。色彩饱和度（Saturation）与色彩亮度（Lightness）的区别在于，色彩饱和度（Saturation）降低后，色彩变得不那么鲜艳。越接近灰色而不是黑色，这一点必须加以区分。

所以，了解了上面三个HSL值的区别后，如果今天我们想要黄色，我们可以先设置HSL（60, 100%, 50%），阴影60度为黄色，默认值为 100% 饱和度（鲜艳），默认正常亮度为 50%。如果我们需要鹅黄色，我们只需要在黄色的基础上加一点白色，所以我们只需要调整L的值，就像这个HSL（45, 100%, 80%），如果我们想要颜色是接近橙色，那么我们可以调整色相（Hue）角度，在R方向调整，像这个HSL（40, 100%, 80%），是不是就变得容易多了？ 。

十六进制颜色

十六进制代码的缩写是Hex。在 HTML&CSS 中，十六进制代码的颜色以井号 (#) 开头，后面跟着 6 个数字来表示该颜色。标签方式太长，让很多设计师用不着，反而有点困惑。就选红色或者粉色，不知道怎么写。他们仍然必须依靠 Dreamweaver 的调色板来编写它。其实，穿搭颜色代码并没有那么难。我们只需要明白三个问题就可以学会它。下面我们简单解释一下。

十进制原理

第一个问题是：什么是十六进制？一般来说，我们常用的进位方式是10进位，也就是说一个“数”只要超过第十位就进位。如果你还不明白，我们看下图的解释。

十六进制原理

如上图所示，数字的第十一位被取代。这也是最常用的计算方法。十六进制的概念也是一样的，只不过是“进位”。因为从第11位开始没办法写“11”（2位数字是进位，所以不能这么写），所以从第11位开始用英文字母abcdef作为数字，所以完整的十六进制进位大约如下图所示。第16位的代表字母是“f”。超过第16位后，进行传送。

十六进制颜色表示

第二个问题是：如何突出显示这个十六进制代码的颜色？基本上，HTML 和 CSS 中的十六进制颜色代码分为三组数字。每两个代码代表一种颜色，如下图

在图中可以看到十六进制代码中六个代码的前两个代码。是RGB颜色中的R颜色，中间的两个数字代表G颜色，最后两个数字代表B颜色。如果我们将十六进制代码视为光的强度，则#000000 RGB 表示三。如果没有一种颜色发光，那么在没有光的情况下你看到的就是黑色。如果我们想显示红色，我们将R色灯调到最大，这样#FF0000就会看到红色。我们再做一项练习。如果我们想要黄色，我们将红光和绿光混合，所以我们将红光和绿光设置为最大#FFFF00，就像这样，你可以看到黄色。

十六进制亮度调节技巧

上述方法最多使用两种颜色，通常使用原色，可能问题不大。现在让我们继续使用十六进制颜色。我们知道，色光是加色的混合物，加的越多，颜色就越亮。所以如果我们想要鹅的部分，我们可以先添加黄色，然后混合一点蓝色，这将用于调整HSL颜色的亮度。当添加蓝光时，它会变得更亮，您还会看到出现淡黄色，所以我们的源代码可能看起来像这样#ffffcc。

你还不明白吗？简单来说，如果使用十六进制代码设置颜色，第一步就是设置原色，然后设置第三种颜色调整亮度，就完成了！如果我们想调暗的话，就需要把原来的两个颜色值调低（也就是光强的概念高一点），这样就可以调节颜色了！事实上，这并没有那么困难。你应该可以通过写三四次来开始。希望大家都能成为设置十六进制代码的高手。

作者：jelly tfzwgd
来源：掘金