前言
想要示意web中的各种色彩，大家首先想到的大略就是用十六进制或者RGB来示意。但在理论web中，是远不止这两种的。明天这篇文章就和大家聊一聊，在web中色彩的各种示意办法。
以如下代码为例，大家能够复制代码看看成果：
HTML
<div class="box"> <div class="one"></div> <div class="two"></div> <div class="three"></div></div>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 则不会。感兴趣的能够试一试。
关键字
除了 <color>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( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ] )例子：
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( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )<cmyk-component> = <number> | <percentage>例子：
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中的色彩示意办法，根本就是这些。如果想要再深刻理解的，能够点击文中的文字链接或文末的参考链接。