PJCHENder 未整理筆記

[Design] HSL Color Code

2018-08-20

[Design] HSL Color Code

@(Web Development)[design]

HSL 的意義

色相(Hue)

色相/色調(Hue)決定一個顏色在色相環(color wheel)上的哪個位置。紅色在 0 度的位置,其餘會沿著色環排列。

hsl

飽和度(Saturation)

飽和度用來控制顏色是鮮豔(vivid)或是黯淡(dull)。

亮度(Lightness)

當亮度大於 50% 時表示要添加更多的白色;小於 50% 則表示要添加更多的黑色。

HSL 的使用

當你透過 HSL 來定義一個顏色時,可以先透過色相環(H)選擇一個顏色,將飽和度(S)調成 100%、亮度(L)調成 50%,如此將會拿到該顏色的純色,接著再從這裡去調整你想要的顏色會變得非常直覺。

HSL 和色彩調和互補色(Color Harmony)

互補色(Complementary Color)的使用就是直接使用當前 Hue 的值加上 180° 即可。另外 Hue 的值寫超過 360 是可以的,CSS 會自動幫你計算。

color

參考

Tags: color

掃描二維條碼,分享此文章