关于web中的颜色表示方法,你知道多少?

发布网友发布时间：2024-09-27 23:05

我来回答

共1个回答

热心网友时间：2024-10-07 10:03

前言

想要表示web中的各种颜色，大家首先想到的大概就是用十六进制或者RGB来表示。但在实际web中，是远不止这两种的。今天这篇文章就和大家聊一聊，在web中颜色的各种表示方法。

以如下代码为例，大家可以复制代码看看效果：

HTML

<divclass="box"><divclass="one"></div><divclass="two"></div><divclass="three"></div></div>

CSS

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}英文单词

HTML和CSS颜色规范中预定义了140+个颜色名称，可以点进这里进行查看。直接用英文单词的好处是直接明了，缺点是140+个单词确实难记，也不能包含所有的颜色。

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}十六进制

十六进制表示颜色：#RRGGBB，这里的十六进制实质就是RGB的十六进制表示法，每两位表示RR（红色）、GG（绿色）和BB（蓝色）三色通道的色阶。所有值必须在00到FF之间。

.one{background-color:#00FFFF;}.two{background-color:#FAEBD7;}.three{background-color:#7FFFD4;}

对于类似于#00FFFF的颜色格式也可以缩写为#0FF。

.one{background-color:#0FF;}

如果需要带上透明度，还可以像下面这样增加两个额外的数字：

.one{background-color:#00FFFF80;}RGB

在rgb()函数中，CSS语法如下：

rgb(red,green,blue)

每个参数red,green,blue定义颜色的强度，可以是0到255之间的整数或百分比值（从0％到100％）

.one{background-color:rgb(112,128,144);}.two{background-color:rgb(30%,10%,60%);}.three{background-color:rgb(0,139,139);}

十六进制和RGB的原理都是利用了光的三原色：红色，绿色，蓝色。利用这三种颜色就能组合出上千万种颜色。简单的计算一下，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216种。至于为什么是256级，因为0也是数值之一。

RGBA

RGBA就是在RGB之上扩展了一个Alpha通道，指定对象的不透明度。

.one{background-color:rgba(112,128,144,0.5);}.two{background-color:rgb(30%,10%,60%,0.2);}.three{background-color:rgb(0,139,139,0.5);}HSL

HSL分别代表色相（hue）、饱和度（saturation）和亮度（lightness），是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。

CSS语法如下：

hsl(hue,saturation,lightness)

色相：色轮上的度数（从0到360）-0（或360）是红色，120是绿色，240是蓝色。

饱和度：一个百分比值；0％表示灰色阴影，而100％是全彩色。

亮度：一个百分比；0％是黑色，100％是白色。

例子：

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}0HSLA

HSLA和HSL的关系与RGBA和RGB的关系类似，HSLA颜色值在HSL颜色值上扩展Alpha通道-指定对象的不透明度。

CSS语法如下：

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}1

例子：

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}2opacity

opacity属性设置一个元素了透明度级别。

CSS语法如下：

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}3

它与RGBA中的A在行为上有一定的区别：opacity同时影响子元素的样式，而RGBA则不会。感兴趣的可以试一试。

关键字

除了<color>s的各种数字语法之外，CSS还定义了几组关于颜色的关键字，这些关键字都有各自的有点和用例。这里介绍一下两个特殊的关键字transparent和currentcolor。

transparent

transparen指定透明黑色，如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素；或者你不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计。transparent就能派上用场了。

在CSS1中，transparent是作为background-color的一个值来用的，在后续的CSS2和CSS3中，transparent可以用在任何一个有color值的属性上了。

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}4currentcolor

currentcolor关键字可以引用元素的color属性值。

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}5

相当于

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}6

下面介绍的这些目前主流浏览器还没有很好的支持，但是已经列为CSS4标准了，所以了解一下也是挺好的。

HWB

hwb()函数表示法根据颜色的色调、白度和黑度来表示给定的颜色。也可以添加alpha组件来表示颜色的透明度。

语法如下：

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}7

例子：

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}8

目前只有Safari支持。

Lab、Lch

lab()函数表示法表示CIELab*颜色空间中的给定颜色，L代表亮度，取值范围是[0,100]；a代表从绿色到红色的分量，取值范围是[127,-128]；b*代表从蓝色到黄色的分量，取值范围是[127,-128]。理论上可以展示出人类可以看到的全部颜色范围。

语法如下：

.box{width:200px;height:200px;padding:20px20px;display:flex;justify-content:space-between;}.box>div{width:50px;height:50px;border-radius:4px;}9

例子：

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}0

lch()函数表示法表示CIELCH颜色空间中给定的颜色，采用了同Lab*一样的颜色空间，但它采用L表示明度值，C表示饱和度值，H表示色调角度值的柱形坐标。

语法如下：

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}1

例子：

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}2

关于常用颜色空间的概念，可以自行查询，或者点击这篇文章进行了解。

color()

color()函数表示法允许在特定的颜色空间中指定颜色。

语法如下：

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}3

例子：

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}4

这里可以了解一下色域标准。

CMYK

CMYK即印刷四色模式

印刷四色模式，是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。四种标准颜色是：C：Cyan=青色，又称为‘天蓝色’或是‘湛蓝’M：Magenta=品红色，又称为‘洋红色’；Y：Yellow=黄色；K：blacK=黑色。此处缩写使用最后一个字母K而非开头的B，是为了避免与Blue混淆。CMYK模式是减色模式，相对应的RGB模式是加色模式。

电脑显示屏使用RGB颜色值显示颜色，而打印机通常使用CMYK颜色值显示颜色。在CSS4标准中，计划利用device-cmyk()函数来实现。

语法如下：

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}5

例子：

.one{background-color:red;}.two{background-color:green;}.three{background-color:blue;}6参考

https://www.w3school.com.cn/cssref/css_colors_legal.asp

https://www.w3.org/TR/css-color-4/

https://www.cnblogs.com/ypppt/p/13229542.html

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

https://blog.csdn.net/gdymind/article/details/82357139

https://blog.csdn.net/JiangHui1211/article/details/84592774

最后

关于web中的颜色表示方法，基本就是这些。如果想要再深入了解的，可以点击文中的文字链接或文末的参考链接。