颜色转换
HSL 转 HEX 在线转换器
输入 HSL 的色相、饱和度和明度，系统会实时转换成 HEX、RGB 和 CSS 写法，适合前端开发、设计系统维护和主题色微调。
实时转换
拖动 H、S、L 三个通道即可即时查看颜色变化，非常适合在设计阶段快速微调亮度和饱和度。
H 表示色相，S 表示饱和度，L 表示明度。输入变化后会立即同步生成 HEX 和 RGB。
- HSL
- 9, 100%, 64%
- HEX
- #FF6347
- RGB
- 255, 99, 71
- CSS 文字色
- color: hsl(9, 100%, 64%);
- CSS 背景色
- background-color: #FF6347;
HSL 是什么
HSL 通过色相、饱和度和明度描述颜色，调色时比直接修改 RGB 更直观。
- `H` 表示色相，范围通常是 `0-360`。
- `S` 表示饱和度，数值越高颜色越鲜明。
- `L` 表示明度，越接近 `0%` 越暗，越接近 `100%` 越亮。
适合哪些场景
HSL 最适合做主题色微调、状态色扩展和设计系统中的色阶调整。
- 基于同一色相快速生成 hover、active、disabled 等状态色。
- 在不改变主色调的前提下，调整明度和饱和度得到多层级色板。
- 把设计工具中的 HSL 标注快速转换成前端可直接使用的 HEX 代码。
常见 HSL 预设
这组预设可以帮助你快速理解 HSL 与实际颜色表现的对应关系。
名称HSL用途参考色
番茄红9, 100%, 64%活跃、醒目，适合按钮强调色。#FF7F50
海盐蓝208, 79%, 51%常见于营销页 CTA 和状态提示。#FF6347
森林绿123, 46%, 34%适合信息类和 SaaS 风格页面。#1E88E5
墨夜蓝215, 28%, 17%常用于成功反馈与自然主题。#2E7D32
使用建议
如果你在做设计系统或品牌色扩展，优先在 HSL 空间微调通常比直接改 RGB 更稳定。
- 需要做同色系层级时，先固定 `H`，再微调 `S` 和 `L`。
- 页面正文和背景要一起看，不要只盯着颜色值本身。
- 确定 HEX 之后，再配合对比度检测工具检查可读性。
相关工具
你还可以继续使用其他已经可用的颜色工具完成配色和转换。