0

編碼結果

HSL 顏色

關於 HSL 顏色

HSL 顏色是使用色相、飽和度和明度來表示顏色的顏色模型。它不像 RGB 那樣直接指定紅、綠、藍光的強度，而是將色味、鮮豔程度和明亮程度分開，因此常用於顏色調整和 CSS 設計。

成分意義範例值
H: 色相以角度表示色味。紅色約為 0deg，綠色約為 120deg，藍色約為 240deg。90deg
S: 飽和度表示顏色的鮮豔程度。0% 為無彩色，100% 為最鮮豔的顏色。50%
L: 明度表示顏色的明亮程度。0% 為黑色，50% 為標準明度，100% 為白色。50%

例如，紅色等主要顏色可以表示如下。

顏色HSL 表示RGB 表示
紅色hsl(0deg 100% 50%)rgb(255 0 0)
綠色hsl(120deg 100% 25.1%)rgb(0 128 0)
亮綠色hsl(120deg 100% 50%)rgb(0 255 0)
藍色hsl(240deg 100% 50%)rgb(0 0 255)
白色hsl(0deg 0% 100%)rgb(255 255 255)
黑色hsl(0deg 0% 0%)rgb(0 0 0)

若要包含透明度，請加入 Alpha 值。例如，半透明紅色可以表示為 hsl(0deg 100% 50% / 0.5)。

輸入時，可以使用 hsl(0deg 100% 50%) 這種空格分隔表示，也可以使用 hsl(0deg, 100%, 50%) 這種傳統逗號分隔表示。

色相、飽和度、明度的處理

色相按角度處理，超過 360deg 的值或負值會標準化到 0deg 到 360deg 的範圍。例如，hsl(360deg 100% 50%) 會作為與 hsl(0deg 100% 50%) 相同的顏色處理，hsl(-120deg 100% 50%) 會作為與 hsl(240deg 100% 50%) 相同的顏色處理。

飽和度和明度按 0% 到 100% 的範圍處理。飽和度為 0% 時，無論色相如何，顏色都會變成灰色系的無彩色。明度為 0% 時為黑色，100% 時為白色。

HSL 和 RGB 的差異

RGB 直接指定紅、綠、藍成分，因此更接近螢幕顯示和影像資料。HSL 將色相、飽和度和明度分開，因此更容易進行「保持相同色相並變亮」或「只降低飽和度」等調整。

不過，HSL 並不是在人類知覺上完全均勻的色彩空間。若要更容易處理視覺明亮度或色差，可以使用 Lab、LCH、Oklab、Oklch 等色彩空間。