HEX 转 HSL 颜色转换器

Updated: 2026-07-12
广告位 - 顶部 (728x90)

HEX → HSL 颜色转换

输入十六进制颜色码或使用颜色选择器取色,自动转换为HSL格式。

HSL hsl(11, 100%, 60%)
色相 H 11°
饱和度 S 100%
亮度 L 60%
RGB rgb(255, 87, 51)
广告位 - 底部 (728x90)

📖 颜色格式说明

HEX:以#开头,后跟6位十六进制数字(#RRGGBB),每两位表示红绿蓝分量。如#FF5733表示红=255、绿=87、蓝=51。

HSL:色相(0-360°)、饱和度(0-100%)、亮度(0-100%)。更直观的颜色描述方式,适合设计师使用。

❓ 常见问题

HEX颜色码的格式是什么?

HEX颜色码以#开头,后跟6位十六进制数字,如#FF5733。每两位分别代表红(R)、绿(G)、蓝(B)的值,范围00-FF(即0-255)。也支持3位简写格式如#F53,会自动扩展为#FF5533。本工具自动处理大小写和格式标准化。

HSL适合什么场景使用?

HSL更适合设计调色场景。通过色相(Hue)可以快速找到同类色和对比色,通过饱和度(Saturation)和亮度(Lightness)可以方便地调整颜色的鲜艳度和明暗。CSS中hsl()函数广泛用于动态主题和颜色动画。

为什么需要HEX转HSL?

当你拿到一个HEX颜色码(如设计稿中的#FF5733),想在CSS中使用hsl()实现动态调色、创建颜色变体(如hover状态的亮/暗版本)、或做颜色渐变时,就需要将HEX转换为HSL。本工具让你一键完成转换。

支持哪些输入格式?

支持标准6位HEX格式(#FF5733),3位简写格式(#F53自动扩展为#FF5533),以及带或不带#号前缀的输入。还可以使用颜色选择器直接取色,非常方便。