颜色转换
HSL 转 RGB 在线转换器
输入 HSL 的色相、饱和度和明度，系统会实时转换成 RGB、HEX 和 CSS 写法，适合调色、主题色扩展和前端样式开发。
实时转换
拖动 H、S、L 三个通道后即可立即看到 RGB 结果，非常适合从设计稿颜色标注切换到代码实现。
H 表示色相，S 表示饱和度，L 表示明度。输入变化后会立即同步生成 RGB、HEX 和 CSS 写法。
- HSL
- 9, 100%, 64%
- RGB
- 255, 99, 71
- HEX
- #FF6347
- CSS 文字色
- color: hsl(9, 100%, 64%);
- CSS 背景色
- background-color: rgb(255, 99, 71);
转换规则
HSL 更适合调色，RGB 更适合直接落到浏览器、Canvas 和样式代码里。
- `H` 控制色相，`S` 控制饱和度，`L` 控制明暗层级。
- 转换成 RGB 后，可以直接用于 `rgb()`、阴影、透明度和图像处理场景。
- 如果需要继续用于标准色值管理，也可以同步拿到 HEX 结果。
适合哪些场景
HSL 转 RGB 最常见于设计协作、动态主题和前端样式落地。
- 把设计工具标注的 HSL 颜色转换成前端可直接使用的 RGB。
- 基于同一色相微调亮度后，快速查看 hover、active 状态色的 RGB 结果。
- 配合渐变、阴影或透明度效果时，RGB 往往比单纯 HEX 更方便继续处理。
常见 HSL 转 RGB 参考
下面这组预设可以帮助你快速核对 HSL、RGB 和 HEX 之间的对应关系。
名称HSLRGBHEX
番茄红9, 100%, 64%255, 99, 71#FF6347
海盐蓝208, 79%, 51%31, 137, 229#1F89E5
森林绿123, 46%, 34%47, 127, 51#2F7F33
墨夜蓝215, 28%, 17%31, 41, 55#1F2937
使用建议
如果你是在做一套可扩展色板，建议先在 HSL 空间调节，再用 RGB 或 HEX 落地到代码。
- 做状态色扩展时，通常先固定 `H`，再微调 `S` 和 `L`。
- 要用于浏览器渲染和图像处理时，优先确认 RGB 数值是否符合预期。
- 最终上线前，建议再配合对比度检测工具检查正文与背景的可读性。
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。