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色调空间,示意为Lab*, 是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 函数那些事（五）计数函数
我的项目中会蕴含文章中的测试代码，都做好了相应的分类，欢送各位继续关注，有帮忙话能够点个赞哦！我的项目地址戳这里
参考资料
- CSS color
- HLS原理
- CSS Color Module Level 4 (CSS Color 4)