系统学习下
Web
图形系统中表示颜色的基本方法。
一、RGB
和 RGBA
颜色表示法
1. 定义
-
RGB
颜色RGB
颜色的十六进制表示法形如:#RRGGBB
,其中RR
、GG
、BB
分表时两位十六进制数字,表示红(red
)、绿(green
)、蓝(blue
)三色通道的色阶。色阶 表示某个通道的强弱。取值
[0, 255]
。RGB
颜色是将人眼可见的颜色表示为红、绿、蓝三原色不同色阶的混合。并不能表示人眼可见的全部颜色。但是一般的显示器
、彩色打印机
、扫描仪
都支持它。在浏览器中,
CSS
一般有两种表示RGB
颜色值的方式:#RRGGBB
十六进制表示法rgb(red, green, blue)
十进制表示法
-
RGBA
RGBA
其实就是在RGB
的基础上增加了一个Alpha
通道,也就是透明度(取值[0, 1]
)。一些新版本的浏览器,可以用
#RRGGBBAA
的形式来表示RGBA
色值。但是较早期的浏览器只支持rgba(red, green, blue, alpha)
这种形式。
WebGL
的 shader
默认支持 RGBA
。但是 WebGL
采用归一化的浮点数值,即:WebGL
的颜色分量 r
、g
、b
、a
的数值都是 0
到 1
之间的浮点数。
2. 特点
RGB
和 RGBA
的颜色表示法非常简单,但是当要选择一组颜色给图表使用时,我们并不知道要以什么样的规则来配置颜色才能让不同数据对应的图形之间的对比尽可能鲜明。因为对于一个 RGB
颜色来说,只能大致直观地判断出它偏向于红色、绿色还是蓝色。
在需要动态构建视觉颜色效果的时候,很少直接选用 RGB
色值。而是比较常用的 HSL
和 HSV
颜色表示法。
二、HSL
和 HSV
颜色表示法
1. 定义
HSL
和 HSV
用色相(Hue
)、饱和度(Saturation
)和亮度(Lightness
)或明度(Value
)来表示颜色。其中,Hue
是角度,取值范围是 0
到 360
度,饱和度、亮度或明度的值都是从 0
到 100%
。
根据 HSL
的规则,亮度越高,颜色越接近白色,只有同时提升饱和度才能确保颜色不会太浅。
CSS
和 Canvas2D
都可以直接支持 HSL
颜色,只有 WebGL
需要转换。
2.特点
由于人眼对不同频率的光的敏感度不同,即使我们可以均匀地修改颜色地亮度和饱和度,但仍存在有的颜色看起来和其他颜色的差距明显,有的颜色还是没那么明显。
3. 转换
在着色器中使用 RGB
和 HSV
的转换代码,生成绘图所需顶点着色器和片元着色器。
vec3 rgb2hsv(vec3 c){
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 hsv2rgb(vec3 c){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0);
rgb = rgb * rgb * (3.0 - 2.0 * rgb);
return c.z * mix(vec3(1.0), rgb, c.y);
}
三、CIE Lab
和 CIE Lch
颜色表示法
1. 定义
一个针对人类感觉的颜色描述方式 CIE Lab
。它用 L
表示亮度,a
和 b
表示颜色对立度。
// css-color level4 规范给的 Lab 颜色值的定义
lab() = lab(<percentage> <number> <nubmer> [ / <alpha-value> ]?)
RGB
值可以转 Lab
值。
2. 特点
目前还没有能支持 CIE Lab
的图形系统。需要借助相关工具,如:d3-color JavaScript
库。
四、Cubehelix
色盘
1. 定义
Cubehelix
色盘(立方螺旋色盘),在 RGB
的立方中构建一段螺旋线,让色相随着亮度增加螺旋变换。
2. 应用
借助 NPM
包 cubehelix 构造 cubehelix
色盘颜色映射函数。
五、业务场景
在可视化应用里,一般有两种使用颜色的方式:
- 整个项目的
UI
配色全部由UI
设计师设计好,开发者使用任何格式的颜色都行。 - 设计师定下视觉基调和一些主色,开发者根据主色和数据来动态生成颜色值。
在一般的图表呈现项目中,方式一使用较多。但是在一些数据比较复杂的项目中,方式二比较常用。如:希望连续变化的数据能够呈现连续的颜色变换时,把 HLS
、CIELab
、Cubehelix
色盘结合数据变量来动态生成颜色值。
六、小结
Web
图形系统表示颜色的方法可以分为 2
大类:
RGB
、HLS
和HLV
、CIELab
和CIELch
等颜色空间表示法;Cubehelix
色盘表示法。
Web 图形系统表示颜色的方法 | 定义 | 优点 | 缺点 |
---|---|---|---|
RGB | 用三原色的色阶来表示颜色 | 最基础的颜色表示法 | 对用户不够友好 |
HLS 和 HLV | 用色相、饱和度、亮度或明度来表示颜色 | 对开发者比较友好 | 数值变换与人眼感知不完全相符 |
CIELab 和 CIELch | 颜色空间表示法 | 与人眼感知相符的色彩空间表示法 | 还没有被浏览器支持,但是有一些 JavaScript 库(如:d3-color )可以直接处理 Lab 颜色空间 |
Cubehelix | 色盘表示法 | 适合呈现颜色随数据动态改变的效果 | - |
在可视化中,使用图形的 大小
、高低
、宽窄
、颜色
和 形状
这些常见信息来反映数据。同时也会使用二维强化的技巧来叠加两个维度的信息,从而加强可视化的视觉呈现效果。