颜色格式转换指南：HEX、RGB、HSL、OKLCH 全搞定

颜色格式概览

Web 开发中常用的颜色格式：

格式	示例	特点
HEX	`#FF6B35`	最常见，紧凑
RGB	`rgb(255, 107, 53)`	直观，通道值 0-255
HSL	`hsl(16, 100%, 60%)`	色相/饱和度/亮度，调色直观
OKLCH	`oklch(0.68 0.17 37)`	感知均匀，现代 CSS 推荐

不同格式表达的是同一个颜色，只是坐标系统不同。

HEX 格式详解

HEX 使用十六进制表示 RGB 三通道：

#FF6B35
 ↑ ↑ ↑
 R G B  → 每通道 00-FF（0-255）

3 位简写：#F63 等价于 #FF6633
4 位简写带 Alpha：#F63A 等价于 #FF6633AA
8 位完整带 Alpha：#FF6B3580（80 = 50% 透明度）

RGB 与 Alpha 通道

RGB 直接对应显示器三原色：

rgb(255, 107, 53)          /* 不透明 */
rgba(255, 107, 53, 0.5)    /* 50% 透明 */
rgb(255 107 53 / 50%)      /* 现代语法 */

Alpha 通道：1 = 完全不透明，0 = 完全透明。现代 CSS 推荐用 rgb() + 空格分隔 + / 表示透明度。

HSL：直觉式调色

HSL 将颜色分解为色相、饱和度、亮度：

参数	范围	含义
H（色相）	0-360°	色轮角度：0=红, 120=绿, 240=蓝
S（饱和度）	0-100%	0%=灰色, 100%=纯色
L（亮度）	0-100%	0%=黑色, 50%=纯色, 100%=白色

调色技巧：

想要同色系深浅？固定 H 和 S，调整 L
想要柔和色调？降低 S 值
想要互补色？H 值 ± 180°

OKLCH：感知均匀的新标准

OKLCH 是 CSS Color Level 4 引入的颜色空间，基于人眼感知建模：

优势	说明
感知均匀	亮度从 0.5 到 0.6 的视觉差异与 0.7 到 0.8 一致
色域更广	支持 P3 等广色域显示器
调色可预测	固定 L 调 C/H，亮度视觉不变

oklch(0.68 0.17 37)
       ↑    ↑   ↑
       L    C   H  → 亮度/色度/色相

HSL 的 L=50% 在不同色相下视觉亮度差异巨大，OKLCH 修复了这个问题。

使用颜色转换工具

第一步：打开工具

访问颜色转换工具，输入任意格式的颜色值。

第二步：选择输入格式

在输入框中输入颜色，支持：

HEX：#FF6B35
RGB：255, 107, 53
HSL：16, 100%, 60%
OKLCH：0.68, 0.17, 37

第三步：查看转换结果

工具自动显示所有格式的转换结果，可直接复制使用。

第四步：调整 Alpha 通道

勾选「包含透明度」，输入 Alpha 值（0-1），结果会附带 Alpha 通道。

CSS color-mix() 实战

OKLCH 配合 color-mix() 可以精确混合颜色：

/* 在 OKLCH 空间混合，感知均匀 */
.button {
  background: color-mix(in oklch, #FF6B35, #3B82F6);
}

/* 混合 30% 的强调色 */
.card {
  border-color: color-mix(in oklch, #FF6B35 30%, white);
}

使用对比度检查工具验证混合后颜色与文字的对比度是否达标。

渐变中的颜色格式

使用渐变生成器时，推荐 OKLCH 格式：

/* OKLCH 渐变过渡更均匀 */
background: linear-gradient(
  in oklch,
  oklch(0.7 0.15 30),
  oklch(0.7 0.15 250)
);

传统 RGB/HSL 渐变在色轮中间会出现灰暗区域，OKLCH 可避免此问题。

常见问题

问题	原因	解决
HEX 转 RGB 结果不对	输入了简写但未补全	先展开为 6 位 HEX
HSL 转 HEX 色偏	浮点精度丢失	使用工具精确转换
OKLCH 浏览器不支持	旧浏览器不支持	使用 CSS fallback 或 PostCSS 插件
Alpha 值显示异常	百分比与小数混用	统一使用 0-1 小数或 0%-100%

总结

掌握 HEX、RGB、HSL、OKLCH 四种格式的原理与转换，是前端开发和设计的基础技能。OKLCH 的感知均匀特性使其成为现代 CSS 的首选。颜色转换工具帮你一键完成所有格式互转，配合对比度检查和渐变生成器构建完整的色彩工作流。