颜色转换
HEX 转 HSL 在线转换器
输入 HEX 颜色值即可实时转换为 HSL、RGB 和 CSS 写法，适合拆解品牌色、构建同色系层级和做主题色调整。
实时转换
支持 3 位和 6 位十六进制颜色值，方便你从代码里的 HEX 反推 HSL，再继续做明度和饱和度微调。
支持 3 位和 6 位十六进制颜色，系统会自动解析为标准 HSL 表达形式。
- HEX
- #FF6347
- HSL
- 9, 100%, 64%
- RGB
- 255, 99, 71
- CSS 文字色
- color: #FF6347;
- CSS 背景色
- background-color: hsl(9, 100%, 64%);
为什么先转成 HSL
HEX 适合存储和引用，HSL 更适合理解颜色关系和做规则化调色。
- 拿到品牌主色后，转成 HSL 更容易继续扩展 hover、disabled 和浅色背景版本。
- 当你需要统一调亮、调暗或降低饱和度时，HSL 会比直接修改 HEX 更直观。
- 做设计系统时，HSL 很适合建立同色相、多层级的色板规则。
适合哪些场景
HEX 转 HSL 常见于品牌色拆解、主题重构和颜色规则整理。
- 把现有项目中的 HEX 主色转换成 HSL，快速做主题升级和浅深色层级扩展。
- 核对设计稿和代码色值时，判断两种颜色是否只是明度或饱和度差异。
- 整理一组历史颜色资产，提炼出更统一的配色规律。
常见 HEX 转 HSL 参考
下面这组颜色可以帮助你快速对照常见 HEX 色值对应的 HSL 表达。
颜色名HEXHSL备注
珊瑚橘#FF7F5016, 100%, 66%活跃、醒目，适合按钮强调色。
番茄红#FF63479, 100%, 64%常见于营销页 CTA 和状态提示。
海盐蓝#1E88E5208, 79%, 51%适合信息类和 SaaS 风格页面。
森林绿#2E7D32123, 46%, 34%常用于成功反馈与自然主题。
芥末黄#D4A01743, 80%, 46%适合点缀和强调，不适合作大面积正文背景。
葡萄灰#6D6875263, 6%, 43%适合中性色辅助块和信息面板。
象牙白#F7F3EA42, 45%, 94%适合作为大面积背景，降低刺眼感。
墨夜蓝#1F2937215, 28%, 17%适合作为正文、标题和深色背景。
使用建议
如果你要做整站配色重构，建议先把主色全部转成 HSL，再统一定义饱和度和明度规则。
- 先确认主色的 `H`，再按组件层级逐步调整 `S` 和 `L`。
- 如果颜色要用于正文、按钮和背景，最好同时配合对比度检测一起验证。
- 最终输出代码时，可以根据使用场景决定保留 HSL 还是回写为 HEX。
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。