你在屏幕上看到的每一种颜色，本质上都是一组数字。不同的系统用不同的数字来描述同一种颜色。理解这些系统——即色彩空间——对于任何使用颜色的设计师或开发者都至关重要。
HEX — 网页标准格式
像 #FF6B35 这样的 HEX 色值是最常见的网页颜色格式，它将红、绿、蓝三个通道的值压缩为 6 个字符的字符串。
- 格式：
#RRGGBB（每对是 00–FF 的十六进制数） - 适用场景： CSS 样式、设计规范、快速交流
- 局限性： 编程调整不够直观——调节亮度需要同时修改三个通道
.button {
background-color: #FF6B35;
color: #ffffff;
}
RGB — 红绿蓝
RGB 是所有屏幕色彩的基础。每个像素通过混合红、绿、蓝三种光来显示颜色。每个通道的值范围是 0–255。
- 格式：
rgb(255, 107, 53) - 适用场景： 需要单独操作颜色通道时
- 提示： CSS 还支持
rgba()来添加透明度
HSL — 色相、饱和度、亮度
HSL 用人类感知的方式来描述颜色。不再混合光通道，而是描述：
- 色相（Hue）： 色轮上的角度（0–360°）
- 饱和度（Saturation）： 颜色的鲜艳程度（0–100%）
- 亮度（Lightness）： 明暗程度（0–100%）
这让 HSL 成为编程操作颜色的最佳选择：
/* 轻松创建悬停效果 */
.button { background: hsl(20, 100%, 60%); }
.button:hover { background: hsl(20, 100%, 55%); } /* 仅降低 5% 亮度 */
OKLCH — 未来趋势
OKLCH 是一种「感知均匀」的色彩空间。所谓「感知均匀」，就是数值变化相同时，视觉上的颜色变化也相同——这一点 HSL 做不到，比如 hsl(120, 100%, 50%) 和 hsl(60, 100%, 50%) 在亮度感知上差距很大。
- L： 亮度（0–1，感知线性）
- C： 色度（0–0.4，颜色鲜艳程度）
- H： 色相（0–360°，均匀分布）
.accent { color: oklch(70% 0.2 30); }
OKLCH 已被所有现代浏览器支持，是 CSS Color Level 4 规范推荐的色彩空间。
什么时候用什么
| 色彩空间 | 最适合 | |---|---| | HEX | 快速分享、设计规范 | | RGB | 通道操作、Canvas API | | HSL | UI 主题、动态配色生成 | | CMYK | 印刷设计 | | OKLCH | 感知均匀的配色、无障碍设计 |
在 LangColor 中体验
你可以使用颜色转换器在这些色彩空间之间即时转换。或者使用 AI 配色生成器来创建任意格式的和谐配色方案。
想深入了解？试试我们的对比度检查器，确保你的颜色选择符合 WCAG 无障碍标准。