为什么颜色格式很重要
Web 开发者根据上下文使用多种颜色格式：来自 Figma 等设计工具的十六进制代码、CSS 中的 RGB 值、用于程序化颜色操作的 HSL，以及 Photoshop 等图像编辑器中的 HSB（HSV）。理解这些格式以及如何在它们之间进行转换对于现代前端开发至关重要。
HEX：设计标准
十六进制颜色代码以十六进制表示 RGB 值：
#RRGGBB
#FF5733 -> R=255, G=87, B=51
每个通道（R、G、B）使用 2 个十六进制数字（0-F，表示 0-255）。短十六进制（#RGB）扩展为 #RRGGBB：
#F00->#FF0000（纯红色）#FFF->#FFFFFF（白色）
带 alpha 透明度：#RRGGBBAA - 例如，#FF573380 是 50% 透明的橙色。
Hex 最适合设计交接（Figma、Sketch 输出 hex）、CSS/HTML 颜色值以及版本控制（紧凑、易于 diff）。
RGB：屏幕模型
RGB（红、绿、蓝）直接映射到屏幕通过混合光创建颜色的方式：
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5); /* 50% 透明 */
每个通道的范围是 0-255。全零等于黑色；全 255 等于白色。
现代 CSS 表示法使用空格分隔的值：
color: rgb(255 87 51); /* CSS Color Level 4 */
color: rgb(255 87 51 / 50%); /* 带 alpha */
RGB 最适合 CSS 颜色混合、Canvas API 绘图操作以及程序化颜色生成。
HSL：直观模型
HSL（色相、饱和度、亮度）更接近人类对颜色的思考方式：
color: hsl(11, 100%, 60%); /* 橙色 */
color: hsla(11, 100%, 60%, 0.5); /* 50% 透明 */
- 色相（0-360 度）：在色轮上的位置。0 度是红色，120 度是绿色，240 度是蓝色。
- 饱和度（0-100%）：灰色（0%）到鲜艳（100%）
- 亮度（0-100%）：黑色（0%）经过颜色（50%）到白色（100%）
HSL 非常适合程序化颜色操作，因为您可以通过调整 L 值来变暗或变亮，并通过保持相同的 H 同时变化 S 和 L 来创建调色板。
/* 通过调整亮度创建按钮悬停效果 */
.button { background: hsl(220, 90%, 55%); }
.button:hover { background: hsl(220, 90%, 45%); }
HSB/HSV：Photoshop 模型
HSB（色相、饱和度、亮度），也称为 HSV（值），被 Adobe 软件和许多颜色选择器使用：
- 色相（0-360 度）：与 HSL 相同
- 饱和度（0-100%）：白色（0%）到纯色（100%）
- 亮度/值（0-100%）：黑色（0%）到全色（100%）
HSB 和 HSL 看起来相似但行为不同。两者在 CSS 中都不原生支持——您需要先转换为 RGB 或 HSL。
OKLCH：现代感知模型
CSS Color Level 4 引入了 OKLCH（在 OKLab 颜色空间中的亮度、色度、色相）：
color: oklch(60% 0.2 30); /* 亮度、色度、色相 */
OKLCH 在感知上是均匀的，意味着相等的数值变化产生相等的感知颜色差异。这使得它非常适合无障碍调色板和主题颜色系统。
对比度和无障碍性
颜色对比度对于无障碍性（WCAG 2.1）至关重要。文本和背景之间的对比度必须至少为 4.5:1（正常文本，Level AA）、3:1（大文本，Level AA）或 7:1（增强无障碍性，Level AAA）。
对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 和 L2 是相对亮度值。
-> 试试 颜色转换器