HEX 转 HSL — 将 HEX 颜色码转换为 HSL 值
将 HEX 颜色码转换为 HSL 值。实时色样预览，完全在浏览器中运行。无上传、无账号、无限制。
HEX to HSL
Convert HEX color codes to HSL values online. Enter a hex code and get HSL instantly. Works entirely in your browser.
HEX 是网页开发者写 CSS 时使用的语言：#3B82F6 是六个字符，对应三对十六进制数字，每对编码一个红、绿或蓝通道，范围 00 到 FF。HSL 是设计师选色时使用的语言：hsl(217, 91%, 60%) 包含一个色相（217 度，位于蓝色范围）、一个饱和度（91%，非常鲜艳）和一个亮度（60%，比中灰略亮）。两种表示法描述的是同一种颜色 —— 同一个 sRGB 值 —— 但 HSL 的形式在常见的设计任务中更有用：从单一色相构建配色、挑选浓淡（tint）或暗调（shade）、或在不影响色相和饱和度的前提下调整亮度。
HEX 转 HSL 中「不那么显然」的一点是背后的转换数学。HEX 对 3B 是十进制的 59；82 是 130；F6 是 246。除以 255，就得到 0 到 1 范围的 RGB 三元组 (0.231, 0.510, 0.965)。HSL 转换则是一系列步骤：找出三个通道的最大值与最小值，计算差值（max - min），再由此推导出色相、饱和度和亮度。色相的计算有六种分支，取决于哪个通道是最大值 —— 公式会自动选取正确的那一个。结果是一个 0 到 360 之间的色相、一个 0 到 100 之间的饱和度，以及一个 0 到 100 之间的亮度。完整的转换大约十行代码；本工具在一瞬间就完成。
最终的交接：如果目标是挑选配色，HSL 输出就是系统化生成配色的输入 —— 提高亮度得到浅色（tint），降低亮度得到暗色（shade），旋转色相得到相邻色。如果目标是匹配设计工具的输出，HSL 字符串正是 Figma、Sketch 和 Adobe XD 在颜色面板中作为「HSL」导出的格式。如果目标是写 CSS，HSL 语法是开发者最易读的形式 —— background: hsl(217, 91%, 60%) 比 background: #3B82F6 更易扫读，因为亮度和饱和度一目了然。
使用方法
输入 HEX 码
在输入框中键入 3 位 HEX（#3B8）或 6 位 HEX（#3B82F6）。如果省略 #，输入会自动加上前缀；短格式 HEX 会在解析前展开为长格式。
查看 HSL 分解
输出显示色相（0-360 度）、饱和度（0-100%）和亮度（0-100%）。右侧的实时色样随键入更新，你可以实时看到颜色。
复制 HSL 字符串
把值复制为 CSS 可用的 `hsl(217, 91%, 60%)` 或 `hsla(217, 91%, 60%, 1)` 声明。粘贴到样式表、设计工具或 CSS-in-JS 模板字符串中。
常见问题
HSL 有什么用途？
HSL（色相、饱和度、亮度）比 RGB 是更直观的色彩模型，更适合设计任务。挑一个色相（0-360）得到一个基色；调整饱和度（0-100%）控制强度；调整亮度（0-100%）控制明暗。设计师用 HSL 系统地生成浓淡与明暗变化。
转换是无损的吗？
是的 —— HEX、RGB 和 HSL 是同一 sRGB 颜色的数学等价表示。没有舍入、没有裁剪、没有信息损失。转换只是一系列算术运算，在不同表示法中产生完全相同的颜色。
色相数字代表什么？
色相是颜色在色轮上的位置，以度为单位：0 是红，60 是黄，120 是绿，180 是青，240 是蓝，300 是品红，360 又回到红。整个范围是 0-360，其中 0 和 360 代表同一种颜色（红色）。
为什么我的 HEX 印出来不一样？
HEX 和 HSL 都对应 sRGB 颜色，也就是屏幕显示的颜色。印刷使用 CMYK，色域更小。屏幕上看起来鲜艳的饱和蓝绿，印出来可能更暗淡。HEX 转 HSL 的转换是精确的；sRGB 转 CMYK 才是近似的。
可以输入 RGB 值吗？
HEX 转 HSL 工具只接受 HEX 输入。如果要输入 RGB，请使用颜色转换器，它在一个界面里同时接受 HEX、RGB、HSL 和 CMYK，并同时显示四种格式。底层转换是相同的。
限制说明
- 仅支持 sRGB本工具默认 sRGB 色彩空间，这是网页的标准。引用 Display P3 或 Rec.2020 颜色的 HEX 码（罕见，仅在部分 Apple 设计工具中使用）会被当作 sRGB 处理，超出色域的值会被裁剪。
- 无 Alpha 通道本工具处理 3 位和 6 位 HEX（无 alpha）。对于带 alpha 的 HEX（8 位如 #3B82F680），HSL 输出中会忽略 alpha。需要 HEXA 转 HSLA，请使用颜色转换器。
- 色相取整输出的色相四舍五入到最接近的整数度。饱和度和亮度四舍五入到最接近的整数百分比。如需更高精度，浮点形式的原始值可用 —— 在设置中开启该选项。
平台说明
- macOS
- Digital Color Meter（在 Applications > Utilities 中）读取光标下的颜色。本浏览器工具是把采样的颜色转换为 HSL 的合适选择，macOS 拾色器的主面板不直接显示 HSL。
- Windows
- PowerToys 的 Color Picker 读取屏幕上任意像素。本浏览器工具是把拾取的颜色转换为 HSL 的合适选择，多数 Windows 设计工具的拾色器都不显示 HSL。
- Linux
- GIMP 的拾色器显示 HEX、RGB 和 HSV。本浏览器工具额外提供 HSL 输出，而 HSL 正是 CSS 原生使用的模型。把本工具与 GIMP 搭配使用，构成完整的拾取—转换工作流。
- Web
- 完全在客户端运行。页面加载后离线可用。HSL 输出是合法的 CSS 颜色值 —— 可粘贴到任何样式表、CSS-in-JS 模板或支持 HSL 语法的设计工具中。