共计 4043 个字符,预计需要花费 11 分钟才能阅读完成。
前言
想要示意 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 中的色彩示意办法,根本就是这些。如果想要再深刻理解的,能够点击文中的文字链接或文末的参考链接。