十六进制到HSL转换器 将HEX颜色代码转换为HSL（色相、饱和度、亮度）值。
十六进制到HSL转换器
将HEX颜色代码转换为HSL（色相、饱和度、亮度）值。
输入HEX颜色
输入HEX颜色代码或使用颜色选择器来选择您的颜色。
查看HSL值
实时看到色相（0-360°）、饱和度（0-100%）和明度（0-100%）的值。
复制HSL输出
复制hsl() CSS函数值，以直接在样式表中使用。
What Is 十六进制到HSL转换器?
HEX 到 HSL 转换器可以将十六进制颜色代码转换为 HSL（色相、饱和度、亮度）颜色模型。与描述颜色通过混合红、绿、蓝光的 RGB 不同，HSL 以一种更直观于人类的方式来描述颜色。色相是指颜色的本身（以色轮上的度数为单位：0° 是红色，120° 是绿色，240° 是蓝色）。饱和度描述了颜色的强度或纯度（0% 为灰色，100% 为完全鲜艳）。亮度描述了颜色的明暗程度（0% 为黑色，50% 为纯色，100% 为白色）。这使得 HSL 在创建色板、调整亮度而不改变色相以及生成和谐的配色方案方面非常有价值。设计师和开发人员经常需要从 HEX（标准 Web 格式）转换为 HSL 以进行有意义的调整。例如，在 HSL 中创建更暗的阴影很简单 -- 只需减少亮度 -- 而在 HEX 或 RGB 中，您需要按比例调整所有三个通道。
Why Use 十六进制到HSL转换器?
-
将颜色分解为直观的色相、饱和度和明度组件
-
实时更新颜色预览块，随着您输入HEX代码而变化
-
输出CSS-ready hsl()函数，直接可用于样式表中
-
支持3位和6位HEX输入代码
-
有助于理解和操作颜色关系
Common Use Cases
配色方案设计
将品牌HEX颜色转换为HSL，以便通过调整饱和度和明度轻松创建变体。
主题生成
通过修改明度值（保持色相不变）来构建浅色和深色主题变体。
CSS自定义属性
将HSL值存储为CSS变量，实现灵活的颜色主题：--primary-h、--primary-s、--primary-l。
无障碍调整
调整明度值，以确保文本和背景之间有足够的对比度。
Technical Guide
从 HEX 到 HSL 的转换首先将十六进制字符串解码为 RGB 值（0-255），然后转换为 HSL。算法将 RGB 规范化到 0-1 范围，找到最大和最小的通道值，并计算：亮度 = (max + min) / 2。如果 max 等于 min，则颜色是无彩色的（灰色）且色相 = 0 和饱和度 = 0。否则，饱和度 = delta / (1 - |2L - 1|)，其中 delta = max - min。色相取决于哪个通道最大：如果红色是最大值，则 H = (G-B)/delta；如果绿色是最大值，则 H = (B-R)/delta + 2；如果蓝色是最大值，则 H = (R-G)/delta + 4。结果乘以 60 以将其转换为度数（0-360）。HSL 是 RGB 立方体的圆柱形表示，这使得它更直观地用于颜色操作。一个重要的区别：HSL 的亮度 50% 表示任何色相最鲜艳的形式，而 0% 始终是黑色，100% 始终是白色。这与 HSV/HSB 不同，其中 100% 值（亮度）表示最鲜艳的颜色。
Tips & Best Practices
Related Tools
Frequently Asked Questions
Q 什么是HSL颜色模型？
Q 为什么要将HEX转换为HSL？
Q hsl()是否支持CSS？
Q 如何使用HSL使HEX颜色变暗？
Q HSL和HSV有什么区别？
About This Tool
十六进制到HSL转换器 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.