关于web中的颜⾊表⽰⽅法，你知道多少？
前⾔
想要表⽰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之上扩展了⼀个 ，指定对象的不透明度。
.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;
}
相当于
html中的5种空格表示
.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() 函数表⽰法表⽰ 中的给定颜⾊，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);
参考
最后
关于web中的颜⾊表⽰⽅法，基本就是这些。如果想要再深⼊了解的，可以点击⽂中的⽂字链接或⽂末的参考链接。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。