颜色转换 — HEX/RGB/HSL/HSV 实时互转，一键复制

使用方法

• 三种输入方式：输入 HEX 或 CSS 颜色名、使用取色器，或拖动色相/饱和度/亮度/透明度滑块。
• 改动任意一个数值，HEX、RGB、HSL、HSV 和 RGBA 会同时更新；无需转换按钮，支持任意方向。
• 点击任一格式旁的复制按钮即可复制到剪贴板，并显示“已复制！”提示。
• 降低透明度（Alpha）滑块即可得到透明颜色，预览会用棋盘格背景显示透明效果。
• 在对比度面板查看 WCAG 对比度及 AA/AAA 是否通过。无需安装、无需注册，颜色在本地计算，不会上传。

支持的颜色格式

HEX（十六进制颜色代码）

HEX 是网页上最常见的颜色写法，形如 #RRGGBB（以及简写 #RGB）。在这里把十六进制颜色转 rgb 或 hex 转 hsl 只需一瞬。带透明度的写法是 HEX8（#RRGGBBAA），最后两位是 Alpha 值。

RGB / RGBA（红、绿、蓝 + 透明度）

RGB 用 0–255 表示红、绿、蓝，例如 rgb(124, 58, 237)。RGBA 增加第四个透明度值（0–1），例如 rgba(124, 58, 237, 0.5)。直接输入 RGB 数值，HEX 和 HSL 会立即更新（rgb 转 hex、rgb 转 hsl）。

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

HSL 使用色相（0–360°）、饱和度（0–100%）和亮度（0–100%），调整明暗与鲜艳程度非常直观，在 CSS 中很常用，HSLA 则增加透明度。当你只想微调亮度时，hex 转 hsl 很方便。

HSV（色相、饱和度、明度）

HSV（也叫 HSB）使用色相、饱和度和明度（value）。它在设计和取色器工具中常见，但并非 CSS 官方写法，因此这里仅作参考显示。在 CSS 中请使用 HEX、RGB 或 HSL。

功能

同时显示与双向转换

所有格式在一个界面同时显示，改动任意一个，其余立即联动。不仅 HEX 转 RGB，也支持 RGB 转 HEX、HEX 转 HSL、HSL 转 HEX 等所有方向，无需点击转换按钮。

一键复制

每种格式都有复制按钮，点击即可复制到剪贴板，并清晰显示“已复制！”，让你确认复制成功。

取色器与滑块

使用系统取色器以及色相、饱和度、亮度（或明度）、透明度滑块，直观地选色，并实时看到所有格式联动。

透明度（Alpha）支持

可制作半透明颜色并得到 RGBA、HSLA 和 HEX8（#RRGGBBAA）。透明度滑块为 0–100%，预览以棋盘格显示透明效果。

对比度与 WCAG 检查

计算所选颜色与背景（白、黑或自定义）的对比度，并显示是否通过 WCAG AA/AAA（常规文字 4.5:1，大字 3:1）。结果同时以颜色和文字呈现，不仅依赖颜色。

应用场景

把 HEX 转成 CSS 的 RGB / HSL

拿到设计稿的 HEX？把它转成 rgb() 或 hsl() 并复制到 CSS。用 HSL 时，可只微调亮度来制作悬停和激活状态。

制作透明颜色（RGBA / HSLA）

用滑块制作 rgba(0, 0, 0, 0.5) 这样的半透明颜色并复制，非常适合遮罩、阴影和淡背景。

检查无障碍配色

确认文字与背景的对比度满足 WCAG AA，让内容对每个人都易于阅读。

提示与注意事项

• HEX、RGB、HSL、HSV 只是同一种颜色的不同写法，可以互相转换（可能存在微小的舍入误差）。
• HSV 并非 CSS 官方写法，仅作参考。在样式表中请使用 HEX、RGB 或 HSL。
• 我们刻意不输出 CMYK：从屏幕色到印刷色的精确转换依赖色彩配置文件、纸张和印刷机，简单公式会得到误导性数值。CMYK 请使用专业的印刷色彩管理。
• 对比度仅供参考：WCAG 公式是精确的，但实际可读性还取决于字体、字号和周围颜色。
• 颜色数据不会上传——所有转换都在你的浏览器本地完成。

常见问题

可以把 HEX 转成 RGB 吗？（反向也可以吗）

可以。输入一个数值即可同时向所有方向转换——hex 转 rgb、rgb 转 hex、hex 转 hsl、hsl 转 hex，还有 HSV 和 RGBA。无需转换按钮，其他格式会即时更新。

支持带透明度的 RGBA 和 HSLA 吗？

支持。用透明度滑块设置透明度，得到 RGBA、HSLA 和 HEX8（#RRGGBBAA）。预览用棋盘格显示透明程度。

如何复制数值？

点击任一格式旁的复制按钮，数值即复制到剪贴板，并显示“已复制！”。

可以使用 red、rebeccapurple 等颜色名吗？

可以。输入框接受标准 CSS 颜色名，并转换为 HEX、RGB、HSL 和 HSV，例如 rebeccapurple 会变成 #663399。

可以转换成 CMYK 吗？

刻意不支持。精确的 CMYK 依赖色彩配置文件、纸张和印刷机，简单公式会得到误导性数值。印刷请使用专业的色彩管理工具。

对比度怎么用？

它会比较文字颜色与背景，显示是否满足 WCAG AA/AAA，用于确认配色是否易读、可访问。

我的颜色会被发送到服务器吗？

不会。所有转换都在浏览器本地完成，颜色不会上传或保存。