HEX 转 HSL 转换器

什么是 HEX 转 HSL 转换器?

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

核心特性

HEX 转 HSL 转换器替代品对比

HEX 转 HSL 示例

#3b82f6

#FF5733

#3b82f6

#FF573380

常见 HEX → HSL 转换

10 个最常转换的 HEX 代码及其 HSL 等价值的参考表 —— 纯原色、纯次原色,以及来自 Tailwind 调色板的 2 个真实品牌色。

如何使用 HEX 转 HSL 转换器

1. 1

   把 HEX 代码粘贴到 HEX 字段

   把任意 HEX 值丢进 HEX 输入框 —— 带或不带前导 `#`、3 位简写(`#F73`)、6 位完整形式(`#3b82f6`)、4 位 alpha 简写(`#F738`),或者 8 位 alpha 完整形式(`#FF573380`)。工具会把全部 5 种输入形态在内部归一到同一规范颜色。大小写无关(`#3b82f6` 与 `#3B82F6` 解析结果完全相同)。非法字符或位数错误会产生一个安静的行内错误;合法 HEX 则会实时刷新其他每一个格式字段,包括 HSL。

2. 2

   从 HSL 字段读取 HSL 三元组

   HEX 字段下方的 HSL 字段以 CSS Color 4 现代空格分隔语法显示对应的 `hsl()` 值:不透明颜色为 `hsl(217 91% 60%)`,带 alpha 时为 `hsl(217 91% 60% / 0.5)`。色相是 0–360 之间的整数度;饱和度与感知亮度是 0–100 之间的整数百分比。数值会被四舍五入以便显示阅读 —— 工具的内部 OKLCH 事实源意味着底层精度是浮点,因此往返回到 HEX 时保持稳定。

3. 3

   点击「复制」抓取 HSL 字符串

   每个格式卡片右侧都有一个复制按钮。一键即可把值送到剪贴板 —— 按钮标签短暂闪现「Copied!」以便您知道。复制出来的字符串是规范的 CSS Color 4 语法(`hsl(217 91% 60%)`);如果您的目标需要遗留的逗号形式(`hsl(217, 91%, 60%)`),转换是机械的。要输出特定平台的代码(Tailwind v4、SwiftUI、Compose、Flutter),请使用取色器下方的「复制为代码」区段 —— 那些片段会按每个平台原生期望的格式输出。

4. 4

   同屏可见:RGB、OKLCH、OKLAB、HSV、HWB、CMYK、命名颜色

   您粘贴的同一个 HEX 也会点亮其他格式字段 —— 给 canvas 调用与硬件用的 RGB,给感知均匀设计系统用的 OKLCH 与 OKLAB,给设计师取色器工作流用的 HSV 与 HWB,给印刷估算用的 CMYK,以及给文档与文案用的最接近 CSS 命名颜色。您绝不会被锁死在仅 HEX → HSL。如果您还需要把 OKLCH 三元组放进 Tailwind v4 `@theme` 块(那里感知亮度比 HSL 那条受 gamma 困扰的 L 更重要),它就在 OKLCH 字段中,带自己的复制按钮。

5. 5

   用取色器可视化扫描感知亮度

   格式网格下方是一个 SL 方块 + 色相滑块 + alpha 滑块,用于可视化探索。SL 方块直接映射到 HSL 的饱和度 × 感知亮度平面:纵向拖动可让 L 在 0% 到 100% 之间游走,同时观察 HSL 字段实时更新。在锁定具体百分比之前,可视化地生成浅色或深色非常有用。在 Chromium 系浏览器(Chrome、Edge、Brave)上,EyeDropper 按钮会激活原生 `EyeDropper` API,在屏幕任意位置取样像素(包括浏览器窗口之外)。

HEX / HSL 常见错误

扫描 HSL 的 L 做 9 档调色板:
同样 L 下的 hsl(120 100% 50%) 与 hsl(240 100% 50%)
看起来明显亮度不同 —— 调色板感觉高低不齐。

改为扫描 OKLCH 的 L:
oklch(0.7 0.2 130) 与 oklch(0.7 0.2 250)
看起来同样亮;调色板在所有色相之间读起来连贯一致。

从 H=350 到 H=10 做线性插值:
(350 + 10) / 2 = 180°(青色中点)
错了 —— 沿色环走了长路。

短路径色相插值:
midpoint = ((350 + 10 + 360) / 2) % 360 = 0°(红色中点)
沿色环短路径穿过红色。

把 Photoshop 的 HSV 值粘进 CSS 的 hsl() 规则:
Photoshop HSB 0, 100, 100(纯红)
CSS hsl(0 100% 100%) 渲染成白色 —— 完全错的颜色。

粘进 CSS 之前把 HSV 转成 HSL:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) 渲染成纯红 —— 正确。

输出不带百分号的 HSL:
hsl(217 91 60)
CSS 解析错误 —— 每个浏览器都忽略整条规则。

在 S 与 L 上带百分号输出 HSL:
hsl(217 91% 60%)
合法 CSS —— 所有常青浏览器与 IE 9+ 都能工作。

谁在使用 HEX 转 HSL

前端开发者定义 HSL CSS 变量

从 Figma HEX 一次性定义 `--primary: hsl(217 91% 60%)`,然后只改 L 来组合 `--primary-hover: hsl(217 91% 70%)`、`--primary-active: hsl(217 91% 50%)`、`--primary-bg: hsl(217 91% 95%)`。HEX 粘贴一次,读出 HSL 三元组,放进 CSS 自定义属性块。这正是在基于 OKLCH 的色阶接管之前,旧式设计系统用来让浅色与深色保持色调连贯的范式。

设计师把 HEX 翻译成 HSL 取色器

在色相 + 饱和度 + Value 取色器(Adobe、Sketch、Figma 的 HSB 模式)上成长起来的设计师,即便源文件交付的是 HEX,通常也想要 HSL 三元组。把 HEX 粘贴一次就得到对应的 HSL,可直接对接设计师心中的色环位置,无需手动猜。在评审品牌色规范、想知道它相对于同家族其他品牌色在色环上落在哪里时很有用。

主题系统作者计算暗色模式 token

暗色模式主题化常常翻转 L 而保持 H 与 S 不变 —— 浅色模式的 `hsl(217 91% 60%)` 主色映射到暗色模式的 `hsl(217 91% 40%)`(或类似)。把浅色模式 HEX 粘贴进来,读出 HSL,计算暗色模式的 L,再把新的 HSL 写回暗色主题 token。当您手头有 HSL 三元组时,这一范式是机械的;用原始 RGB 通道做这件事则要繁琐得多。

设计系统作者生成浅色与深色色阶

通过扫描 L 生成 9 档浅色 / 深色色阶:`hsl(217 91% 95%)`(最浅)、85%、75%、65%、55%、45%、35%、25%、`hsl(217 91% 15%)`(最深)。把基础 HEX 粘贴进来,读出 HSL,在脑中或代码中按 10% 步长扫描 L。(若需要每一档看起来同样亮的感知均匀色阶,请切换到旁边的 OKLCH 字段 —— 由于 L 并非感知均匀,HSL 色阶在不同色相之间看起来高低不齐。)

CSS 作者使用运行时 hsl(from ...) 运算

现代 CSS 支持 `color-function-from` 语法:`hsl(from var(--primary) h s calc(l + 10%))` 在渲染时派生出 `--primary` 的更浅变体,无需预先算出每一档。把品牌 HEX 粘贴进来,确认 HSL 三元组,把基础值放进一个 CSS 变量,派生 token 用运行时运算。已在 Chrome 119+、Safari 17.2+、Firefox 128+ 中交付。

前端开发者构建 Tailwind v3 HSL token 集

Tailwind v3 把主题颜色作为空格分隔的 HSL 三元组存进 CSS 变量(`--primary: 217 91% 60%`),在 `tailwind.config.js` 中通过 `hsl(var(--primary))` 组合。把品牌 HEX 粘贴进来,读出 HSL,把三个数(不带 `hsl(...)` 外壳)放进变量定义。Tailwind v4 已转向 OKLCH 优先,但 v3 代码库仍在使用 HSL 模式,并将持续使用许多年。

取色器 UI 作者把 HEX 映射到 HSL 控件

构建一个把色相 / 饱和度 / 感知亮度作为三个独立滑块暴露的取色器(经典的 Adobe 风格 UI),意味着要把传入的 HEX 映射到取色器的三个控件上。把 HEX 粘贴到这里,读出 HSL 三元组,以编程方式定位三个滑块。这正是您的取色器内部要做的转换;本工具把中间值露出来便于调试。

无障碍工程师调整品牌色感知亮度以达对比度

当品牌色对某背景过不了 WCAG 对比度,最省事的修法是抬高 L 直到比率达标 —— 不动 H 与 S,颜色仍读起来是同一品牌身份。把品牌 HEX 粘贴进来,看着对比度徽章,在脑中调整 L(或借助取色器的 L 轴),直到 WCAG 与 APCA 同时通过。HSL 字段会露出新的 L 百分比供规范文档使用;HEX 字段则露出对应代码供样式表使用。

HEX 转 HSL 的数学与解析

HEX → RGB → HSL 是一条两步流水线

转换以 RGB 作为中间步骤。第一步:每个通道通过 `parseInt(hex.slice(1, 3), 16)` 把 HEX 解析成 RGB 整数。第二步:把 RGB 归一到 0–1,计算 `max` / `min` / `delta`,套用 CSS Color 4 §6.4 的分段三角函数:`L = (max + min) / 2`、`S = delta / (1 - |2L - 1|)`、`H = 分段 * 60`。两步结构正是工具同时露出中间 RGB 三元组的原因 —— 它显示零成本,而且便于调试。

CSS Color 4 §6.4 定义参考算法

W3C CSS Color 4 规范 §6.4(`rgb()` 到 `hsl()` 算法)定义了规范的分段数学:感知亮度为 max 与 min 的中点,饱和度为 `delta / (1 - |2L - 1|)`(delta = 0 时 S = 0,以避免在灰色上除以零),色相为「哪个通道是 max」的分段函数,每档 60°。规范也处理边界情况:纯黑(`#000`)产出 `hsl(0 0% 0%)`,色相约定为任意 0°;纯白(`#FFF`)同样产出 `hsl(0 0% 100%)`;纯灰产出 `hsl(0 0% 50%)`。

色相在 360° 回卷,S 与 L 是百分比

HSL 的三个轴单位不同。色相是 0–360 的角度,带回卷 —— `hsl(370 ...)` 被解读为 `hsl(10 ...)`,因为角度位置会回卷。饱和度与感知亮度是 0%–100% 的百分比,不回卷;超出范围会被裁剪。CSS Color 4 也接受 turns(`hsl(0.6turn ...)`)或 radians(`hsl(3.787rad ...)`)的色相;工具输出使用度,因为这是设计工具 UI 与品牌规范文档中最常见的形式。

HSL 的感知亮度并非感知均匀

`hsl(120 100% 50%)` 的绿看上去明显比 `hsl(240 100% 50%)` 的蓝更亮,尽管两者标称感知亮度相同 —— 因为 HSL 继承了 sRGB 的 gamma 特性,并对所有色相使用同一 L 标度。这正是基于 HSL 的浅色 / 深色色阶看起来不齐的原因(绿色阶的浅端比蓝色阶的浅端爬升更快),也是设计系统大体迁移到 OKLCH 做色阶生成的原因。工具同屏呈现 HSL 与 OKLCH,因此选择只在一瞥之间。

OKLCH 作为内部事实源,保障往返稳定

尽管这个辐条专门针对 HEX → HSL,共享的底层转换器在内部以 OKLCH 三元组持有规范颜色。HEX → HSL → RGB → OKLAB → HEX 往返保持比特稳定;以 HSL 作枢轴的老式转换器会累积舍入误差,几次转换之内就可能让色相漂移好几度。OKLCH 枢轴也把色相保留为稳定的轴,因此拖动色相滑块不会意外地穿过灰色淡入淡出。按照 Björn Ottosson 2020 年的 OKLAB 论文。

通道编码:8 位无符号,sRGB gamma 编码

HEX 代码在 IEC 61966-2-1(1996)定义的 sRGB 色彩空间中编码 8 位无符号 RGB 通道(0–255)。这些值是*gamma 编码*的 —— 通道值与感知亮度之间的关系是非线性的,遵循分段 sRGB 传递函数(大致是 2.4 指数,接近 0 处带一段小的线性段)。HSL 直接从这些 gamma 编码的 RGB 值派生,中间没有任何线性化步骤,这正是 HSL 感知均匀性问题的根源。OKLCH 会先做线性化再重新映射到感知均匀的空间;HSL 不会。

HEX / HSL 工作流最佳实践

新代码使用现代空格分隔的 HSL 语法

对于 2025 年及以后交付的代码,CSS Color 4 的 `hsl(217 91% 60%)`(空格分隔)和 `hsl(217 91% 60% / 0.5)`(斜线表 alpha)是规范语法。遗留的逗号形式 `hsl(217, 91%, 60%)` 与 `hsla(217, 91%, 60%, 0.5)` 仍处处被支持,但在 CSS Color 4 中已在文体上被视为不推荐。新样式表中请使用现代语法;只在确实需要遗留支持的 IE 9–11 场景里继续保留 `hsla()` 作为兜底。

生成色阶请用 OKLCH,而非 HSL

HSL 的感知亮度轴并非感知均匀 —— 9 档 L 扫描产出的色阶中,每一档 L 值上绿色阶看起来都比蓝色阶更亮。要每一档看起来同样亮的色阶(设计系统的默认需求),请改在 OKLCH 中生成:`oklch(0.7 0.15 217)`、`oklch(0.6 0.15 217)` 等。工具为同一 HEX 同屏呈现 HSL 与 OKLCH,因此两者之间切换只是一次「复制」点击的距离。

锁定色相与饱和度,只扫描感知亮度

用 HSL 做浅色 / 深色工作时,只改 L —— 让 H 与 S 在整条色阶上保持一致。色相漂移(哪怕只是 5°)会让色阶看起来杂乱。饱和度漂移会让浅端看起来褪色、深端看起来浑浊。一次只动一根轴的纪律,正是 HSL 对设计师友好这一名声的根源;放弃它就得到两边都坏的下场。

源头 token 用 HEX,派生变体用 HSL

在写设计 token 规范时,以 HEX(或 OKLCH)作为规范形式 —— 它们更短,能干净地放进 JSON 或 YAML。HSL 更适合作为运行时*派生* token 的形式(`hsl(from var(--primary) h s calc(l + 10%))`),而不是事实源格式。两种格式描述同一颜色;选择关乎 token 在系统中扮演的角色。

在 HSL 变体旁记录基础 HEX

当您交付像 `--primary-light: hsl(217 91% 70%)` 的 CSS 变量时,请加一条指回基础 HEX 的注释:`/* base: #3b82f6 → hsl(217 91% 60%),浅色变体 +10% L */`。六个月后,当有人想派生 `--primary-lighter` 时,他们需要基础颜色才能计算 —— 而单独的 HSL 自身并不会露出这个信息。HEX + HSL 一起,才能完整保留来源信息。

用 URL 哈希分享实时的颜色决策

每次颜色变更都会自动把 URL 哈希更新为 `#hex=3b82f6`。把 URL 复制进 Slack 线程或 GitHub issue,打开它的人会落在同样的颜色、同样的 HSL 三元组上。这比在聊天里粘贴一个 HSL 字符串更可靠 —— 收件人手动输入时偶尔会把度数打错,或把百分号漏掉 —— 也让设计评审讨论可以指向某一确切颜色,而不是「上周二聊过的那个蓝色」。哈希永远不会传到服务器。

常见问题