关于web中的颜色表示方法，你知道多少（）关于web中的颜色表示方法，你

前言想要表示web中的各种颜色，大家首先想到的大概就是用十六进制或者RGB来表示。但在实际web中，是远不止这两种的。今天这篇文章就和大家聊一聊，在web中颜色的各种表示方法。
以如下代码为例，大家可以复制代码看看效果：
HTML

CSS

.box { width: 200px; height: 200px; padding: 20px 20px; 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％是白色。

例子：

.one { background-color: hsl(20, 100%, 50%); } .two { background-color: hsl(130, 100%, 25%); } .three { background-color: hsl(240, 80%, 80%); }

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

hsla(hue, saturation, lightness, alpha)

例子：

.one { background-color: hsla(20, 100%, 50%, 0.5); } .two { background-color: hsla(130, 100%, 25%, 0.75); } .three { background-color: hsla(240, 80%, 80%,0.4); }

opacity opacity 属性设置一个元素了透明度级别。
CSS语法如下：

opacity: value|inherit;

它与 RGBA 中的 A 在行为上有一定的区别：opacity 同时影响子元素的样式，而 RGBA 则不会。感兴趣的可以试一试。
关键字除了 s 的各种数字语法之外，CSS还定义了几组关于颜色的关键字，这些关键字都有各自的有点和用例。这里介绍一下两个特殊的关键字 transparent 和 currentcolor 。
transparent
transparen 指定透明黑色，如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素；或者你不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计。 transparent 就能派上用场了。
在CSS1中，transparent 是作为 background-color 的一个值来用的，在后续的 CSS2 和 CSS3 中， transparent 可以用在任何一个有 color 值的属性上了。

.one { background-color: transparent; color: transparent; border-color: transparent; }

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

.one { color: red; border: 1px solid currentcolor; }

相当于

.one { color: red; border: 1px solid red; }

下面介绍的这些目前主流浏览器还没有很好的支持，但是已经列为CSS4标准了，所以了解一下也是挺好的。
HWB hwb() 函数表示法根据颜色的色调、白度和黑度来表示给定的颜色。也可以添加 alpha 组件来表示颜色的透明度。
语法如下：

hwb[a](H W B[/ A])

例子：

hwb(180 0% 0%) hwb(180 0% 0% / .5) hwb(180, 0%, 0%, .5); /* 使用逗号分隔符 */

目前只有Safari支持。
Lab、Lch lab() 函数表示法表示 CIE L a b * 颜色空间中的给定颜色，L 代表亮度，取值范围是[0,100]； a 代表从绿色到红色的分量，取值范围是[127,-128]； b* 代表从蓝色到黄色的分量，取值范围是[127,-128]。理论上可以展示出人类可以看到的全部颜色范围。
语法如下：

lab(L a b [/ A])

例子：

lab(29.2345% 39.3825 20.0664); lab(52.2345% 40.1645 59.9971);

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

lch(L C H [/ A])

例子：

lch(29.2345% 44.2 27); lch(52.2345% 72.2 56.2);

关于常用颜色空间的概念，可以自行查询，或者点击这篇文章进行了解。
color() color() 函数表示法允许在特定的颜色空间中指定颜色。
语法如下：

color( [ [ | ]? [ + |] [ /]? ] )

例子：

color(display-p3 -0.6112 1.0079 -0.2192); color(profoto-rgb 0.4835 0.9167 0.2188)；

这里可以了解一下色域标准。
CMYK CMYK 即印刷四色模式

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

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

device-cmyk() = device-cmyk( {4} [ /]? , ? ) = |

例子：

device-cmyk(0 81% 81% 30%); device-cmyk(0 81% 81% 30% / .5);

参考 https://www.w3school.com.cn/c...
https://www.w3.org/TR/css-col...
https://www.cnblogs.com/ypppt...
https://developer.mozilla.org...
https://blog.csdn.net/gdymind...
https://blog.csdn.net/JiangHu...
最后 【关于web中的颜色表示方法，你知道多少（）】关于web中的颜色表示方法，基本就是这些。如果想要再深入了解的，可以点击文中的文字链接或文末的参考链接。