穿越现实世界与编程世界的颜色——编程世界中的颜色

前言

在《穿越现实世界与编程世界的颜色——颜色的起源》中，我们了解了在现实世界当中的颜色究竟是如何产生的，光源、反射表面、人眼、大脑又是如何系统工作最终达到对颜色的感知与识别的。接下来，我们就成程序的角度来一起看看，在程序世界当中的颜色又是怎样的呢？它与现实世界当中的颜色又有什么异同呢？

程序世界中的颜色表示形式

HSL/HSLA

我们在上面说到物体的反射表面时，就有简单介绍过 HSL 这种颜色的表示形式，简单的说：HSL(色相/色调 Hue、纯度/饱和度 Saturation、亮度 Lightness) : 是一种规定了色相、纯度、亮度这三个关键要素的颜色表示形式。它是一种对物体表面特性的一种抽象。

HSL

色相（Hue）：表示色彩在色轮上的位置。色相值的范围是0到360度，其中0和360度表示红色，120度表示绿色，240度表示蓝色。
饱和度（Saturation）：表示颜色的强度或纯度。饱和度值的范围是0%到100%，其中0%表示灰度（无色彩），100%表示最饱和的颜色。
亮度（Lightness）：表示颜色的明暗程度。亮度值的范围是0%到100%，其中0%表示完全黑色，100%表示完全白色。

HSL颜色模型的特点是将颜色的属性分离开来，使得对颜色的调整更加直观和可控。通过调整色相、饱和度和亮度的值，可以创建各种颜色的变化，包括明亮、暗淡、饱和、灰度等效果。

HSL颜色模型适用于各种领域，包括图形设计、网页设计、数据可视化等。它提供了一种直观和直观的方式来选择和调整颜色，使得设计师和开发人员能够更好地控制视觉效果。

它格式通常是"hsl(H, S%, L%)"，其中H表示色相值（0-360），S表示饱和度值（0%-100%），L表示亮度值（0%-100%）。例如，"hsl(120, 100%, 50%)"表示饱和度为100%，亮度为50%的纯绿色。

此外，还可以使用 hsla 格式来表示HSL颜色，其中"a"表示透明度（alpha），取值范围为 0 到 1。例如，"hsla(240, 100%, 50%, 0.5)"表示透明度为 0.5 的半透明蓝色。

HSV/HSB

HSV/HSB 指的是同一种颜色的表示法，它跟 HSL 的表示法很类似，也是由三个要素来表示一种颜色，包括：Hue: 色相/色调、Saturation: 纯度/饱和度、Value: 色明度

HSV

或许有同学会有疑问了，HSL 中的 L，也就是亮度，跟 HSV 中的 V，也就是明度有什么区别呢？其实他们的区别主要是这样的：

亮度（Lightness）是对颜色的相对明暗程度的度量，取值从0到100%（0%为黑色，100%为白色）。亮度指的是色彩的感知明暗程度。
明度（Value）是对颜色的整体明亮程度的度量，取值也从0到100%（0%为黑色，100%为最鲜艳的颜色）。明度指的是色彩的绝对明亮程度。

假设我们有一个纯蓝色的颜色，RGB 表示为 (0, 0, 255)。现在我们希望将这个颜色转换为HSL和HSV表示形式。

使用 RGB 到 HSL 的转换公式，我们可以计算出这个蓝色的 HSL 值为 (240, 100%, 50%)。其中，色相为240度（蓝色在色轮上的位置），饱和度为 100%（最饱和的颜色），亮度为 50%（中间亮度）。

然后，使用 RGB 到 HSV 的转换公式，我们可以计算出这个蓝色的 HSV 值为 (240, 100%, 100%)。其中，色相为 240 度，饱和度为 100%，明度为100%（最亮的颜色）。

这个例子展示了在 HSL 和 HSV 中对同一个颜色的表示。尽管色相和饱和度的值在两种表示中是相同的，但亮度和明度的值是不同的。在 HSL 中，亮度表示颜色的相对明暗程度，而在 HSV 中，明度表示颜色的绝对明亮程度。

RGB/RGBA

我们上面在介绍人眼的构造时讲到：我们的计算机之所以使用 RGB 的方式来表示颜色，就是利用了我们人眼的特点，反正人类的眼睛只对三种光线比较敏感，那我们只需要用三种颜色的光线就可以完成人类对于三种颜色的刺激了，这样就可以让我们看到任何颜色的光了。

常规的 RGB 颜色使用三原色组合成我们实际需要的颜色，但在前端开发当中，越来越多对透明颜色的支持的需求，常规的 RGB 颜色即使再淡，哪怕是纯白色，也是不透明的，因此，为了解决这个问题，在前端设计系统中，增加了 RGBA 的表示法，在原本 RGB 的基础上增加了：A（Alpha）: 透明度。

与RGB表示法类似，RGBA 也使用红、绿和蓝三种颜色通道的值来定义特定的颜色。不同之处在于，RGBA 在 RGB 的基础上增加了一个透明度通道，用来控制颜色的不透明度或透明度。透明度的值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。

RGBA 表示法的格式是"rgba(R, G, B, A)"，其中 R、G、B 和 A 分别表示红色、绿色、蓝色和透明度的值。每个颜色的值范围是 0 到 255，透明度的值范围是 0 到 1。

使用 RGBA，可以指定具有不同透明度的颜色，从而实现颜色的混合和叠加效果。例如，"rgba(255, 0, 0, 0.5)"表示红色，透明度为 0.5，即半透明的红色。

RGBA可以在各种场景中使用，特别是在Web开发中。它常用于指定HTML元素、CSS属性或JavaScript代码中的颜色。通过调整透明度值，可以实现元素的渐变、遮罩或半透明效果。此外，RGBA也适用于图形设计、图像编辑和可视化应用等领域，可以控制颜色的不透明度以及与其他颜色的混合。

HEX

HEX 颜色表示法是一种十六进制的表示颜色的方式。它使用 6 个十六进制数字（0-9和A-F）来表示红、绿和蓝（RGB）的组合，以定义特定的颜色，表示法的格式是"#RRGGBB"，其中 RR 表示红色的值，GG 表示绿色的值，BB 表示蓝色的值。每个颜色的值范围是 00 到 FF，其中 00 表示最小亮度或者没有颜色，FF 表示最大亮度或者最饱和的颜色。

HEX颜色表示法的用法非常广泛，特别是在 Web 开发和设计中。它可以在HTML、CSS和其他相关的代码中直接使用，用于指定元素的颜色。例如，可以使用"#FF0000"表示红色，"#00FF00"表示绿色。

实际上，HEX 颜色值是 RGB 颜色值的一种紧凑形式。可以通过将RGB颜色值的十进制表示转换为十六进制，并添加 # 符号来得到相应的 HEX 颜色值。

优秀前端项目中的颜色空间

在前端领域颇具影响力的 React 前端开源组件库 ant-design 当中，所有的组件设计都依托于其约定的颜色空间，让组件整体的风格能够达到高度一致且自定义灵活方便，感兴趣的同学可以看一下这篇文章：色彩模型与颜色选择器，其中有对 色彩模型 详细讲解与对于 ant-design 当中颜色模型强相关的 ColorPicker 组件的实践分享。

前端项目中的颜色计算

在很多大型项目当中，我们想要非常细粒度的控制整个系统和项目的主题风格是非常困难的，因为这些项目当中，实际开发时，用的都是一些基于设计稿的实际颜色色值，一旦要开发一套新的主题，需要将项目中所有组件的颜色重新梳理定义，无疑是比较低效的。

在参与 ant-design 项目的维护过程中，逐步的接触到了 ant-design 的颜色管理方案，这边对于颜色的管理方案大概是这样的：

基于当前系统的设计体系抽离关键颜色 token，如主题色、主字体颜色、次要字体颜色、强调色、高亮色等等。
在项目中使用时，如果有一些在主题 token 之外的颜色，则使用 TinyColor 在已有的颜色的基础上进行颜色计算生成组件自定义 token。例如明度调整、透明度调整等。
如果存在暗色模式，则通过实现暗色算法，将所有颜色基于亮色模式进行二次计算，产生适合暗色模式的 token。

有了这样的一种颜色管理机制，我们就可以实现颜色可计算化、动态化管理，让我们能够更细粒度得调整整个项目的主题方案。

结语

至此，我们已经了解了程序世界当中常用的一些颜色表示的方式，以及他们各自适用的一些场景，也结合业界优秀的案例 ant-design 介绍了在实际项目当中，我们应该如何更好的管理我们的颜色，让他们能够更加灵活方便的用于构建我们的应用。相信你也能更好的的与这些“小精灵”和谐相处了。