HEX 转 HSL 转换器

HEX 转 HSL 转换器可将 #3B82F6 这样的十六进制代码转换为 hsl(217, 91%, 60%) 这样的 HSL 值。HSL 通过色相（颜色本身，0–360°）、饱和度（鲜艳程度，0–100%）和亮度（明亮程度，0–100%）来描述颜色 — 这种模型远比原始的 HEX 字符更贴近人们对颜色的思考方式。

一旦颜色用 HSL 表示，构建配色就变得直观：保持相同色相、微调亮度即可得到浅色和深色；只改变饱和度即可让颜色更醒目或更柔和。

为何转换为 HSL

浅色与深色

提高或降低亮度，从一种基础色生成一致的更浅和更深的变体。

调节鲜艳度

只调整饱和度，即可让颜色更突出，或为背景和 UI 状态做柔化处理。

构建配色

按等步长旋转色相，即可创建和谐、均匀分布的配色方案。

如何将 HEX 转换为 HSL

1

输入 HEX 代码

键入或粘贴一个 HEX 值 — 带不带 # 都可以。3 位缩写（#F00）和 6 位（#FF0000）格式均受支持。

2

读取 HSL 结果

HSL 值会在你输入时即时出现，实时色块同步更新，方便你用肉眼确认颜色。

3

或直接选色

点击预览色块打开系统原生取色器，直观选色 — HEX 和 HSL 字段会自动更新。

4

复制与复用

复制 hsl() 字符串用于 CSS。下方面板还会以 HEX、RGB、HSV 和 CMYK 显示该颜色。

功能特性

理解 HSL 三通道

通道	范围	控制什么
色相	0–360°	颜色在色轮上的位置：0° 红、120° 绿、240° 蓝。
饱和度	0–100%	鲜艳度：0% 为灰，100% 为最鲜艳的版本。
亮度	0–100%	明暗：0% 为黑，50% 为纯色，100% 为白。

即时转换

输入时结果实时呈现于浏览器 — 无需刷新，也不上传服务器。

缩写与大小写

3 位 HEX 自动展开，且忽略字母大小写。

预览与取色

实时色块加内置取色器，支持直观选色。

所有格式一次呈现

为每种颜色同时显示 HEX、RGB、HSL、HSV 和 CMYK。

常见问题

什么是 HSL？

HSL 代表色相、饱和度和亮度。色相是颜色类型（0–360°），饱和度是鲜艳程度（0–100%），亮度是明亮程度（0–100%）。

为什么用 HSL 而不用 HEX 或 RGB？

HSL 对人类更直观。只改亮度即可得到更浅或更深的颜色，只改饱和度即可得到更醒目或更柔和的版本，无需猜测 HEX 字符。

CSS 支持 HSL 吗？

支持。所有现代浏览器都完整支持 hsl() 和 hsla() 颜色函数，因此你可以把输出直接粘贴进样式表。

HEX 转 HSL 会损失精度吗？

为便于阅读，HSL 值会四舍五入为整数，因此再转换回去时每个通道可能相差一个单位。肉眼所见的颜色基本一致。

如何制作更浅版本的颜色？

保持色相和饱和度不变，提高亮度百分比即可。要得到更深的颜色则降低亮度 — 这正是 HSL 在配色上如此便利的原因。