实用工具2026-07-095 分钟阅读

在线颜色转换器：HEX、RGB、HSL 颜色格式互转

什么是颜色转换

在 Web 开发和设计中，颜色有多种表示格式。颜色转换就是在这些格式之间互相转换，以便在不同场景下使用正确的颜色代码。你可以用我们的免费颜色转换器在 HEX、RGB、HSL 以及带透明度的写法之间秒转。

常见颜色格式

HEX（十六进制）

用 6 位十六进制数字表示颜色，最常用于 CSS：

#FF5733        → 红色系列
#33FF57        → 绿色系列
#3357FF        → 蓝色系列
#FF5733AA      → 8位 HEX（后两位为透明度）

RGB（红绿蓝）

用三个 0-255 的数值分别表示红、绿、蓝通道：

rgb(255, 87, 51)       → 不透明
rgba(255, 87, 51, 0.5) → 半透明
rgb(255 87 51 / 0.5)   → 现代空格语法（同等含义）

HSL（色相、饱和度、亮度）

更直观的颜色表示法，适合人类理解和调整：

hsl(14, 100%, 60%)       → 色相14°，饱和度100%，亮度60%
hsla(14, 100%, 60%, 0.5) → 半透明
hsl(14 100% 60% / 0.5)   → 现代空格语法

参数	范围	说明
色相（H）	0-360	颜色在色轮上的角度（0=红，120=绿，240=蓝）
饱和度（S）	0%-100%	颜色的鲜艳程度
亮度（L）	0%-100%	颜色的明暗程度

如何使用在线颜色转换器

使用 ToolVault 工具匣的颜色转换器：

输入颜色值：短 HEX（#fff）、4/6/8 位 HEX、rgb() / rgba() / hsl() / hsla()（逗号或空格语法均可）
工具保留 alpha，展开 HEX、HEX8、RGB、RGBA、现代 rgb()/hsl()、HSL、HSLA、HSV、CMYK，并显示 R · G · B · A 分解
半透明色用棋盘格预览；可一键复制各格式；预览下方给出对白底/黑底的对比度速览
同页含色阶、Tailwind 最近色与前景/背景 WCAG 对比度检查；非法 HEX 位数或未闭合函数会给出针对性提示
输入经 colorjs 解析，常见 CSS 色（含命名色、lab() / oklch()）可进；色阶与 Tailwind 匹配仍基于不透明 sRGB 通道

需要整套和谐色时，可配合调色板生成器从种子色派生色阶，再回到转换器取各格式写法。

颜色格式转换公式

HEX → RGB

将 HEX 的每两位拆分为十进制：

#FF5733 → R=FF(255), G=57(87), B=33(51) → rgb(255, 87, 51)

8 位时后两位是 alpha：#FF573380 → 约 50% 透明度，对应 rgba(255, 87, 51, 0.5)。

RGB → HEX

将每个通道值转为两位十六进制：

rgb(255, 87, 51) → FF + 57 + 33 → #FF5733

RGB → HSL

H = 0° if max==min
H = 60 × (G-B)/(max-min) if R is max
H = 60 × (2 + (B-R)/(max-min)) if G is max
H = 60 × (4 + (R-G)/(max-min)) if B is max
L = (max + min) / 2
S = 0 if max==min, else (max-min) / (1 - |2L-1|)

前端开发中的颜色实用做法

1. 优先使用 CSS 变量

:root {
  --primary: #3B82F6;
  --primary-light: #60A5FA;
  --primary-dark: #2563EB;
}

.btn {
  background-color: var(--primary);
}

2. 暗黑模式适配

使用 HSL 格式可以更方便地生成暗色变体：

:root {
  --primary-hsl: 217 91% 60%;  /* 亮色模式 */
}

.dark {
  --primary-hsl: 217 91% 40%;  /* 保持色相，调整亮度 */
}

.btn {
  background-color: hsl(var(--primary-hsl));
}

3. 无障碍设计（Accessibility）

确保文字和背景的对比度符合 WCAG 标准：

AA 级：普通文字对比度 ≥ 4.5:1
AAA 级：普通文字对比度 ≥ 7:1
大文字（≥18px 或 ≥14px 粗体）：对比度 ≥ 3:1

转换器会给出当前色对白底/黑底的比率速览；精细的前景/背景组合仍用同页对比度区核验。

哪些转换丢信息（哪些在装不丢）

RGB→HEX 无损（同三字节换写法）；RGB→HSL 数学可逆；alpha 在 HEX8 / RGBA / HSLA 之间可按同一通道互转。有损的全在色域路径上：RGB→CMYK 经过设备配置文件，色域外的颜色被静默裁剪（屏幕上的鲜蓝印成灰蓝）——转换器修不了这个，因为信息在 CMYK 里就不存在。诚实的转换器对出域值报警；不诚实的返回一个印出来完全两样的「看起来合理」数字。印刷保真要用实际打印机配置文件转，不是通用公式。

HEX 3/4/8 位歧义

#fff 是 3 位 RGB；#ffff 是 4 位 RGBA（末位是透明度）；#ffffffff 是 8 位。经典 bug：设计师交付 #1a2b3c40 以为是六位色+多余 padding——它被解析为有效的 8 位（25% 透明度），UI 静默渲染成半透明。输入先规范化再校验能抓住整类问题：转换器展示解析出的 R/G/B/A 分解，并同时给出不透明 HEX 与带 alpha 的 HEX8——歧义可见而非静默。

感知均匀空间：OKLCH 为渐变而生

RGB 距离不是感知距离：等 RGB 步长看起来不均匀（蓝色段比绿色段变化更显）。渐变、对比匹配、「调亮 10%」这类操作，感知均匀空间（CIELAB、浏览器原生支持的 OKLCH）表现符合人预期——OKLCH 色阶平滑无色带，RGB 插值肉眼可见地分带。一句话：设备用 RGB，人眼用 OKLCH。转换器可接受 oklch() 输入并烘焙为 sRGB 输出，便于粘进仍以 HEX/RGB 为主的代码库。

FAQ

HEX 和 RGB 有什么区别？

两者本质相同，只是表示方式不同。HEX 用十六进制（如 #FF0000），RGB 用十进制（如 rgb(255,0,0)）。HEX 更简洁，RGB 更直观。选择取决于团队习惯和具体场景。

HSL 比 HEX 更好吗？

HSL 对人类更直观——你可以直接调整色相来换颜色、调整亮度来变亮/暗。HEX 更适合复制粘贴。两者各有优势，看场景选择。

8 位 HEX 中最后两位代表什么？

最后两位表示透明度（Alpha）。例如 #FF573380 中 80 约等于 50% 透明度。与 CSS 的 rgba() 等价；转换器会同时给出 HEX8、RGBA、HSLA 与现代空格语法，方便直接粘贴。

为什么输入 5 位 HEX 会报错？

合法 HEX 长度是 3、4、6、8 位。5 位或 7 位通常是漏写/多写了一位，工具会提示位数错误，而不是静默截断成错误颜色。

实现注记

一个当真 bug 修过的小事：复制按钮的打勾图标只跟随真实复制结果——复制失败时 toast 已经报了错，图标就不能再亮成功，否则等于撒谎。转换工具的输出值和操作反馈必须同源。

本文出自 ToolVault 工具匣。相关工具：颜色转换器、调色板生成。更多免费本地工具见首页。