GluePuddingTool

颜色转换器

HEX/RGB/HSL/HSV颜色格式互转

免费在线工具
Loading…

使用说明

  1. 在输入框输入颜色值（支持 HEX、RGB、HSL、HSV 等格式）。
  2. 工具自动转换为其他所有颜色格式并显示。
  3. 可通过拾色器直接选取颜色。
  4. 点击对应格式旁的复制按钮复制所需格式。

功能介绍

  • 支持 HEX、RGB、RGBA、HSL、HSLA、HSV、CMYK 等主流颜色格式
  • 内置颜色拾色器，直观选色
  • 实时转换，输入即刷新所有格式
  • 显示颜色预览色块
  • 各格式结果一键单独复制

使用场景

前端 CSS 颜色格式统一
设计稿使用 HEX 颜色，CSS 变量系统使用 HSL，用此工具快速在格式间转换，保持颜色一致性。
设计系统颜色规范制定
将品牌色的 HEX 值转换为 RGB 和 HSL，生成设计系统所需的多格式颜色变量定义。
颜色可访问性检查辅助
获取精确的 RGB 值后代入对比度计算工具，验证前景色和背景色的对比度是否满足 WCAG 标准。
印刷与屏幕颜色转换
将屏幕 RGB 颜色转换为 CMYK 值，作为印刷稿颜色参考（注意 RGB 和 CMYK 色域差异）。

常见问题

HEX、RGB、HSL 各适合什么场景？
HEX 最常用于 CSS 和设计工具；RGB 适合程序处理颜色分量；HSL 更符合人类对颜色（色相/饱和度/明度）的认知，适合做颜色调整和主题系统；CMYK 用于印刷行业。
转换后颜色有细微差异是正常吗？
由于颜色空间转换涉及浮点运算，有时会有最小精度误差（如 HSL→RGB 再转回 HSL 可能有 1% 的偏差）。对于视觉效果基本无影响。
如何从颜色中获取透明度（Alpha）？
Alpha 通道在 RGBA（rgba(r,g,b,a)）和 HSLA（hsla(h,s%,l%,a)）格式中，a 值范围 0（完全透明）到 1（完全不透明）。HEX 格式也可以用 8 位表示（#RRGGBBAA）。
HEX 颜色的 # 是必须的吗？
在 CSS 中使用时必须加 #（如 #FF5500）。在本工具输入时，有无 # 都能正确识别。