Hex、RGB、HSL:給其他人的快速指南

設計師給你一個顏色:#3B82F6。你需要將它轉換成 RGB 給某個函式庫用。或者你想要一個稍微深一點的版本。或者你想弄清楚為什麼它在你的螢幕上看起來不一樣。

色彩系統並不複雜,但沒人好好解釋它們。這是你真正需要知道的。

HEX:網頁標準

#3B82F6 的分解如下:

• 3B = 紅色 (十進位 59)
• 82 = 綠色 (十進位 130)
• F6 = 藍色 (十進位 246)

每一對是從 00 到 FF 的十六進位數字(十進位 0-255)。數字越大 = 越亮。#000000 是黑色。#FFFFFF 是白色。

存在簡寫:#FFF = #FFFFFF,#09C = #0099CC。三個字符透過將每個字符加倍來擴展為六個。

RGB:顯而易見的那個

rgb(59, 130, 246) 是同一種顏色,只是寫法不同。紅色 59,綠色 130,藍色 246。

有些格式需要百分比:rgb(23%, 51%, 96%)。同樣的東西,不同的表示法。

RGBA 增加了透明度:rgba(59, 130, 246, 0.5) 是那個藍色在 50% 不透明度。

HSL:真正有用的那個

hsl(217, 91%, 60%) 以不同的方式描述顏色:

• 色相 (217): 色輪上的位置。0=紅色,120=綠色,240=藍色。
• 飽和度 (91%): 強度。0%=灰色,100%=鮮豔。
• 亮度 (60%): 明度。0%=黑色,50%=純色,100%=白色。

為什麼 HSL 很重要:調整顏色很直觀。

想要更深的版本?降低亮度。 想要柔和的版本?降低飽和度。 想要完全不同但「感覺」相同的顏色?改變色相,保持飽和度和亮度。

在 HEX 或 RGB 中,這些調整需要數學或猜測。在 HSL 中,它們只是單一數字的變化。

在它們之間轉換

這些數字以不同的方式表示相同的顏色。#3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%)。

當你需要特定格式時使用轉換器。大多數設計工具顯示所有三種。CSS 接受所有三種。

常見情況

「讓這個顏色更深」 轉換為 HSL,將亮度降低 10-20%,再轉換回去。

「我需要 hover 狀態的變化」 轉換為 HSL。按鈕:60% 亮度。Hover:55%。Active:50%。

「這個顏色看起來褪色了」 飽和度可能太低。嘗試在 HSL 中增加它。

「完全匹配品牌色」 從品牌指南中取得 hex 代碼。不要憑眼睛判斷。

「顏色在不同螢幕上看起來不一樣」 歡迎來到色彩校準地獄。使用相同的 hex 代碼;接受螢幕會有差異。

無障礙注意事項

色彩對比很重要。淺色背景上的淺色文字 = 許多人無法閱讀。

有一個比例:正常文字 4.5:1,大文字 3:1。有工具可以檢查這個。如果有疑問,更多對比更好。

在那個 #3B82F6 藍色上的白色文字?對比度約為 4.6:1——剛好及格。更深的藍色對於正文會更安全。

---

你不需要成為設計師。你只需要在格式之間轉換,並知道 HSL 使調整更容易。其他都是細節。