颜色格式转换器

在 HEX、RGB、HSL 颜色格式之间相互转换。

颜色格式说明

HEX 十六进制

以 # 开头，如 #FF5733。网页开发中最常用的颜色表示方式。

RGB 红绿蓝

如 rgb(255,87,51)，三个通道值 0-255，直观表示颜色混合。

HSL 色相饱和度

如 hsl(14,100%,60%)，更符合人类直觉的颜色描述方式。

功能特点

  • 支持 RGB、HEX、HSL 三种颜色格式相互转换
  • 实时预览颜色效果，所见即所得
  • 支持输入颜色名称快速识别
  • 复制任意格式的颜色代码
  • 支持透明度（Alpha）转换

使用说明

输入任意格式的颜色代码（如 #FF0000、rgb(255,0,0)、hsl(0,100%,50%)），工具会自动识别并转换为其他格式。实时预览区域会显示对应的颜色效果。

使用示例

颜色转换示例

HEX: #FF6600
RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)

HEX: #3366FF
RGB: rgb(51, 102, 255)
HSL: hsl(225, 100%, 60%)

常见问题

HEX 颜色中 #FFF 和 #FFFFFF 有什么区别？

#FFF 是 #FFFFFF 的缩写形式，当两位重复时可以使用 3 位十六进制。两者颜色值相同。

HSL 模型的优势是什么？

HSL 更符合人类对颜色的感知。调整亮度（Lightness）可以让颜色整体变亮或变暗，调整饱和度（Saturation）可以控制颜色的鲜艳程度。

CSS 中支持哪种颜色格式？

CSS 支持 RGB、HEX、HSL 以及各自的透明度变体（RGBA、HSLA）。现代 CSS 还支持 HWB、LAB 和 LCH 等更丰富的格式。