HSL 转 HEX — 将 HSL 颜色值转换为 HEX 码
将 HSL 颜色转换为 HEX 码。色相、饱和度、亮度转六位十六进制字符串 —— 完全在浏览器中运行,无需上传。
HSL to HEX
Convert HSL color values to HEX color codes online. Enter HSL like 30,100,50 and get hex. Works entirely in your browser.
HSL 是人类推理起来最直观的颜色模型。三个独立坐标轴,每个都有清晰的含义:色相是绕色环的角度,饱和度是颜料相对于灰色的含量,亮度是距离黑或白的接近程度。设计师在选择调色板时会优先使用 HSL,因为一次只调整一个轴会产生可预测的结果 —— 降低饱和度去色,提高亮度变亮,旋转色相切换色族。Hex 是几乎每个设计工具实际保存的形式。Figma、Sketch、Photoshop 的色板面板、CSS 变量、Tailwind 配置 —— 它们都把颜色存储为六个十六进制数字,有时带两位 alpha 后缀。
这种不匹配正是 HSL-to-HEX 转换在前端工作中成为较常见小任务之一的原因。转换本身只是几行算术。转换有趣之处在边界:感知亮度与 hex 隐含假设的 sRGB 编码之间的 gamma 校正、每个通道向最近 8 位值的舍入,以及输入的 HSL 究竟代表什么(CSS 字符串、三个裸数字、设计工具的色板、截图吸管)的问题。本工具处理三种常见输入形式,并在精确算术旁边显示舍入结果,这样「我想要的值」与「我得到的值」之间的差异在预览色样中可见。
对大多数用途,成功完成 HSL-to-HEX 之后的正确下一步是把结果作为 token 放入设计系统,或写一行 CSS 自定义属性。如果需要反向 —— 有人给了你一个 hex 值,你想用 HSL 微调它 —— 这个站点上的 hex-to-hsl 转换器把 hex 读回相同的三个滑块,因此往返只需两次点击。对于命名颜色、可访问性检查(WCAG 对比度),或从上传的图像中提取调色板,这些是同一家族中的不同工具。
使用方法
输入 H、S、L 值
输入三个值或拖动三个滑块。色相在 360 处循环,饱和度和亮度是 0 到 100 的百分比。
复制 HEX 结果
六位十六进制代码立即出现。仅在你的设计工具要求时添加 # 前缀 —— 大多数现代 CSS 和 Figma 接受任一形式。
与 RGB 预览对比
RGB 和 HSL 读数并排显示,方便你在转换与另一个工具输入值相差一两个单位时发现舍入误差。
常见问题
为什么结果四舍五入到最近的整数?
HEX 是每通道 8 位格式,因此任何小数 HSL 值都必须量化到 256 个步长之一。低于 1% 的饱和度或亮度差异在转换中按设计消失。
这个工具保留 alpha 透明度吗?
不保留。输出始终是 6 位(RRGGBB)。需要带 alpha 的 8 位 hex,请使用专门的 color-converter 工具,它会单独暴露 alpha 通道。
HSL 和 HSV 有什么区别?
HSV(色相、饱和度、值)在 V=100 处达到最高亮度。HSL(色相、饱和度、亮度)在 L=50 处达到最高。两者共享色相和饱和度的含义,但处理第三个轴的方式不同。设计师倾向 HSL,因为亮度轴更直接映射到眼睛感知颜色的方式。
可以粘贴 CSS hsl() 字符串吗?
可以。输入框接受完整的 CSS hsl(210, 50%, 40%) 形式、无逗号 hsl(210 50% 40%) 形式,以及纯数字 210 50 40。三者解析为相同结果。
限制说明
- 仅 sRGBHEX 隐含 sRGB。Display P3 或 Rec.2020 中的广色域颜色在转换时会被裁剪。如需保留色域,请使用支持色彩配置文件的工具。
- 不支持命名颜色输出是十六进制代码,不是名称。'rebeccapurple' 及其他 147 个 CSS 命名颜色未暴露。反向查找表是另一个独立工具。
- 线性 vs gamma 混淆HEX 假设 sRGB 编码(gamma 校正后)的值。如果你的源 HSL 来自线性 RGB,结果显示时会比预期略暗。
平台说明
- macOS
- Digital Color Meter(在 /Applications/Utilities 中)以 sRGB 报告值,并在屏幕上显示等效 hex —— 可用于直观验证转换。
- Windows
- PowerToys 的 Color Picker(Win+Shift+C)将任何颜色以带 # 前缀的 hex 形式粘贴。在粘贴到设计文件前用它确认转换结果。
- Linux
- GIMP 的拾色器在前/背景颜色框中显示 hex。吸管也报告 HSL,因此可以通过 GIMP 往返一个颜色来验证。
- Web
- 所有主流浏览器都为 color 输入元素提供原生拾色器,始终显示 sRGB hex。可用作转换的健全性检查。