关于前端:CSS-函数那些事六多姿多彩颜色函数

rgb(),rgba()

rgb(red,green,blue)

rgb(red,green,blue), 别离代表着 red,green,blue, 是色调三原色，原色以不同比例混合时，会产生其余色彩。为什么会是这三种色彩？这里援用下维基百科的解释：

人的眼睛内有几种分别色彩的锥状细胞，别离对黄绿色、绿色和蓝紫色（564、534 和 420 纳米波长）的光最敏感。人类以及其余具备这三种感光受体的生物称为“三色感光体生物”。尽管眼球中的椎状细胞并非对红、绿、蓝三色的感触度最强，然而由肉眼的椎状细胞所能感触的光的带宽很大，红、绿、蓝也可能独立刺激这三种色彩的受光体，因而这三色被视为原色。” 原色 ” 的指定并没有惟一的选法，因为就实践上而言，但凡彼此之间无奈代替的色彩都能够被选为“原色”，只是目前广泛认定“光的三原色”为红绿蓝。

rgb 函数接管三个参数：

R： 红色值。正整数[0-255] | 百分数[0%-100%]

G： 绿色值。正整数[0-255] | 百分数[0%-100%]

B： 蓝色值。正整数[0-255] | 百分数[0%-100%]

rgba(red,green,blue,alpha)

rgba 在 rgb 的根底上增加了不透明度(alpha):

A： 不透明度。取值[0-1]，0 代表齐全通明，也就是齐全看不见，1 代表齐全不通明，也就是色彩自身

为什么色彩数值最大为 255？

rgb 在计算机中存储为 3 byte, 每个 byte 是 8 个 bits，所以 rgb 对应的最大 2 进制为 11111111, 换算成十进制为 256，这就意味着有 256 个不同值，从 0 开始算，所以最大值为 255. 色彩的种数那就是 256^3 = 16,777,216.

hsl(),hsla()

hsl(hue,saturation,lightness)

hsl, 应用 色调 (hue), 饱和度 (saturation), 亮度(lightness) 示意各种色彩。

色调(hue), 取值[0,360], 代表的是人眼所能感知的色彩范畴，这些色彩散布在一个立体的色调环上，取值范畴是 0°到 360°的圆心角，每个角度能够代表一种色彩。色调的意义在于，咱们能够在不扭转光感的状况下，通过旋转色相环来扭转色彩。

饱和度(saturation)，取值[0%,100%], 用 0% 至 100% 的值形容了雷同色调、亮度下色调纯度的变动。数值越大，色彩中的灰色越少，色彩越娇艳，出现一种从灰度到纯色的变动。

亮度(lightness), 取值[0%,100%], 亮度的作用是管制色调的明暗变动。它同样应用了 0% 至 100% 的取值范畴。数值越小，色调越暗，越靠近于彩色；数值越大，色调越亮，越靠近于红色。

hsl 更合乎人类对色彩表白的习惯，也就是 ”什么色彩？色彩多深？色彩多亮？“。

hsla()

与 rgba 一样，hsla 在 hsl 根底上增加了不透明度(alpha), 取值[0-1];

hsl 与 rgb

RGB 的几何模型是一个立方体，HSL 则是一个圆柱体，它们之间存在着非线性转换的关系。

function hslToRgb(hue, sat, light) {if( light <= .5) {var t2 = light * (sat + 1);
  } else {var t2 = light + sat - (light * sat);
  }
  var t1 = light * 2 - t2;
  var r = hueToRgb(t1, t2, hue + 2);
  var g = hueToRgb(t1, t2, hue);
  var b = hueToRgb(t1, t2, hue - 2);
  return [r,g,b];
}

function hueToRgb(t1, t2, hue) {if(hue < 0) hue += 6;
  if(hue >= 6) hue -= 6;

  if(hue < 1) return (t2 - t1) * hue + t1;
  else if(hue < 3) return t2;
  else if(hue < 4) return (t2 - t1) * (4 - hue) + t1;
  else return t1;
}

hwb()

hwb(hue,whiteness,blackness),hwb 相似于 hsl，也是一种将 RGB 色调模型中的点在圆柱坐标系中的表示法。

H(hue)：示意色调, 与 hsl 中的色调一样，取值范畴[0-360];

W(whiteness) : 示意红色浓度，取值[0%,100%];

B(blackness): 示意彩色浓度，取值[0%,100%];

因为这个属性临时还是试验属性，这里只理解一下，不做过多的阐明，有趣味的同学能够去这里理解一下

lab()

lab 函数用来示意 CIELAB 色调空间, 示意为 L ab*, 是 CIE(国内照明委员会) 在 1976 年定义的色调空间.

L : 示意亮度, 取值[0%,100%], 取值 0% 是彩色，取值 100% 是红色；
A : 示意在 a 轴上的坐标值
B：示意在 b 轴上的坐标值
a,b 的值实践上是有限的，然而实际上是不会超过±160。

这个函数处于也是试验阶段。

lch()

lch(lightness ,chroma ,hue), 采纳了和 CIE Lab* 雷同的色彩空间, 不过表白的形式有不同。

L： 代表亮度, 取值[0%，100%];

C: 色度，即色调饱和水平，最小值为 0，实践上没有最大值,

h: 色调，即色调的总体偏向，取值[0,360]。

这个函数处于试验阶段。

device-cmyk()

device-cmyk()
device-cmyk 函数用来示意 印刷四分色模式（CMYK）, 绝对于 RGB 的加色混色模型，CMYK 是增色混色模型，色彩混在一起，亮度会升高。之所以退出彩色是因为打印时由品红、黄、青形成的彩色不够纯正。这个函数蕴含 4 个参数：

C: Cyan, 青色，取值[0-1], 或者[0%,100%];

M: Magenta , 品红色，取值[0-1], 或者[0%,100%];

Y: Yellow , 黄色，取值[0-1], 或者[0%,100%];

K: Black, 彩色，取值[0-1], 或者[0%,100%];

这个函数处于试验阶段。

总结

目前浏览器曾经能反对 hsl, 以及 hsla 这两个新的函数，其余的用来示意色调的函数也曾经在 CSS Color Module Level 4 的草案中了，写这篇文章提前先理解下这些色调模型。

最初

我最近在总结 css 函数相干的货色，这篇是系列文章的第六篇，目前已产出

• CSS 函数那些事（一）比拟函数
• CSS 函数那些事（二）你不晓得的 attr()”)
• CSS 函数那些事（三）背景图片函数
• CSS 函数那些事（四）网格函数
• CSS 函数那些事（五）计数函数

我的项目中会蕴含文章中的测试代码，都做好了相应的分类，欢送各位继续关注，有帮忙话能够点个赞哦！我的项目地址戳这里

参考资料

1. CSS color
2. HLS 原理
3. CSS Color Module Level 4 (CSS Color 4)