16进制颜色识别和搭配规律

在CSS中，经常会用到16进制的颜色来设置文本、背景、边框等颜色，但是对于一个纯前端来讲，16进制颜色的识别和搭配可能会较为陌生了 ,本文简单介绍一下16进制颜色的一些规律

 

16进制颜色的数值意义：

举个例子：比如 #1A2BF4（不区分大小写），前两位1A表示的是RGB中R（Red：红色），2B表示的是RGB中的G（Green：绿色），F4表示RGB中的B（Blue：蓝色），大小从00（0）到FF（255），数值越高，颜色越深。

 

16进制颜色的混合：

比如对于#FF0000，绿色和蓝色都是00，而红色则是FF，则该颜色#FF0000就是红色，#550000也是红色，但是要比#FF0000的红要浅。同理，#00FF00表示绿色，#0000FF表示蓝色。

根据颜色混合原理，其实是跟物理学是一样的，红绿混合（#FFFF00）为黄色，红蓝混合（#FF00FF）为紫红色（也叫洋红），蓝绿混合（#00FFFF）为青色，而红绿蓝混合（#FFFFFF）则是白色，

#000000为黑色。

将#XXYYZZ分组，XX为第一组，YY为第二组，ZZ为第三组。显然XX，YY，ZZ分别对应红绿蓝。

1.当第一组较大，其余两组较小时，颜色偏红。

2.当第二组较大，其余两组较小时，颜色偏绿。

3.当第三组较大，其余两组较小时，颜色偏蓝。

4.当第一、二组较大，第三组较小时，颜色偏黄。

5.当第一、三组较大，第二组较小时，颜色偏紫红。

6.当第二、三组较大，第一组较小时，颜色偏青。

7.三组比较接近或相等时，颜色为灰色。可以通过改变数值大小来调配灰色的深浅（也可以叫明暗，数值越高越明亮，低则较暗）。如#e3e3e3表示的灰色比#a3a3a3表示的灰色要浅，当接近（#FFFFFF白色）时，灰色就很浅了。

 

颜色的明暗（深浅）：

对于一个纯色的值是0~255即256种，对应00~FF，当颜色处于中间即 256/2=128（换算成16进制为80），可以看成为颜色明暗的分界线。如#800000为暗红，#008000为暗绿，数值更大，颜色变亮，数值越小，颜色越暗