「进击的前端工程师」CSS色彩揭秘

往往说起色彩，我总会想起苏轼的一年好景君须记，正是橙黄橘绿时，白居易的日出江花红胜火，春来江水绿如蓝，朱熹的等闲识得东风面，万紫千红老是春。

也许世界本无色彩。

古人曾用诗词赋予了这个世界色彩，而现在是物理的光学让咱们认识到了色彩。那么本文将带你揭秘CSS中的色彩。

先赞在看，养成习惯！

CSS中的color

CSS1只支持16个基本颜色关键字

CSS2在CSS1的基础上添加了橙色orange

CSS3增长了147个关键字

CSS4只增长了一个关键字 rebeccapurple

连接：CSS3中新增147个颜色关键字

我知道你会说这个CSS4的新增的一个关键字rebeccapurple是什么鬼？还嫌我英文单词记的不够多吗？搞个这么难记的东西出来？

但实际上，CSS的做者Eric Meyer 的女儿丽贝卡死于脑癌，享年六岁。这是她最喜欢的颜色。

丽贝卡紫

连接：为了记念 Eric Meyer 的女儿，色值 #663399 在 CSS4 中被定义为 「rebeccapurple」

冰冷严谨的代码中充满了如此温情之举，你值得记忆。

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.特殊阶段，带好口罩，作好我的防御。