RGB颜色转换器

工具说明

使用步骤

1. 01

   输入颜色值

   粘贴一种受支持的 HEX、RGB 或 HSL 表达，并检查预览是否符合预期。

2. 02

   读取等价值

   从结果中选择目标格式，关注通道范围、百分比与透明度是否保留。

3. 03

   复制到目标环境

   将结果写入 CSS、设计变量或文档，并在实际背景上再次检查对比度。

输入与输出示例

同一个颜色的五种表示。注意 HSL 的 L 与 HSV 的 V 数值不同，因为两者定义不同。

#2563EB

RGB   37, 99, 235
HSL   221, 83%, 53%
HSV   221, 84%, 92%
CMYK  84, 58, 0, 8

支持范围与限制

支持格式

HEX、RGB、HSL、HSV、CMYK 互转，并实时预览色板

HSL 与 HSV 的区别

两者的第三个分量含义不同：HSL 的 L 是亮度（100% 为白），HSV 的 V 是明度（100% 为纯色）

CMYK 的局限

CMYK 是印刷色彩空间，与屏幕的 RGB 无法精确对应。转换结果是数学近似，不能替代印刷打样

透明度

HEX 的 8 位写法可携带 alpha 通道，RGB / HSL 对应 rgba / hsla

色域

计算基于 sRGB。广色域（P3）颜色转换后会被压缩到 sRGB 范围内

常见用途

在设计稿、CSS、绘图软件和印刷规范之间统一色值

典型使用场景

• 设计交付开发

  把设计工具提供的 RGB 数值转换为前端常用的 HEX 或 HSL。

• 整理主题色板

  用 HSL 调整一组颜色的明暗关系，再输出为项目约定的表示格式。

• 按明度调整生成配色变体

  把品牌色转成 HSL 后只改亮度分量，就能得到一组色调一致的深浅变体，用于 hover、禁用等状态。

使用前需要知道的事

• 转换只处理颜色数值，不会自动判断文字与背景是否满足无障碍对比度。
• 带透明度的颜色必须同时确认目标格式和使用环境支持 alpha 通道。
• HEX 简写只有在每对通道数字相同时才与六位写法等价。

相关概念

RGB

以红、绿、蓝三个光通道组合颜色的加色模型。

HSL

以色相、饱和度和亮度组织颜色，常用于生成有规律的色阶。