# 颜色转换（HEX、RGB、HSL）

URL: https://shahid09.is-a.dev/zh/tools/color-converter/
Author: Muhammad Shahid (https://shahid09.is-a.dev/)
免费工具 · 在浏览器中运行

在 HEX、RGB 和 HSL 之间转换颜色，用取色器选色，并检查这种颜色的文字在白色或黑色背景上是否清晰可读。

**快速解答:** 输入任意格式的颜色，例如 #0071E3、rgb(0, 113, 227) 或 hsl(210, 100%, 45%)，或者直接选色，就能得到三种 CSS 格式并复制。工具还会显示与白色和黑色的 WCAG 对比度：普通文字至少需要 4.5:1（AA），大号文字需要 3:1。

## 使用方法

1. **输入或选择颜色.** 输入 HEX、RGB 或 HSL，或者使用取色器。
2. **复制需要的格式.** HEX、RGB 和 HSL 都可以直接粘贴到 CSS、设计工具或代码中。
3. **检查对比度.** 查看这种颜色的文字在白色或黑色背景上是否达到 WCAG 标准。

## 示例

一种蓝色转换为所有格式及其对比度：

输入:

```
#0071E3
```

输出:

```
HEX  #0071E3
RGB  rgb(0, 113, 227)
HSL  hsl(210, 100%, 45%)

在白色上的对比度：4.70:1 · AA
在黑色上的对比度：4.47:1 · 仅适合大号文字
```

## 常见错误及解决方法

- **CSS 不认这个颜色**: HEX 值需要 #，rgb() 需要三个数字。从本工具复制可以避免输入错误。
- **颜色没有通过对比度检查**: 把文字调深或背景调浅，直到达到 4.5:1。用 HSL 降低亮度是最快的方法。
- **HSL 值和别的工具差 1**: 转换会四舍五入为整数，所以 210 和 211 可能是同一种颜色。需要完全一致时请用 HEX。
- **印刷出来的颜色不一样**: 屏幕使用 RGB，打印使用 CMYK，两者色域不同。请向印刷厂索取正确的配置文件并先打样。

## 常见问题

### HEX 怎么转 RGB？

把 6 位数字分成三组，每组从十六进制转为十进制：#0071E3 是 00、71、E3，也就是 rgb(0, 113, 227)。

### 什么是 HSL？

色相（色环上 0 到 360 度）、饱和度和亮度（0 到 100%）。用它很容易做出同一颜色的深浅变化。

### 3 位的 HEX 代码是什么意思？

每一位重复一次：#0AF 等于 #00AAFF。

### 需要多高的对比度？

WCAG AA 要求普通文字 4.5:1，大号文字（约 24px，或加粗 19px）3:1；AAA 要求普通文字 7:1。

### 为什么其他工具的 HSL 值略有不同？

格式转换时会四舍五入，所以同一颜色在一个工具里显示 210，另一个显示 211，肉眼看不出区别。

### 这些值能直接用于 CSS 吗？

可以。三种格式在所有现代浏览器中都是有效的 CSS 颜色值。

### RGB 怎么转成印刷用的 CMYK？

虽然有简单的公式，但印刷厂使用颜色配置文件，请向印刷厂索取正确的配置文件，或在设计软件中转换。

### 支持透明度吗？

这个工具处理不透明颜色。需要透明度时请自己加上 alpha 值，例如 rgb(0 113 227 / 50%)。

### 为什么颜色在手机上看起来不一样？

不同屏幕的色域和校准不同，有些能显示更广的色域。HEX 和 RGB 值对应标准的 sRGB 色彩空间。

### 会上传任何内容吗？

不会。转换在你的浏览器中完成。

## 相关内容

- [大小写转换](https://shahid09.is-a.dev/zh/tools/case-converter/)
- [百分比计算器](https://shahid09.is-a.dev/zh/tools/percentage-calculator/)
- [AI 全栈开发者](https://shahid09.is-a.dev/hire/ai-full-stack-developer/)