HSL调节器
通过滑块直观调节色相、饱和度和亮度,可将颜色代码转换为HEX、RGB、HSL格式并复制的在线工具。
HSL调节器
颜色输入与调节
起始颜色
#
原始颜色
#D4AF37
调节结果
#D4AF37
颜色代码
HSL
hsl(46, 67%, 52%)
HEX
#D4AF37
RGB
rgb(212, 175, 55)
CSS
color: #D4AF37;
历史
暂无调节记录
收藏
由于显示器设置和颜色配置文件的不同，实际颜色可能会略有差异。
什么是HSL调节器？
HSL调节器是一款在线工具，可让您使用直观的滑块实时调节颜色的色相（Hue）、饱和度（Saturation）和亮度（Lightness）值。输入HEX或RGB代码后，它会转换为HSL，让您可以单独微调每个属性。
您可以在工作时并排比较原始颜色和调节后的颜色，非常适合在设计工作中精确调整颜色。调节后的颜色可以立即以HSL、HEX、RGB格式复制使用。
适用场景
- 创建品牌颜色变体 – 只调节基础颜色的亮度和饱和度，创建一致的颜色变体
- UI悬停/激活状态颜色 – 只调节按钮或链接基础颜色的亮度，生成状态特定的颜色
- 颜色调配 – 保持饱和度和亮度不变，只改变色相，创建和谐的颜色组合
- 改善可访问性 – 调节现有颜色的亮度以增加对比度
- 颜色探索和实验 – 在构思阶段快速尝试各种颜色组合
- CSS颜色代码转换 – 将HEX代码转换为HSL或RGB使用
主要功能
- 直观的HSL滑块 – 使用单独的滑块调节色相（0-360°）、饱和度（0-100%）和亮度（0-100%），实时查看颜色变化。
- 多种颜色输入方式 – 直接使用颜色选择器选择，或输入HEX代码指定起始颜色。
- 原始与结果对比 – 并排显示原始颜色和调节后的颜色，直观比较变化。
- 多种代码输出 – 同时提供HSL、HEX、RGB、CSS格式的代码，可立即复制所需格式。
- 历史自动保存 – 调节的颜色会自动保存到历史记录，方便回顾以前的工作。
- 收藏存储 – 将常用颜色保存到收藏，快速访问。
使用方法
- 选择起始颜色 – 点击颜色选择器或输入HEX代码，然后点击”应用”按钮。
- 调节HSL值 – 移动色相、饱和度、亮度滑块创建您想要的颜色。变化会实时反映。
- 查看结果 – 比较原始和调节结果，使用复制按钮将所需代码格式复制到剪贴板。
- 保存和管理 – 将喜欢的颜色添加到收藏，从历史记录中调用以前的颜色。
了解HSL颜色模型
HSL是一种以接近人类感知方式来表示颜色的颜色模型：
- 色相（Hue, 0-360°） – 表示在色轮上的位置。0°/360°是红色，120°是绿色，240°是蓝色。
- 饱和度（Saturation, 0-100%） – 表示颜色的鲜艳程度。0%是灰色，100%是完全鲜艳的颜色。
- 亮度（Lightness, 0-100%） – 表示颜色的明暗程度。0%是黑色，50%是纯色，100%是白色。
HSL的优势在于可以在保持色相的同时调节饱和度或亮度。这使得创建同一颜色系列的明亮/暗淡变体变得容易。
常见问题
HSL和RGB有什么区别？
RGB通过混合光的三原色（红、绿、蓝）来表示颜色，而HSL通过色相、饱和度和亮度来表示。HSL允许直观调整，如”再亮一点”或”降低饱和度”，更适合设计工作。
色相值是如何确定的？
色相用色轮上的角度（0-360度）表示。0°是红色，60°是黄色，120°是绿色，180°是青色，240°是蓝色，300°是品红色。360°回到红色。
饱和度0%和100%有什么区别？
饱和度0%时，颜色完全去饱和（灰度），而100%时，它变成该色相最鲜艳、最纯净的颜色。降低饱和度会产生更柔和、类似粉彩的感觉。
如何创建按钮悬停颜色？
只需将基础按钮颜色的亮度（L）值降低10-15%，即可创建自然的悬停效果。保持色相和饱和度不变以保持颜色一致性。
历史和收藏保存在哪里？
它们保存在浏览器的本地存储中。在同一浏览器中关闭页面后仍会保留，但在不同浏览器或设备上无法看到。历史保存最近10个颜色，收藏最多可保存20个。
在CSS中使用HSL有什么优势？
HSL使在CSS中计算颜色变体变得容易。例如，只调节亮度就可以轻松创建同一颜色的明亮/暗淡版本。结合CSS变量和calc()，还可以实现动态颜色主题。