HEX 转 HSL

HSL 是你可以拿来推理的那一个

#b8380f 在你把它画出来之前什么也没告诉你。hsl(14.6 84.9% 39%) 则告诉你这是一个橘红色、饱和度 很高、偏暗——而且更有用的是，它告诉你该改哪里。

• 色相（Hue） 0–360，绕着色轮走：0 是红、120 是绿、240 是蓝。
• 饱和度（Saturation） 0–100%：从灰到全饱和。
• 亮度（Lightness） 0–100%：从黑，经过 50% 的纯色相，到白。

想要同一个颜色比较亮的版本？把亮度调高就好。用十六进位的话，你得先换算、改三个数字、再换算回去。

从一个颜色做出一整套配色

这才是 HSL 真正擅长的事。

• 浅色或深色：色相和饱和度不动，只改亮度。
• 互补色：色相加 180。
• 邻近色：±30。
• 降低鲜艳度：把饱和度调低，其他不动。

每一种都只是改一个数字，这就是为什么设计系统即使最后以十六进位交付，内部通常还是用 HSL 定义的。

亮度不等于视觉明亮度

50% 的亮度是纯色相——不是「白色的一半亮」。纯黄和纯蓝在 HSL 里都是 50% 亮度，但黄色看起来 明亮得多。

HSL 只是 RGB 的一种方便的变换，不是感知模型。如果你要的是「看起来一样亮」，那要用 LAB 或 OKLCH，不是 HSL。

没有任何上传

在这个页面里转换。