Skip to main content
FreeToolkit .ai

HSL 到 HEX 转换器 使用交互式滑块将 HSL 颜色值转换为 HEX 编码。

HSL 到 HEX 转换器 illustration
🎨

HSL 到 HEX 转换器

使用交互式滑块将 HSL 颜色值转换为 HEX 编码。

1

调整HSL滑块

使用滑块设置色相（0-360°）、饱和度（0-100%）和明度（0-100%）。

2

预览颜色

实时查看颜色样本的更新，当您调整每个值时。

3

复制HEX输出

复制生成的HEX代码，用于CSS、设计工具或任何应用程序。

Loading tool...

What Is HSL 到 HEX 转换器?

HSL 到 HEX 转换器将色相、饱和度和亮度颜色值转换为网页开发中使用的十六进制颜色代码。HSL 是一种人性化的颜色模型，其中色相代表颜色轮位置（红色在 0°，绿色在 120°，蓝色在 240°），饱和度控制鲜艳度（0% 为灰色，100% 为纯色），亮度设置明暗度（0% 为黑色，100% 为白色）。转换为 HEX 会产生六个字符的代码，这是网页技术所需的。这个转换器在设计中尤其有用，因为它可以直观地操作颜色，但需要 HEX 输出来实现。交互式滑块允许您空间探索颜色 - 旋转色相、调整鲜艳度和设置明暗度，然后立即获取网页准备好的 HEX 代码。该转换涉及首先将 HSL 转换为 RGB，然后对每个 RGB 通道进行两位十六进制编码。

Why Use HSL 到 HEX 转换器?

  • 直观的滑块用于色相旋转、饱和度和明度调整
  • 色相滑块可视化显示整个颜色谱系，便于选择颜色
  • 实时预览样本更新，当您调整任何值时
  • 直接复制生成的HEX代码，用于Web开发
  • 无需注册 -- 完全在浏览器中运行

Common Use Cases

颜色探索

通过调整色相、饱和度和明度来直观地探索颜色轮，找到完美的阴影。

主题构建

从基于HSL的设计系统开始，并将最终颜色转换为HEX用于生产CSS。

调色板生成

保持色相不变，同时改变饱和度和明度来创建和谐的渐变色，然后导出为HEX。

品牌颜色文档

记录品牌颜色，既有HSL（用于灵活性）也有HEX（用于实现）格式。

Technical Guide

HSL 到 HEX 的转换是一个两步过程：HSL → RGB → HEX。HSL 到 RGB 算法首先计算色度（颜色强度）：C = (1 - |2L - 1|) × S，其中 S 和 L 在 0-1 范围内。中间值 X = C × (1 - |(H/60) mod 2 - 1|) 确定次要颜色分量。根据我们在哪个 60° 色相轮扇区，R、G、B 分配来自 C、X 和 0。最后，对所有通道添加亮度调整 m = L - C/2。结果 R、G、B 值（0-1）缩放到 0-255 并转换为两位十六进制字符串。边缘情况包括：无彩色（S=0），其中 R=G=B=L×255；纯黑（L=0）产生 #000000；以及纯白（L=100%）产生 #FFFFFF。该算法对于 8 位每通道 RGB 可表示的 1670 万种颜色是确定性的和无损的。在 JavaScript、Python 和其他语言中，理解这个管道是程序化颜色操作的关键。

Tips & Best Practices

  • 1
    将明度设置为50%以获得任何色相的最鲜艳版本
  • 2
    降低饱和度至0%会创建优雅的柔和色调，适合专业设计
  • 3
    互补颜色在色相轮上恰好相距180°
  • 4
    明度为0%始终产生#000000，无论色相和饱和度如何
  • 5
    为了实现Web无障碍，请确保至少4.5:1的对比度 -- 通过调整明度来实现这一点

Related Tools

RGB 到 HEX 转换器 - free online tool

RGB 到 HEX 转换器

使用滑块和实时预览将 RGB 颜色值转换为 HEX 编码。

🎨 Color Tools
十六进制到HSL转换器 - free online tool

十六进制到HSL转换器

将HEX颜色代码转换为HSL（色相、饱和度、亮度）值。

🎨 Color Tools
HSL 到 RGB 转换器 - free online tool

HSL 到 RGB 转换器

使用交互式滑块和实时预览将 HSL 值转换为 RGB。

🎨 Color Tools
颜色拾取器 - free online tool

颜色拾取器

交互式颜色拾取工具，支持HEX、RGB、HSL和CMYK输出。

🎨 Color Tools
颜色渐变生成器 - free online tool

颜色渐变生成器

生成任意颜色的更浅渐变，步长可调节。

🎨 Color Tools

Frequently Asked Questions

Q HSL与RGB有什么区别？
RGB通过混合红、绿和蓝光来定义颜色。HSL则通过其色相（颜色）、饱和度（强度）和明度（亮度）来描述颜色。HSL对于人类来说更直观，易于理解和操作。
Q 我可以从HSL获得精确的HEX值吗？
是的，转换是确定性的。但是，由于HSL值可以是分数，而HEX使用整数（每个通道0-255），因此一些非常细微的HSL差异可能会四舍五入为相同的HEX值。
Q 哪些HSL值产生纯红色？
纯红是hsl(0, 100%, 50%)，相当于#FF0000。色相0°表示红色，饱和度100%意味着完全鲜艳，明度50%表示既不变暗也不变亮。
Q HSL是否比RGB更适合设计？
对于设计探索来说，是的。HSL允许您独立控制颜色、强度和亮度。这使得创建渐变色、阴影和谐调色板比操作RGB值更直观。
Q 每个HSL值的范围是什么？
色相：0-360度（颜色轮位置）。饱和度：0-100%（灰色至鲜艳）。明度：0-100%（黑色至白色）。这三个值唯一地定义了任何颜色。

About This Tool

HSL 到 HEX 转换器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.