首页 > 技术文章 > 16进制颜色识别和搭配规律

maderlzp 2017-11-08 11:15 原文

在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为暗绿,数值更大,颜色变亮,数值越小,颜色越暗

 

推荐阅读