色彩空间

最新推荐文章于 2024-10-14 16:02:12 发布

Elle_Peng

最新推荐文章于 2024-10-14 16:02:12 发布

阅读量856

点赞数 1

分类专栏： js 可视化文章标签： css3

本文链接：https://blog.csdn.net/Elle_Peng/article/details/108331849

版权

本文从前端工程师的角度深入探讨色彩空间，涵盖named-color、CMYK、RGB、HSL、HSB/HSV以及CIE Lab/CIE Lch模型。通过实例分析，解释了各种色彩模型的特性和转换，帮助读者更好地理解和应用色彩理论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

提到色彩，即使是刚有辨知能力的小朋友，也能说上几句～
那我们前端工程师，无论工作还是生活，每天都在与各种色彩打交道，那便更有必要系统地了解关于色彩方面的知识
本文将从前端角度，聊聊色彩空间

根据 CSS Color Module Level 4 标准

<color> = <hex-color> | <named-color> | currentcolor | transparent
          <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> |
          <lab()> | <lch()> | <gray()> |
          <color()> | <device-cmyk()> |
          <system-color>

named-color

#named-color

transparent

currentcolor

system-color

减色法混色模型 CMYK 与加色法混色模型 RGB

减色法混色模型 CMYK

C - Cyan - 青色
M - Magenta - 红色
Y - Yellow - 黄色
K - blacK - 黑色（防止与 RGB 的 B 冲突）
上过美术课，应该听过“红黄蓝”三原色的说法，但这和 CMYK 不太一样，实际上，颜料显示颜色的原理是它吸收了所有别的颜色的光，只反射一种颜色，所以颜料三原色其实是红、绿、蓝的补色，也就是：品红、黄、青。因为它们跟红、黄、蓝相近，所以有了这样的说法。
为什么会比三原色多了一色呢？
- 三种颜色调成黑色，贵
- 且不是纯粹的黑，三色等量相加之后只能形成一种深灰或深褐（我要五彩斑斓的黑

加色法混色模型 RGB

我们在 CSS 样式中看到的形式如 #RRGGBB 的颜色代码，就是 RGB 颜色的十六进制表示法，其中 RR、GG、BB 分别是两位十六进制数字，表示红、绿、蓝三色通道的色阶。色阶可以表示某个通道的强弱。
但 RGB 并不能表示人眼所见的所有颜色，它只能表示下面的这个区域

人眼看到的颜色vsRGB能表示的颜色

RGB 对色彩的描述，对计算机友好，但不够人性化
RGB 我们只能大致判断出它偏向于红色、绿色还是蓝色，或者在颜色立方体的大致位置。
以及对比两个 RGB 颜色的时候，我们只能通过对比它们在 RGB 立方体中的相对距离，来判断它们的颜色差异。

RGB 立方体几何表示

但我们对色彩的认识往往先是：颜色是什么，鲜艳不鲜艳，亮还是暗
and It’s not easy to to alter an RGB color to produce a lighter variant of the same hue.
- 这在我们开发中也十分常见，有些时候设计师定下视觉基调和主色，我们需要根据数据情况由前端动态生成颜色值

HSL HSB&HSV

CSS 和 Canvas2D 都可以直接支持 HSL 颜色，只有 WebGL 需要做 RGB2HSV 转换。

HSL

H - Hue - 色相 - 0-360°的圆心角

H(hue)分量，代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。
色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。
在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。

HSL 色相环