顏色轉換器（HEX、RGB、HSL） 常見問題
如何將 HEX 轉換為 RGB？
要將 hex 色彩代碼轉換為 RGB，將六位數 hex 字串 #RRGGBB 分割為三組，然後將每組從十六進制（base-16）轉換為十進制（base-10）。
範例： #FF5733
FF= 255（紅色）57= 87（綠色）33= 51（藍色）- 結果：
rgb(255, 87, 51)
對於簡寫 hex（#F53），先將每個數字展開為一組：#F53 變成 #FF5533。數字加倍：F 展開為 FF，5 展開為 55，3 展開為 33。
八位數 hex（#RRGGBBAA）的運作方式相同，但額外多了一組 Alpha 通道。#FF573380 為 Alpha 通道添加了 80（128，約 50% 不透明度）。
如需即時轉換，請使用我們的色彩轉換器。它支援所有格式，包括含與不含 Alpha 的短和長 hex。
RGB 和 RGBA 有什麼區別？
RGB 使用紅色、綠色和藍色通道定義顏色。RGBA 是 RGB 加上一個額外的 Alpha 通道，用於控制不透明度。Alpha 值範圍從 0.0（完全透明）到 1.0（完全不透明）。
rgb(255, 0, 0) /* 完全不透明的紅色 */
rgba(255, 0, 0, 0.5) /* 50% 透明度的紅色 */
在現代 CSS（CSS Color Level 4）中，不再需要 rgba() 別名。rgb() 函數現在接受可選的 Alpha 通道：
rgb(255 0 0 / 0.5) /* 現代語法，50% 透明度的紅色 */
所有現代瀏覽器都支援此語法。舊版 rgba() 函數在所有地方都能正常運作且不會被移除，但對於新程式碼，建議使用帶斜線語法的 rgb()。
如何將 RGB 轉換為 HSL？
將 RGB 轉換為 HSL 包含三個步驟：
- 正規化 RGB 值到 0-1 範圍（除以 255）
- 找出三個正規化值的最小值和最大值 — 最小值和最大值的平均值即為亮度（L）
- 根據哪個通道是最大值以及最大值與最小值的差值，計算色相和飽和度
計算公式根據哪個色彩通道佔主導而有所不同：
- 如果紅色是最大值：色相 = (綠色 - 藍色) / (最大值 - 最小值)
- 如果綠色是最大值：色相 = 2 + (藍色 - 紅色) / (最大值 - 最小值)
- 如果藍色是最大值：色相 = 4 + (紅色 - 綠色) / (最大值 - 最小值)
- 飽和度取決於亮度：如果 L > 0.5，飽和度 = (最大值 - 最小值) / (2 - 最大值 - 最小值)，否則飽和度 = (最大值 - 最小值) / (最大值 + 最小值)
這個計算過程較為複雜且容易出錯，因此建議使用色彩轉換器工具來獲得即時結果。
為什麼我的顏色在不同螢幕上看起來不一樣？
顏色在不同螢幕上看起來不同有以下幾個原因：
螢幕校準 — 大多數消費級螢幕未經過色彩校準。出廠預設值在亮度、對比度和色溫方面差異很大。
色域差異 — 不同螢幕支援不同的色彩範圍。sRGB 是網頁標準，但許多現代手機和筆記型電腦支援 DCI-P3（寬 25%）。超出 sRGB 色域的顏色在廣色域顯示器上看起來正確，但在標準顯示器上會被裁剪或偏移。
顯示技術 — OLED 螢幕產生比 LCD 螢幕更深的黑色和更飽和的色彩。IPS 面板比 TN 面板具有更好的色彩準確度。
觀看角度 — 從側面觀看時顏色會偏移，尤其是在低階顯示器上。
亮度和環境光 — 在黑暗房間中 50% 亮度的螢幕，與在直射陽光下 100% 亮度的同一螢幕看起來不同。
減少差異的方法： 在 sRGB 色彩空間中工作、使用硬體校色器校準螢幕、並在發布前在多個裝置上測試您的設計。
HSL 色彩模型適合用來做什麼？
HSL（色相、飽和度、亮度）非常適合程式化色彩操作。其主要優勢在於一個通道攜帶「色彩」資訊（色相），而另外兩個通道則獨立於色相值控制外觀。
HSL 擅長的事情：
- 調色盤 — 保持相同色相，調整亮度和飽和度來創建完整的色彩比例
- 懸停和啟用狀態 — 按固定百分比更改亮度：
hsl(220, 80%, 50%)->hsl(220, 80%, 60%) - 深色模式 — 降低所有顏色的亮度：將每個顏色的亮度減去 30%
- 主題 — 交換色相值，從相同的飽和度/亮度結構生成全新的色彩方案
- 禁用狀態 — 降低飽和度使元素去飽和：
hsl(220, 80%, 50%)->hsl(220, 30%, 70%)
HSL 不擅長的事情：
HSL 不是感知均勻的。兩個具有相同亮度值的顏色（例如 hsl(60, 100%, 50%) — 亮黃色和 hsl(240, 100%, 50%) — 純藍色）在感知亮度上有很大差異。若要進行感知均勻的色彩操作，請改用 OKLCH。
hex 色彩中的 # 代表什麼意思？
# 前綴（井號或井字符號）告訴 CSS 解析器後續字符代表一個十六進制色彩值。這是 CSS 和 HTML 中 hex 色彩代碼的標準表示法。
完整格式為 #RRGGBB 或 #RRGGBBAA：
| 組成部分 | 含義 | 範例 (#FF5733) |
|-----------|---------|---------------------|
| # | Hex 前綴 | 必需的指示符 |
| RR | 紅色通道 | FF (255) |
| GG | 綠色通道 | 57 (87) |
| BB | 藍色通道 | 33 (51) |
在 HTML 中，# 也用於錨點連結（<a href="#section">），但在 CSS 上下文或 style 屬性中，它始終表示 hex 色彩。HTML 還支援舊版的「命名顏色」（140 個預定義名稱，如 red、blue、rebeccapurple），這些顏色不需要 #。
什麼是色域，為什麼它很重要？
色域是指裝置可以顯示或色彩空間可以表示的色彩範圍。可以將其想像為螢幕或檔案格式可用的色彩「詞彙量」。
常見色域，從最小到最寬：
| 色彩空間 | 相對大小 | 使用場景 | |-------------|--------------|------------| | sRGB | 基準線 | 網頁標準、大多數顯示器、所有瀏覽器 | | Adobe RGB | 約 50% 更寬 | 專業攝影、印刷 | | DCI-P3 | 約 25% 更寬 | 現代手機、Mac、許多筆記型電腦 | | Rec. 2020 | 約 75% 更寬 | HDR 電視、高階顯示器 |
為什麼重要： 超出螢幕色域的顏色無法準確顯示。裝置會將顏色裁剪到最接近的色域內值，或進行近似處理。這就是為什麼設計檔中鮮豔的深紅色在標準筆記型電腦螢幕上可能顯得暗淡或渾濁。
網頁設計方面： 始終在 sRGB 中設計，或確認您的顏色是 sRGB 安全的。OKLCH 和 display-p3 色彩空間讓您可以針對更寬的色域，但您應該為標準螢幕提供 sRGB 回退方案。
標準 hex 和帶 Alpha 的 hex 有什麼區別？
標準 hex（#FF5733）使用六位數字且沒有 Alpha 通道 — 顏色始終完全不透明。帶 Alpha 的 hex（#FF573380）使用八位數字，在末尾添加兩個額外的 hex 數字用於 Alpha（不透明度）通道。
Hex 中的 Alpha 值：
| Hex 組 | 十進制 | 不透明度 |
|----------|---------|---------|
| 00 | 0 | 完全透明 |
| 80 | 128 | 約 50% 不透明度 |
| FF | 255 | 完全不透明 |
範例：
#FF5733 — 純紅橙色，無透明度
#FF5733FF — 相同顏色，完全不透明（多餘的 FF）
#FF573380 — 相同顏色，50% 透明
#FF573300 — 相同顏色，完全不可見
還有四位數簡寫 hex 帶 Alpha：#F538 展開為 #FF553388（50% 不透明度）。
瀏覽器支援： 八位數 hex 在所有現代瀏覽器中都受支援。若要支援舊版瀏覽器（Internet Explorer），請改用 rgba()。
如何為我的網站選擇無障礙友好的顏色？
按照以下逐步流程建立無障礙的色彩系統：
1. 從主要品牌顏色開始。 選擇代表您品牌的色相，然後使用 HSL 或 OKLCH 創建從非常淺（背景）到非常深（文字）的完整比例。
2. 將文字設定為接近黑色。 白色背景上的正文文字應為 #1A1A1A 到 #333333。切勿在純白色上使用純黑色（#000000）— 這會對某些讀者造成眼睛疲勞。白色上的深灰色提供更好的可讀性。
3. 檢查每個前景-背景組合。 每個文字和背景的組合都必須符合 WCAG 標準：
- 一般文字：最低 4.5:1（WCAG AA）
- 大字：最低 3:1（WCAG AA）
- 正文文字目標為 7:1（WCAG AAA）
4. 切勿將顏色作為唯一的區分方式。 連結必須有底線（不僅僅是不同顏色）。錯誤狀態必須包含圖示或文字。圖表必須使用圖案或標籤。
5. 使用色盲模擬器進行測試。 綠色盲（紅綠色盲）是最常見的類型。確保您的設計在無法感知顏色的情況下仍能正常使用。
6. 在灰階中驗證。 如果您的設計在轉換為灰階時失去意義，則表示您過度依賴顏色來傳達資訊。
使用我們的色彩轉換器即時檢查任意兩種顏色之間的對比度。