颜色格式转换

颜色格式转换

HEX / RGB / HSL 互转,附实时预览与一键复制

浏览器本地计算

输入 HEX、rgb() 或 hsl() 颜色即可预览和转换;透明度会显示在支持 Alpha 的输出格式中。

HEX
RGB
HSL

示例

输入

#ff000080

示例结果

rgba(255, 0, 0, 0.502)
hsla(0.0, 100.0%, 50.0%, 0.502)

80 的十六进制值为 128,Alpha 是 128/255,略大于 0.5。

技术细节与边界

RGB 通道使用 0–255,HSL 色相按 360 度循环,饱和度与亮度使用百分比。HEX 的 Alpha 位在末尾,不是 ARGB;透明度转为 8 位时会四舍五入。本工具使用 sRGB 数值转换,不计算印刷 CMYK、ICC 色彩管理或 WCAG 对比度。

关于此工具

在 HEX、RGB/RGBA 与 HSL/HSLA 之间转换颜色,并实时显示色块。适合对照设计稿、调整 CSS 颜色及检查透明度;支持常见短十六进制和含 Alpha 的格式。

适用场景

  • 设计稿给了 HSL,前端要用 HEX 或 RGBA。
  • 把设计系统里的 CSS 变量批量换成另一种写法。
  • 快速看一个色号的实际观感。

操作步骤

  1. 填入颜色值,HEX、RGB、HSL 都认。
  2. 结果同时给出其他几种表示,并带预览色块。
  3. 带透明度的输入会保留 alpha 通道。

注意事项

色彩空间转换会做四舍五入,来回转一次可能有 1 的偏差。HSL 的色相 H 归一到 0~360 度。

常见问题

HEX 颜色转RGB时每个通道范围是多少?
HEX转RGB后,每个红绿蓝通道的范围都是0到255。6位HEX用每2位表示1个通道,例如FF对应255;带透明度时Alpha放在末尾,不能直接把其他系统的ARGB顺序当成网页颜色使用。
HSL 颜色中的色相360和0一样吗?
HSL色相按360度循环,所以0度与360度指向同一色相。饱和度和亮度使用百分比,范围通常为0到100;相同色相在不同亮度下仍会呈现不同颜色,转换结果是sRGB数值而非印刷色彩预测。
RGBA 透明度转8位HEX为什么有误差?
RGBA透明度转HEX时会量化成8位整数,因此可能出现小幅舍入误差。Alpha从0到1映射到0到255,例如0.5会舍入为128;反向转换未必恰好回到原小数,预览还会受到背景混合影响。

相关工具

颜色格式转换 · HEX / RGB / HSL 互转,附实时预览与一键复制
颜色格式转换 — 工具示意图 · dayeku.com