在 HEX、RGB 和 HSL 之間轉換顏色
發布於 · 更新於 閱讀約 1 分鐘
HEX、RGB 和 HSL 用三種方式描述同一種顏色。工具同時顯示這三種，並接受常見的寫法；HSL 被取整到整數，這就解釋了轉回 HEX 時會出現相差一級的情況。
同一種顏色的三種寫法
探索色彩 預設顯示全部三種形式，並預覽顏色。以綠色 #2F4A3F 為例：
| 形式 | 結果 |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
面板上的 HEX、RGB 和 HSL 三個按鈕可以讓結果只顯示一種形式，方便原樣複製。
接受的寫法
| 寫法 | 示例 | HEX 結果 |
|---|---|---|
| 短 HEX | #fff | #ffffff |
| 帶透明度的 HEX | #2F4A3F80 | #2f4a3f80 |
| 用逗號的 RGB | rgb(47, 74, 63) | #2f4a3f |
| 用空格的 RGB | rgb(47 74 63) | #2f4a3f |
| 用百分比的 RGB | rgb(100%, 0%, 0%) | #ff0000 |
| 用空格的 HSL | hsl(156 22% 24%) | #304b40 |
像“rouge”這樣的顏色名稱，以及像 rgb(300, 0, 0) 這樣超出 0 到 255 範圍的通道值，會被拒絕，並顯示一條列出可接受寫法的提示。
透明度
透明度在 HEX 中用八位數字書寫，或者寫在帶空格的斜槓後面。顏色 rgb(47 74 63 / 50%) 的 HEX 是 #2f4a3f80，RGB 是 rgba(47, 74, 63, 0.5)。反過來，#2F4A3F80 的不透明度是 0.502，因為十六進制的 80 等於 255 中的 128。
為什麼往返轉換會相差一級
HSL 顯示為整數：色相用度數，飽和度和明度用百分比。因此，從 HSL 轉回 HEX 會落在相鄰的顏色上，而不是起點的顏色。
| 起點 | 顯示的 HSL | 轉回 HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
每個通道的差距只有一級，肉眼看不出來。對於設計變量或品牌色，請把原始 HEX 當作基準，不要再經過 HSL。
灰色
灰色的飽和度為零，色相不起作用：#808080 得到 rgb(128, 128, 128) 和 hsl(0, 0%, 50%)。
工具不衡量什麼
格式轉換並不說明可讀性。工具不會計算文字與背景之間的對比度：發布之前請另行檢查。對比度決定可讀性的情形，見 產生一次就能掃出的QR Code。
檢查轉換
- 把顏色貼上到輸入框中：預覽必須與您預期的一致。
- 複製您的系統要求的形式。
- 想保留準確的顏色，請儲存 HEX 或 RGB，而不是 HSL。