颜色格式转换

在设计稿与 CSS 之间切换颜色格式。编辑 HEX、RGB 或 HSL 任一字段; 失焦后同步其他格式并预览色块。

隐私提示：本地解析，不上传服务器。

↓ 在下方输入区粘贴内容，结果会立即显示

在 HEX、RGB、HSL 之间互转，实时预览色块。

HEX

RGB

HSL

HEX 如 #D4A853；RGB 如 rgb(212, 168, 83)；HSL 如 hsl(41, 56%, 60%)。编辑任一字段后失焦即可同步其他格式。

在设计稿与 CSS 之间切换颜色格式。编辑 HEX、RGB 或 HSL 任一字段; 失焦后同步其他格式并预览色块。

快速开始

HEX、RGB、HSL、CMYK 等色彩空间互转，附带预览色块，便于设计与前端 CSS 变量编写。

品牌色规范文档、暗色模式亮度调整、印刷色与屏幕色沟通、Tailwind 配置取色时使用。

从 Figma 复制 HEX; 转为 hsl() 写入 CSS 变量；或从 DevTools 的 rgb 转回设计稿 HEX。

当设计师提供 HEX 色值时，开发者常需转换为 RGB 或 HSL 格式用于 CSS。在工具中输入 #4285F4，失焦后自动显示对应的 RGB(66,133,244) 和 HSL(217,89%,61%)。复制任一格式到代码编辑器即可，比手动计算更精准高效。

调试 CSS 时，若发现 HSL 颜色亮度需要微调，可直接修改 L 值（如从 61% 改为 55%）。工具会实时同步 HEX 和 RGB 值，并显示新色块预览效果。这种即时反馈比反复修改代码再刷新浏览器更方便。

Input

#D4A853

Output

hsl(41, 56%, 60%)

支持透明度吗？

支持 8 位 HEX 与 rgba/hsla 输入。

为什么转换后的 RGB 值和我的设计软件显示不同？

某些设计软件会显示非标准的 RGB 百分比（如 0-100）或包含色彩配置。本工具严格遵循 CSS 规范，输出 0-255 范围的 RGB 值。遇到差异时，建议以 HEX 值为基准进行核对。