「进击的前端工程师」CSS色彩揭秘
观感度：🌟🌟🌟🌟🌟
口味：蟹肉拌饭
烹饪时间：15min
每每提及色彩，我总会想起苏轼的一年好景君须记，正是橙黄橘绿时，白居易的日出江花红胜火，春来江水绿如蓝，朱熹的等闲识得东风面，万紫千红总是春。
也许世界本无色彩。
古人曾用诗词赋予了这个世界色彩，而如今是物理的光学让我们认识到了色彩。那么本文将带你揭秘CSS中的色彩。
先赞在看，养成习惯！
CSS中的color
CSS1只支持16个基本颜色关键字
CSS2在CSS1的基础上添加了橙色
orangeCSS3增加了147个关键字
CSS4只增加了一个关键字
rebeccapurple
CSS3中新增147个颜色关键字
https://www.w3school.com.cn/cssref/css_colornames.asp
我知道你会说这个CSS4的新增的一个关键字rebeccapurple是什么鬼？还嫌我英文单词记的不够多吗？搞个这么难记的东西出来？
但实际上，CSS的作者Eric Meyer 的女儿丽贝卡死于脑癌，享年六岁。这是她最喜欢的颜色。
丽贝卡紫
为了纪念 Eric Meyer 的女儿，色值 #663399 在 CSS4 中被定义为 「rebeccapurple」
https://lists.w3.org/Archives/Public/www-style/2014Jun/0312.html
冰冷严谨的代码中充满了如此温情之举，你值得记忆。
RGB
三原色理论告诉我们，红、绿、蓝三种颜色的光可以构成所有的颜色。
为什么是这三种颜色呢？
因为人类的视神经对这三种颜色比较敏感。
现代计算机中用0-255的数字来表示每一种颜色。在RGB颜色表示方法中，三色数值最大的就是白色，三色数值为0则表示黑色。理解起来也比较符合人类的认知，红绿蓝三种颜色的光混合起来就是白光，没有光就是黑色。
除此之外，我们需要注意两点：
1.rgb数值格式只能是整数，不能是小数。
2.还可以用百分比来进行表示，百分比范围0%-100%
RGB表示法
#div {background-color:rgb(255,0,0);} /* 红 */
#div {background-color:rgb(0,255,0);} /* 绿 */
#div {background-color:rgb(0,0,255);} /* 蓝 */
16进制表示法 HEX
十六进制颜色实际上和rgb颜色是近亲，都归属于rgb颜色，只是进制有差异。
#div {background-color:#FF0000;} /* 红 */
#div {background-color:#00FF00;} /* 绿 */
#div {background-color:#0000FF;} /* 蓝 */
RGBA
RGBA是在RGB的扩展，增加了一个Alpha的色彩通道，规定了透明度(取值范围0～1)，0表示全透明。
RGBA代码
div {background:rgba(255,0,0,0.5);}
RGBA与opacity的区别？
opacity是属性，rgba()是函数，计算之后是个属性值。
rgba一般修改的是背景色或者文本的颜色，内容不会继承透明度。
opacity作用于元素和元素的内容，内容会继承透明度。
HSL
人类对颜色的感知是远远大于红、绿、蓝的，因此HSL颜色模型被设计出来。
HSL分别代表色相，纯度以及明度，也有色调、饱和度、亮度的说法。
h表示hue，取值0-360。大致按照红橙黄绿青蓝紫变化 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
s表示saturation，用0-100%表示。值越大，饱和度越高，颜色越亮 0%为灰色，100%为全色
l表示lightness，用0-100%表示。值越高，颜色越亮，100%是白色，50%是正常亮度，0%就是黑色
HSLA
如同RGBA模式是RGB的扩展模式，HSLA模式是HSL的扩展模式，在HSL的基础上增加一个透明通道Alpha来设置透明度。
CMYK
回忆起儿时美术老师(我们区的美术协会主席)曾经教过，颜料的三原色是“红黄蓝”。
而颜料能够显示颜色的原理是它吸收了所有别的颜色的光，只返回一种色彩。这个世界就是这么魔幻，你看到的不一定是你看到的。
颜料三原色是红、绿、蓝的补色，也可以叫它们“品红、黄、青”。这种颜色表示法就叫做CMYK。
熟悉UI设计的同学们一定知道，在印刷业，就是采用颜料三原色来配置油墨。不过除了品红、黄、青外，因为黑色颜料常用并且价格低廉，所以被单独指定。
transparent
transparent用来指定全透明色彩，我们可以利用这个属性画出三角形。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ff0000;
}
<div class="triangle"></div>
transparent也比较魔幻，background-color:transparent包括IE6都支持，boder-color:transparent从IE7开始支持，但是color:transparent却从IE9浏览器开始支持。
currentColor
currentColor的意思是使用当前color的计算值，也从IE9+才支持。
CSS中很多的属性值默认就是currentColor的表现。
div {
color: red;
border: 1px solid;
}
一般情况下无须画蛇添足的添加currentColor。
div {
color: red;
border: 1px solid currentColor;
}
兼容性查询
授人以鱼不如授人以渔。
大家可以去这个网站查找你所要用的属性在浏览器中的兼容性。
❤️爱心三连击
1.看到这里了就点个在看支持下吧，你的在看是我创作的动力。
2.关注公众号前端食堂，你的前端食堂，记得按时吃饭！
3.特殊阶段，带好口罩，做好个人防护。
推荐阅读：