鸭梨公共文档

主题

颜色空间详解 ​

1. 颜色空间概述 ​

颜色空间（Color Space）是对颜色的组织方式，它提供了一种系统化的方法来表示、创建和可视化颜色。不同的颜色空间适用于不同的应用场景，理解各种颜色空间的特点对于图像处理、设计和开发都非常重要。

2. 常见颜色空间 ​

2.1 RGB 颜色空间 ​

RGB（Red, Green, Blue）是最常用的颜色空间，基于光的三原色原理。

特点：

  • 加色模型：通过混合红、绿、蓝三种光线产生颜色
  • 取值范围：每个通道通常为 0-255（8 位）或 0.0-1.0（浮点数）
  • 应用场景：显示器、相机、数字图像处理

表示方式：

css
/* CSS 中的 RGB */
rgb(255, 0, 0)        /* 红色 */
rgb(0, 255, 0)        /* 绿色 */
rgb(0, 0, 255)        /* 蓝色 */
rgba(255, 0, 0, 0.5)  /* 半透明红色 */

2.2 HSL / HLS 颜色空间 ​

HSL（Hue, Saturation, Lightness）基于人类对颜色的感知方式。

组成部分：

  • 色相（Hue）：颜色的基本属性，0-360°
  • 饱和度（Saturation）：颜色的纯度，0-100%
  • 亮度（Lightness）：颜色的明暗程度，0-100%

特点：

  • ✅ 更符合人类直觉
  • ✅ 便于颜色调整
  • ✅ 适合设计和UI开发

表示方式：

css
hsl(0, 100%, 50%)    /* 红色 */
hsl(120, 100%, 50%)  /* 绿色 */
hsl(240, 100%, 50%)  /* 蓝色 */

2.3 HSV 颜色空间 ​

HSV（Hue, Saturation, Value）与 HSL 类似，但使用 Value（明度）代替 Lightness。

区别：

  • HSL：亮度为 50% 时颜色最鲜艳
  • HSV：明度为 100% 时颜色最鲜艳

应用：

  • 常用于图像编辑软件（如 Photoshop）
  • 计算机视觉中的颜色检测

2.4 OKLCH 颜色空间 ​

OKLCH 是一个现代化的感知均匀颜色空间。

组成部分：

  • L（Lightness）：感知亮度
  • C（Chroma）：色度/饱和度
  • H（Hue）：色相

特点：

  • ✅ 感知均匀性更好
  • ✅ 适合生成渐变和调色板
  • ✅ CSS Color Level 4 新增支持

表示方式：

css
oklch(60% 0.15 30)  /* 橙色调 */

2.5 LAB 颜色空间 ​

LAB（也称 CIELAB）是基于人眼感知的颜色空间。

组成部分：

  • L：亮度（0-100）
  • a：绿色到红色的轴（-128 到 +127）
  • b：蓝色到黄色的轴（-128 到 +127）

特点：

  • ✅ 设备无关
  • ✅ 感知均匀
  • ✅ 适合颜色差异计算

应用：

  • 专业图像处理
  • 颜色匹配和校正
  • 印刷行业

2.6 LCH 颜色空间 ​

LCH 是 LAB 的圆柱坐标表示形式。

组成部分：

  • L：亮度
  • C：色度（Chroma）
  • H：色相

优势：

  • 比 LAB 更直观
  • 便于颜色调整和生成

2.7 HWB 颜色空间 ​

HWB（Hue, Whiteness, Blackness）是另一种直观的颜色空间。

组成部分：

  • H：色相（0-360°）
  • W：白度（0-100%）
  • B：黑度（0-100%）

特点：

  • ✅ 简单直观
  • ✅ CSS Color Level 4 支持

表示方式：

css
hwb(0 0% 0%)      /* 红色 */
hwb(0 50% 0%)     /* 浅红色 */
hwb(0 0% 50%)     /* 深红色 */

2.8 CMYK 颜色空间 ​

CMYK（Cyan, Magenta, Yellow, Key/Black）是减色模型。

特点：

  • 减色模型：通过颜料混合产生颜色
  • 应用场景：印刷、出版

组成部分：

  • C：青色（0-100%）
  • M：品红色（0-100%）
  • Y：黄色（0-100%）
  • K：黑色（0-100%）

3. 颜色空间对比 ​

颜色空间类型直观性感知均匀性主要应用
RGB加色模型中差显示器、数字图像
HSL/HSV圆柱模型高差UI 设计、颜色选择器
OKLCH圆柱模型高极好现代 Web 设计
LAB感知模型低好专业图像处理
LCH圆柱模型中好颜色调整
HWB圆柱模型高差Web 设计
CMYK减色模型中差印刷、出版

4. 颜色空间转换 ​

4.1 RGB 转 HSL ​

python
def rgb_to_hsl(r, g, b):
    r, g, b = r/255, g/255, b/255
    max_val = max(r, g, b)
    min_val = min(r, g, b)
    diff = max_val - min_val
    
    # 计算亮度
    l = (max_val + min_val) / 2
    
    if diff == 0:
        h = s = 0
    else:
        # 计算饱和度
        s = diff / (2 - max_val - min_val) if l > 0.5 else diff / (max_val + min_val)
        
        # 计算色相
        if max_val == r:
            h = ((g - b) / diff + (6 if g < b else 0)) / 6
        elif max_val == g:
            h = ((b - r) / diff + 2) / 6
        else:
            h = ((r - g) / diff + 4) / 6
    
    return h * 360, s * 100, l * 100

4.2 在线转换工具 ​

5. 实际应用建议 ​

5.1 Web 开发 ​

  • 日常使用：RGB、HEX
  • 动态调整：HSL
  • 现代设计：OKLCH（需考虑浏览器兼容性）

5.2 图像处理 ​

  • 基础操作：RGB
  • 颜色分析：HSV
  • 专业处理：LAB

5.3 设计工作 ​

  • UI 设计：HSL、OKLCH
  • 印刷设计：CMYK
  • 颜色匹配：LAB、LCH

6. 参考资料 ​