颜色代码转换：HEX、RGB、HSL 在线互转工具使用教程

# 颜色代码转换：HEX、RGB、HSL 在线互转工具使用教程

前端开发、UI 设计、数据可视化，颜色表示永远绕不开三种格式：HEX、RGB、HSL。设计稿给的是 `#2D7FF9`，代码里要写 `rgb(45, 127, 249)`，或者想调色却不知道 HSL 怎么改亮度——一个靠谱的在线颜色转换工具能省下大量时间。

## 三种主流颜色格式

### HEX（十六进制）

最常用的 CSS 写法，`#` 加 6 位十六进制数，每两位代表一个通道：

```
#2D7FF9
```

`2D` 是红色通道（45），`7F` 是绿色通道（127），`F9` 是蓝色通道（249）。也有 3 位简写（如 `#29f`）和带透明度的 8 位写法（如 `#2D7FF980`）。

### RGB / RGBA

用十进制描述红绿蓝三通道，取值范围 0-255，RGBA 额外带透明度（0-1）：

```
rgb(45, 127, 249)
rgba(45, 127, 249, 0.8)
```

### HSL / HSLA

更符合人类直觉的模型：H（色相 0-360°）、S（饱和度 0-100%）、L（亮度 0-100%）。调色时改亮度、调饱和度非常直观：

```
hsl(216, 94%, 58%)
```

## 为什么要在线转换

- 设计稿给 HEX，代码要 RGBA 带透明度
- 从截图工具拿到 RGB，要转成 HEX 写进样式
- 想在主题色基础上生成浅色/深色变体，用 HSL 计算更简单
- 验证两种颜色写法是否等价，避免肉眼判断出错

## 在线颜色转换工具

我们开发的 [颜色转换工具](https://zjunwei.com/seo-tools/color-converter.html) 免费使用，支持：

- **任意格式输入**：HEX、RGB、HSL 输入即识别
- **双向转换**：三种格式一键互转，同时输出 RGBA/HSLA 带透明度版本
- **实时预览**：转换结果同步显示颜色色块，所见即所得
- **一键复制**：每种格式都有复制按钮，随手粘贴进代码

## 手写转换公式（附赠）

万一离线场景需要手算，记住核心公式：

**HEX → RGB**：把每两位十六进制数转成十进制即可。`#2D7FF9` → `2D`=45，`7F`=127，`F9`=249。

**RGB → HSL**（以 RGB 最大值为 M、最小值为 m 为例）：

```
L = (M + m) / 2
S = (M - m) / (1 - |2L - 1|)
H 根据最大值通道计算：M=R 时 H≈60*(G-B)/(M-m)，再按情况修正
```

手算繁琐易错，日常直接用 [颜色转换工具](https://zjunwei.com/seo-tools/color-converter.html) 最靠谱。

## 常见问题

**Q：HEX 能不能直接写透明度？**
A：可以，8 位 HEX 最后两位是透明度，如 `#2D7FF980`；但部分老旧浏览器不支持，建议用 RGBA。

**Q：为什么同一个颜色 HEX 和 RGB 看起来一样？**
A：因为它们本质是同一颜色的不同表示法，转换只是换了个表达方式，色值不变。

**Q：设计软件里的 HSB/HSV 和 HSL 是一回事吗？**
A：不完全一样。HSB（HSV）和 HSL 的亮度/饱和度计算方式不同，相同参数下颜色会有差异，转换时要注意。

## 总结

颜色格式互转是高频小需求，收藏 [颜色转换工具](https://zjunwei.com/seo-tools/color-converter.html)，HEX、RGB、HSL 随意切换，带预览、带复制，开发设计都用得上。