HEX RGB 转换器
即时转换 HEX、RGB 和 HSL 颜色代码。
颜色预览
HEX
RGB
HSL
什么是 HEX、RGB 和 HSL？
HEX、RGB 和 HSL 是 Web 开发中表示颜色的三种常用方式。HEX 使用 6 位十六进制代码，RGB 使用红/绿/蓝值（0–255），HSL 使用色相（0–360°）、饱和度和亮度（0–100%）。
HEX vs RGB vs HSL — 如何选择
HEX
最简洁的格式。常用于 CSS 静态颜色和设计工具。示例：#ff5733
RGB
需要用 rgba() 控制透明度时非常有用。直接映射到屏幕颜色通道。示例：rgb(255, 87, 51)
HSL
最直观的格式，便于以编程方式调整亮度或饱和度，适合主题系统。示例：hsl(11, 100%, 60%)
如何转换颜色代码
点击颜色选择器或直接在 HEX、RGB、HSL 输入框中输入值，其他格式会立即更新。使用复制按钮将各格式复制到剪贴板。
常见问题
什么是 HEX 颜色代码？
HEX 颜色代码是如 #ff5733 的 6 位十六进制数，分别表示红、绿、蓝三个分量，每个分量范围为 00 到 ff。
如何将 HEX 转换为 RGB？
将 6 位 HEX 分成三组 2 位，分别从 16 进制转为 10 进制。例如：#ff5733 → R:255, G:87, B:51。
什么是 HSL 颜色？
HSL 代表色相（Hue, 0–360°）、饱和度（Saturation, 0–100%）和亮度（Lightness, 0–100%）。是一种更直观的颜色表示方式。
CSS 中应该使用哪种颜色格式？
三种格式在 CSS 中都有效。静态颜色用 HEX，主题系统用 HSL，需要透明度时用 rgba()。
可以转换 3 位 HEX 代码吗？
可以。3 位 HEX（如 #f53）是 #ff5533 的简写，每位重复一次即可得到 6 位完整代码。
灰色 HSL 色相显示为 0 是为什么？
灰色饱和度为 0%，色相无意义，默认显示 0，这是正常行为。
转换结果准确吗？
是的。转换使用标准数学公式，对所有有效颜色输入结果准确。