颜色模型及为何需要相互转换
颜色可以用多种数学模型表示，每种模型针对不同用例进行了优化。在模型之间进行转换对于 Web 开发、平面设计、印刷生产和数据可视化至关重要。
主要颜色模型
RGB（红、绿、蓝）
屏幕使用的加色模型。颜色通过混合光来创建：
- 范围：每个通道 0-255（8 位）或 0-100%
- 用于：CSS、HTML、JavaScript、图像文件
- 示例：rgb(255, 87, 51) = 鲜艳的橙色
RGB 直接映射到显示器的工作方式——每个像素都有红色、绿色和蓝色子像素，它们的强度组合起来产生感知到的颜色。
HEX（十六进制）
使用基数为 16 的 RGB 紧凑表示：
- 格式：#RRGGBB，其中每对为 00-FF
- 简写：当两位数字相同时使用 #RGB（#FF6600 = #F60）
- 用于：CSS、HTML、设计工具、SVG
- 示例：#FF5733 = rgb(255, 87, 51)
HSL（色相、饱和度、亮度）
对人类来说更直观：
- 色相：颜色角度 0-360°（0=红，120=绿，240=蓝）
- 饱和度：0%（灰色）到 100%（纯色）
- 亮度：0%（黑色）到 100%（白色），50% 为“正常”
- 用于：CSS（原生支持）、设计系统、颜色选择器
HSL 在程序化生成颜色变体方面表现出色——仅改变亮度即可创建色调和阴影，而不会产生色偏。
HSV/HSB（色相、饱和度、明度/亮度）
类似于 HSL，但用于大多数设计软件的颜色选择器：
- 明度/亮度：0%（黑色）到 100%（纯色）
- 用于：Photoshop、Illustrator、Figma 的颜色选择器
CMYK（青色、品红色、黄色、黑色）
用于印刷的减色模型：
- 范围：每个分量 0-100%
- 用于：印刷设计、专业出版
- 注意：RGB 到 CMYK 的转换在数学上并不完美——使用 ICC 配置文件以获得准确的印刷颜色
Lab（Lab*）
感知均匀的颜色空间：
- L：亮度 0-100
- a：绿色到红色轴（-128 到 127）
- b：蓝色到黄色轴（-128 到 127）
- 用于：颜色科学、图像处理、感知颜色差异
转换公式
HEX 转 RGB
将十六进制字符串拆分为对，每对从十六进制转换为十进制：
- #FF5733 → R=255 (0xFF), G=87 (0x57), B=51 (0x33)
RGB 转 HSL
将每个 RGB 值转换为 0-1 范围，然后计算：
- 找出 R、G、B 的最大值和最小值
- 亮度 = (最大值 + 最小值) / 2
- 饱和度取决于最大值是否等于最小值
- 色相取决于哪个通道是最大值
RGB 转 CMYK
将 RGB（0-255）转换为分数（0-1），然后：
- K（黑色）= 1 - max(R, G, B)
- C = (1 - R - K) / (1 - K)
- M = (1 - G - K) / (1 - K)
- Y = (1 - B - K) / (1 - K)
颜色空间和配置文件
除了颜色模型，颜色空间定义了颜色模型如何映射到实际的物理颜色：
- sRGB：Web 和大多数消费级显示器的标准
- Adobe RGB：专业摄影的更广色域
- P3/DCI-P3：影院和现代显示器的广色域
- CMYK 配置文件：因打印机、油墨和纸张类型而异
当设计在 Web（sRGB）和印刷（CMYK）之间移动时，颜色可能会明显偏移。在设计软件中进行软打样有助于预览颜色在印刷中的效果。
使用颜色转换工具
我们的工具：
- 输入任何颜色格式——HEX、RGB、HSL、HSV 或 CMYK
- 查看所有表示——即时转换为所有其他格式
- 视觉颜色预览——查看实际颜色
- 复制任何格式——一键复制为 CSS 就绪语法
- 颜色选择器集成——直观选择颜色
- 可访问性检查——针对白色和黑色背景的 WCAG 对比度
用于在设计工具和 CSS 表示之间转换、为印刷准备颜色，以及确保项目中不同部分的颜色值一致。