欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

十六进制颜色识别和匹配规则

最编程 2024-05-04 16:53:41
...

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

想要学习前端开发的同学,可以加群:

543627393

学习哦!


推荐阅读