HSLA与RGBA

2017-06-11

选择颜色的时候我一般使用 rgba 的方式，简便易理解，所有颜色都是由三原色（红、绿、蓝）各种混合而成。但其实真正明白 CSS3 的 HSLA 就知道 HSLA 其实更好用，例如在在提高颜色亮度方面非常方便。

HSLA 是由 H：HUE（色调）、S：Saturation（饱和度）、L：Lightness（亮度）和 A：Alpha（透明度）组成。控制颜色的是色调，0 为红色、120 为绿色、240 为蓝色

如红色就是

1	background-color: hsla(0, 80%, 50%, 1);

然后把亮度调到 80%，即：

1	background-color: hsla(0, 80%, 80%, 1);

颜色变浅了

如果亮度为 30% ：

1	background-color: hsla(0, 80%, 30%, 1);

变暗红了。

来电极端的，亮度为 100% ：

1	background-color: hsla(0, 80%, 100%, 1);

变为白色了，不管什么颜色都好，只要亮度为 100% 都为白色，亮度为 0% 都为黑色。

再试试饱和度，那第一个例子，饱和度变为 50%，即：

1	background-color: hsla(0, 50%, 50%, 1);

颜色感觉浅暗了点，关于这方面的知识我也不是很懂，引用维基百科的说法：

色度指得是色彩的纯度，也叫饱和度或彩度，是“色彩三属性”之一。如大红就比玫红更红，这就是说大红的色度要高。它是HSV色彩属性模式，孟塞尔颜色系统等的描述色彩变量。

从广义上说，黑白灰是“色度=0”的颜色。在各种色彩模型中，对色度有不同的量化模式。

色度由光线强弱和在不同波长的强度分布有关。最高的色度一般由单波长的强光（例如激光）达到，在波长分布不变的情况下，光强度越弱则色度越低。

当饱和度为 0% 时，也是不管什么颜色都好，都会变成灰色

1	background-color: hsla(0, 0%, 50%, 1);

十六进制色值是 #7F7F7F

饱和度为 100% 就是该颜色最为鲜艳巅峰饱和的状态了，如红色：

1	background-color: hsla(0, 100%, 50%, 1);

关于 HSLA 的大概了解就是这么多