免费 · 无需注册 · 浏览器本地处理

HEX、RGB 与 HSL 颜色互转:保留透明度

输入颜色代码,或用取色器选择颜色,调整通道和透明度,实时预览并复制 HEX、RGB 或 HSL 格式的 CSS 色值。

浏览全部工具 →

颜色输入

本地处理
示例:#ACCDEA · rgba(172, 205, 234, .5) · hsl(208, 60%, 80%)
RGB 通道
HSL 通道
转换结果保留透明度
HEX#ACCDEA
RGBrgb(172, 205, 234)
HSLhsl(208, 60%, 80%)

使用步骤

输入 HEX、rgb(a) 或 hsl(a) 值,按需调整 RGBA 或 HSLA 通道,再复制所需格式。

使用前请检查

支持逗号分隔的 CSS RGB/HSL 和 3/4/6/8 位 HEX,并非所有 CSS Color 4 语法。

试一个例子

把 #ACCDEA 转为 RGB 与 HSL,再调低透明度制作半透明遮罩。

计算或处理方式

通过数学公式在 RGB 与 HSL 间转换;CSS 中的透明度显示到三位小数。

常见问题

在 HEX、RGB、HSL 之间转换颜色,保留透明度并即时预览。

如何使用HEX、RGB 与 HSL 颜色转换?

输入 HEX、rgb(a) 或 hsl(a) 值,按需调整 RGBA 或 HSLA 通道,再复制所需格式。

数据会上传吗?

工具在当前浏览器内处理输入与文件。页面访问统计不包含这些输入内容。

有哪些限制?

支持逗号分隔的 CSS RGB/HSL 和 3/4/6/8 位 HEX,并非所有 CSS Color 4 语法。