数据大屏中的色彩选择

常见的数据可视化大屏以暗色、深色调为主，从视觉层面将大屏拆分为前景层（数据图表）与背景层（暗色图片），前景应与背景产生对比、拉开层次，以下便探讨数据大屏中色彩选择的理论基础。

色彩模型

常见的几种色彩模型：

RGB：（红色，绿色，蓝色）加色模型。将红色、绿色和蓝光以各种方式相加，以产生多种多样的颜色。

HSL：（色相，饱和度，亮度）RGB 模型的替代表示。在 HSL 中，每种色调的颜色围绕中性色的中心轴以放射状切片放置，中性色的范围从底部的黑色到顶部的白色。

HSV/HSB：（色相，饱和度，值或亮度）这种颜色方案经常被误认为 HSL ，但这是 RGB 模型的另一种替代表示形式。和HSL一样，每个色调的 HSV 颜色都放置在径向切片中，围绕中性颜色的中轴，从底部的0%到顶部的100%不等。

以 HSB 模型为例，圆柱圆周方向为色相 H(Hue)，半径方向为饱和度 S(Saturation)，垂直（高度）方向为亮度 B(Brightness)，取亮度 B(Brightness) 为 100% 时，可以得到常见的 HSB 色盘。

在色盘最边缘处，每隔 30° 取色得到色环，把它放到（Photoshop 或 Sketch）纯黑背景（#000000）上，混合模式选择明度（或 Luminosity ），即可得到该色环在明度模式下的亮度值。

将色环的色相值与明度模式下的亮度值制表，就能直观地看到色相与明度的关系：Luminosity 值越大，该颜色越「亮」。

以上提到的「明度」源于 Photoshop 混合模式中的 Luminosity 模式。对于该混合模式，维基百科的解释为：

The Luminosity blend mode preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.

即用上层图像的亮度值去替换下层图像的亮度值，而保持下层图像的色相值与饱和度不变。

因此在上一个内容中，把从色盘最边缘处（饱和度 100%、亮度 100%、仅色相改变）取色得出的色环，以明度模式与下层的纯黑（饱和度 0%、亮度 0%、色相 0%）背景混合，即可得到该色环在明度模式下的亮度值（色相为 0%、饱和度为 0%）。

同理，在展示数据图表这类主要突出的内容时，可以采用明度高的色彩区域，而避免使用明度低的色彩区间。同时，结合理论内容可以知道，更「亮」的颜色=「低饱和度+高亮度」，更「暗」的颜色=「高饱和度+低亮度」。