RGB HSL顏色互轉

先用 HSL 調色，再查看 RGB 與 HEX

這個頁面適合已知 HSL 色值、想快速看顏色預覽並取得對應 RGB 或 HEX 的情境。HSL 的 H 是色相角度，S 是飽和度百分比，L 是亮度百分比；RGB 則以紅、綠、藍三個通道表示顏色，頁面上的 RGB 通道範圍為 0 至 255。HEX 是同一組 RGB 通道的十六進位寫法，例如 #FF0000 對應紅色。這些是不同的色彩表示方式，不是 HSL、RGB 與 HEX 三種不同顏色。

使用時請留意方向：調整 HSL 滑桿後產生的 RGB/HEX 可用來預覽或取用；但從 RGB 或 HEX 反算顯示的 HSL 飽和度，對部分顏色與標準 HSL 不一致。因此不應把該反算數值當成可精確往返的 CSS HSL 值。標準 CSS HSL 的定義可參考 W3C CSS Color Module Level 4。

H、S、L 各自代表什麼

色相 H 以色環角度表示，0° 與 360° 在色環同一位置；例如 120° 是綠色方向。飽和度 S 為 0% 時呈灰階，數值提高時顏色更鮮明。亮度 L 為 0% 時是黑色、100% 時是白色，50% 是常見的中間亮度。三個值合在一起才構成一組 HSL 色值。

不要把 HSL 和 HSB/HSV 混為一談：兩者都使用 H 與 S，但 HSL 的 L 是亮度（lightness）；HSB/HSV 使用 B（brightness）或 V（value，明度），定義並不相同。本頁這個工具頁籤以 HSL 為目標色彩模型。

用 HSL 數值產生色彩預覽

1. 找到 HSL 調整區

   在 H、S、L 滑桿設定色相角度、飽和度百分比及亮度百分比。也可先點選頁面提供的常用色，再調整滑桿作細部變化。

2. 檢視顏色與 RGB/HEX

   滑動後，預覽色塊、RGB 通道與 HEX 會同步更新。例：設定 H 120°、S 100%、L 25%，預覽會是深綠色，RGB 約為 0、128、0，HEX 為 #008000。整數通道與色碼可能因取整呈現。

3. 複製要使用的格式

   複製色塊旁的 HEX，或使用 RGB 區域的複製功能取得通道值；若要保留多項結果，可複製完整結果文字。貼入程式碼或設計文件前，請確認目標欄位期待的是 HEX、RGB，還是完整 CSS 函式格式。

以 HEX 或 RGB 作為起點

已有 HEX 色碼時，在 HEX 欄輸入六位色碼，例如 #3366CC；頁面接受後會更新預覽及 RGB 通道。也能移動 R、G、B 滑桿來改色。從這些輸入計算出的 HSL 區可供快速參考，不過其飽和度有下方說明的已知差異；若你的工作需要標準 HSL，請用標準工具或公式另行核算。

使用色碼時容易遇到的問題

精度與適用範圍

RGB/HEX → HSL 的飽和度有已知限制。目前這個方向顯示的飽和度，對部分色值不符合標準 HSL 的飽和度口徑；反向從 HSL 產生 RGB/HEX 與預覽仍可供試色，但不能依此推定 RGB/HEX 輸入與顯示 HSL 可精確往返。標準 CSS HSL 的含義與表示方式以 W3C 規格為準。

• 顯示的 RGB 通道與 HSL 分量採整數呈現，換算與取整可能帶來小幅差異；請以 HEX/RGB 作為比對色值的依據。
• 若輸入 HEX 尚未被辨識，畫面可能仍保留前一個有效顏色；請確認預覽及同步數值已變更，再複製結果。
• 本頁提供基本 sRGB 色值轉換與預覽，不代表螢幕校色、印刷色彩管理或無障礙對比檢查結果。