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

utility2026-07-253 分钟阅读

什么是颜色转换

在 Web 开发和设计中，颜色有多种表示格式。颜色转换就是在这些格式之间互相转换，以便在不同场景下使用正确的颜色代码。

常见颜色格式

HEX（十六进制）

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

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

RGB（红绿蓝）

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

rgb(255, 87, 51)       → 不透明
rgba(255, 87, 51, 0.5) → 半透明

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

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

hsl(14, 100%, 60%)       → 色相14°，饱和度100%，亮度60%
hsla(14, 100%, 60%, 0.5) → 半透明

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

如何使用在线颜色转换器

使用 DevToolkit Pro 的颜色转换器：

输入任意格式的颜色值（HEX / RGB / HSL）
工具自动识别格式并转换为其他所有格式
实时预览颜色效果
一键复制所需格式的代码

颜色格式转换公式

HEX → RGB

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

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

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% 60%;  /* 保持色相，调整亮度 */
}

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