好工具啊

颜色格式转换

HEX/RGB/HSL 互转

颜色格式转换HEX转RGBRGB转HSL颜色代码转换CSS颜色在线颜色工具
最后更新: 2026/7/11
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CMYK
cmyk(76%, 47%, 0%, 4%)
R: 59G: 130B: 246
分享：

使用说明

  1. 在任意格式输入框中输入颜色值（HEX、RGB、HSL 或颜色名称均可）
  2. 其他格式的数值自动实时更新
  3. 左侧色块实时预览当前颜色
  4. 点击各格式值旁的复制按钮，直接复制到剪贴板

核心功能

  • 1
    HEX/RGB/HSL/CMYK 互转
    支持 HEX 十六进制、RGB 三原色、HSL 色相饱和度亮度、CMYK 印刷四色四种颜色格式之间的任意互转。
  • 2
    颜色实时预览
    输入颜色值后即时显示对应的颜色色块预览，并同步展示所有格式的转换结果。
  • 3
    多格式输入
    支持直接输入 HEX、rgb()、hsl()、cmyk() 格式，或点击颜色选择器选色，自动识别格式。
  • 4
    一键复制格式值
    每种颜色格式旁均有复制按钮，点击即可复制到剪贴板，直接粘贴到 CSS 或设计工具中使用。

适用场景

✓
前端 CSS 开发
设计稿中的颜色值（HEX）转为 CSS 变量或 rgba() 格式，直接用于样式代码。
✓
UI/UX 设计
在 Figma、Sketch 等设计工具和代码之间转换颜色格式，保持视觉一致性。
✓
印刷设计
将 RGB 颜色转换为 CMYK，确保印刷品颜色准确还原。
✓
色彩学习
理解不同颜色模型的关系，直观看到同一颜色在不同表示方式下的数值。

工具优势

多格式全覆盖
一个工具支持 HEX、RGB、HSL、CMYK 全部常用格式，无需多个工具切换。
实时预览
输入颜色值立即看到预览，确认颜色是否符合预期。
一键复制
每种格式旁都有复制按钮，粘贴到代码或设计工具更便捷。

常见问题

Q: RGB 和 HEX 有什么关系？

A: HEX（十六进制颜色）就是 RGB 的十六进制表示，例如 #FF6600 对应 RGB(255, 102, 0)，每两位十六进制数表示一个通道（红、绿、蓝）的值。

Q: HSL 格式有什么优势？

A: HSL 更符合人类对颜色的感知（色相/饱和度/亮度），调整颜色时更直观。例如，只改变 L 值就可以得到同一颜色的深浅变化。

Q: CMYK 和 RGB 颜色为什么看起来不同？

A: RGB 是加色模型（光的三原色），用于屏幕显示；CMYK 是减色模型（印刷油墨），用于印刷。同一颜色在两个模型中的数值不同，且印刷色域比屏幕小，转换时颜色可能有偏差。

相关工具

关联介绍

什么是HEX颜色

HEX颜色用十六进制表示RGB：#RRGGBB或缩写#RGB。如#FF0000是红色，#0000FF是蓝色。00-FF对应0-255。每两位一个颜色通道。缩写：#F00 = #FF0000。网页设计最常用的颜色格式。

什么是RGBA

RGBA在RGB基础上增加Alpha透明度通道。如rgba(255,0,0,0.5)是50%透明的红色。CSS3支持，A值0-1或0%-100%。相比十六进制的opacity（作用于整个元素），RGBA可对单个属性设置透明度。