颜色转换器(HEX、RGB、HSL 即时同步)

输入十六进制代码、RGB 三元组或 HSL 值, 其他格式即时同步, 预览色块同时更新。设计师、Web 开发者和跨工具调色都适用。

HEX

RGB

HSL

hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)

工作原理

HEX、RGB、HSL 是 sRGB 颜色的三种记法。HEX 是 RGB 的简写: #FF6B35 表示红=255, 绿=107, 蓝=53。RGB 用红、绿、蓝光的强度(各 0-255)描述颜色。HSL 用色相、饱和度、亮度重新编码同一 RGB 颜色。

三者等价, 可无损来回转换。设计师偏好 HSL 调色(提高亮度色相不变), 开发者通常从设计工具直接复制 HEX 到 CSS。RGB 在画布、图像处理 API 等程序场景最常见。

HEX: 从设计稿复制粘贴、Figma 导出、品牌指南、CSS 颜色字面量。简洁但难直观读懂。

RGB: 程序化颜色操作(画布、图像处理)、可访问性检查(对比度计算用线性 RGB)、需要精确整数的场合。

HSL: 凭感觉调色——「再饱和一点」、「悬停时稍暗」、「色相步进生成调色板」。这些任务用 HSL 远比 HEX 直观。

暂未支持 alpha 通道(透明度)——但所有现代浏览器支持 #RRGGBBAA, 末尾追加两个十六进制位即可(00 = 透明, FF = 不透明)。

也不涵盖广色域(P3、Rec.2020、OKLCH)。多数 Web 工作 sRGB 基础的 HEX/RGB/HSL 是正确选择。如目标 HDR 或广色域显示, 查看 CSS Color Module Level 4 语法。

›HSL 到 HEX 来回转换会丢精度吗?

几乎不会。HSL 以整数度和百分比存储, 360 × 101 × 101 = 370 万个 HSL 值映射到 1670 万 RGB 组合。极端边角可能轻微舍入。HEX 作为精确存储的规范。

›支持 3 位 HEX 码吗?

支持。#f60 视为 #ff6600。两者展开到相同 RGB 三元组。

›为什么 HSL 饱和度/亮度不到 360?

色相是度数(0-360 绕色环)。饱和度和亮度是百分比(0-100)。

›HSL 与 HSB/HSV 一样吗?

不一样。HSV(HSB)用「Value」替代「Lightness」, 是不同的亮度模型。HSL 的 L=50% 是纯色; HSV 的 V=100% 是纯色。本工具用 HSL 与 CSS 一致。

›支持透明度吗?

暂不。可在 HEX 末尾加两位 alpha(如 #00000080 = 50% 黑)。

›为什么 RGB 不显示 0-1 浮点?

因多数场景(CSS、设计工具)用 0-255 整数。Shader 工作除以 255 得 0-1 浮点。

›设计师从哪里得到正确颜色?

品牌指南、设计令牌、调色板生成器。对比度检查器可验证前/背景对是否符合 WCAG AA/AAA。

›计算精确吗?

是的。使用标准 sRGB 转换数学。来回差异仅来自 HSL 的整数量化。