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。

沒有任何上傳

在這個頁面裡轉換。