浅谈 CSS 颜色模块与色彩学

2017-07-30  本文已影响144人  零度冰华

W3C 的 CSS 工作组发布 CSS 颜色模块（CSS Color Module Level 4）首份公开标准工作草案已经有一年之久了，你可能无法想象 CSS 中这一个 color 或 background-color 等属性包含了色彩学多少基本知识。色彩学广泛运用于美术、计算机图形学、机器学习、心理学等学科中，这次我们就来假借 CSS 颜色模块来窥见其一斑。

（因本人水平有限，如有描述不当的地方，希望大家指出）

已命名颜色（Named Colors）

字如其名，就是有公认名字的颜色。具体颜色名称引用请见 W3C 网站：

https://www.w3.org/TR/SVG/types.html#ColorKeywords

/* CSS 引用已命名颜色时不可以使用引号 */
.font-aqua {
    color: aqua;
}

灰度（gray）

从最暗黑色到最亮的白色的灰度，中间根据采样的级数可能分为 8 bits、16 bits 等。（注意灰度图像与黑白图像的区别）

网页设计时可能可以加上透明度参数。

.font-gray-1 {
    color: gray(50%);
}

三原色光 模式（RGB）

又称 RGB颜色模型 或 红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加，以产生多种多样的色光。(且三原色的红绿蓝不可能用其他单色光合成)

绿色的饱和度变化

- 亮度和明度

亮度-Lightness 明度-Brightness

与 RGB 模型的笛卡尔直角坐标系不同，HSV（色相，饱和度，色调）在概念上可以被认为是颜色的倒圆锥体（黑点在下顶点，白色在上底面圆心），HSL 在概念上表示了一个双圆锥体和圆球体（白色在上顶点，黑色在下顶点，最大横切面的圆心是半程灰色）。

HSV 或 HSB 倒圆锥体 HSL 球坐标系（没找到柱坐标系，感觉球坐标系也蛮形象的） 
/* HSL */
.font-aqua {
    color: hsl(180, 100%, 50%);
}

/* HSLA */
.font-aqua {
    color: hsl(180, 100%, 50%, 100%);
}


/* HSV */
.font-aqua {
    hsv(180, 100%, 100%);
}

- 与 RGB 间的转换关系 

/* HSL 转 RGB */
function hslToRgb(hue, sat, light) {
  if( light <= 0.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];
}

HWB

HWB 是另一种以色相（Hue）为基础的色彩模型，加上白色（White）的的程度，黑色（Black）的程度这两个参数，可以使其比饱和度和亮度更容易让人理解。

/* HWB，可能有第四位表示透明度 */
.font-aqua {
    color: (180, 0%, 0%);
}

- 与 RGB 之间的转换关系

function hwbToRgb(hue, white, black) {
  var rgb = hslToRgb(hue, 1, .5);
  for(var i = 0; i < 3; i++) {
    rgb[i] *= (1 - white - black);
    rgb[i] += white;
  }
  return rgb;
}

YUV

YUV 是一种颜色编码方法，由辉度（Luma），色度（或浓度，Chroma）来表示，其种类较繁，且草 CSS 颜色模块草案中并为提及，故不再占用篇幅了。

- YUV 转 RGB

还有

此外还有 LAB、LCH、YIQ、CIE 等色彩模型，因为CSS 颜色模块中并为提及，就不在此处赘述，感兴趣的可以自行查阅其他资料。

lab2lch

参考

上一篇 下一篇

猜你喜欢

热点阅读