色彩格式詳解：HEX、RGB 與 HSL
快速解答
HEX (#RRGGBB) 和 RGB（每個通道 0—55）直接編碼紅色、綠色和藍色強度。 HSL（色調 0—60°，飽和度/亮度 0—00%）以符合人類感知的方式編碼顏色，從而更容易建立調色板和色調。使用我們的顏色轉換器在這三種顏色之間進行轉換。
介紹
網頁顏色以三種主要格式指定：HEX（以 16 為基數的紅、綠、藍）、RGB（每通道十進位 0—55）和 HSL（色調、飽和度、亮度）。所有三個都描述相同的 sRGB 色彩空間，但暴露不同的軸：HEX 和 RGB 是面向硬體的（直接通道值），而 HSL 是面向人的（直觀的色調、飽和度和亮度）。現代 CSS 也透過 HEX8、rgba() 和 hsla() 支持 alpha。
步步
-
了解 HEX 表示法
HEX 將每個通道寫入兩位數的以 16 為基數的數字：#RRGGBB。 00 為關閉，FF (255) 為全強度。 #FF0000 為純紅色，#00FF00 為純綠色，#0000FF 為純藍色，#FFFFFF 為白色，#000000 為黑色。 4 位數簡寫 #RGB 擴展為 #RRGGBB，#RRGGBBAA 加入 alpha（例如，#FF573380 為 50% alpha）。
-
了解 RGB 表示法
RGB 每個通道使用十進位 0—55：rgb(255, 87, 51) 與 #FF5733 相同。 rgba() 函數加 0 — alpha：rgba(255, 87, 51, 0.5) 是 50% 不透明。 RGB 相當於 HEX ——它只是十進位而不是 16 進位。
-
了解 HSL 表示法
HSL 使用色調（色輪上的 0—60°：0=紅色、120=綠色、240=藍色）、飽和度（0% = 灰色、100% = 全彩）和亮度（0% = 黑色、50% = 正常、100% = 白色）。 hsl(11, 100%, 60%) 是鮮豔的橘色。 HSL 使得建立相同色調的色調（提高亮度）和陰影（降低亮度）變得微不足道。
-
格式之間轉換
HEX→RGB：將每對解析為基數 16。 RGB→HEX：將每個通道轉換為 2 位元基數 16。 RGB→HSL：計算歸一化通道的最大值/最小值，亮度 = (max+min)/2，飽和度取決於亮度，色調是主通道的角度。使用我們的顏色轉換器可以立即完成這一切。
-
為任務選擇正確的格式
使用 HEX 來實現設計令牌和資產的緊湊性。當您需要對通道進行內插或設定動畫時，請使用 RGB/rgba()。產生調色盤、陰影或主題變體時使用 HSL/HSLA — 將亮度調整 10% 比推理 RGB 增量要容易得多。
範例
三種格式的純紅色
輸入: #FF0000
輸出: rgb(255, 0, 0) = hsl(0, 100%, 50%)
鮮豔的橘色
輸入: #FF5733
輸出: rgb(255, 87, 51) = hsl(11, 100%, 60%)
白色和黑色
輸入: #FFFFFF 和 #000000
輸出: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
從一種 HSL 色調建立 5 步色調
輸入: hsl(210, 70%, 50%) — 改變亮度 30/40/50/60/70%
輸出: #1A4D7F、#2E6BA3、#4389C7、#6FA8DC、#9EC5E8 — 一致的藍色調色盤
常見問題
- 混合 3 位數和 6 位數 HEX：#F00 和 #FF0000 是相同的顏色，但某些解析器只接受一種形式。將代碼標準化為 6 位數字以避免意外。
- 忘記 HSL 亮度 50% 不是「一半亮度」：在 100% 飽和度時，50% 亮度是純色調；高於 50%，它會偏向白色，低於 50%，它會偏向黑色。 「50% 灰色」是 hsl(0, 0%, 50%)。
- Alpha 通道混亂：現代瀏覽器支援 #RRGGBBAA (HEX8)，但舊瀏覽器不支援； rgba()/hsla() 有更廣泛的支援。始終測試目標環境。
- 色彩空間不符：HEX、RGB 和 HSL 皆描述 sRGB。如果您在 P3 或 Lab/OKLCH（現代顯示器使用）之間進行轉換，簡單的通道副本會產生錯誤的顏色 - 請使用正確的顏色庫。
提示
- 設計調色板時使用 HSL：選擇一種色調，然後改變亮度（例如 30/50/70%）和飽和度（例如 60/80/100%）以產生連貫的色調和色調。
- 為了便於訪問，請檢查背景的對比度 - WCAG AA 要求普通文本為 4.5:1，AAA 為 7:1。使用我們的顏色轉換器來計算相對亮度和對比度。
- 偏好現代的 CSS color-mix() 或 oklch() 以獲得感知均勻的插值 —RGB 插值在混合互補色時可以穿過渾濁的灰色。
- 產生漸變時，首先將端點轉換為相同的格式 - 在單一漸變宣告中混合 HEX 和 HSL 可能會產生意外的中點。