即時 RGB 轉 HSL 工具：讓色彩從螢幕數據變成人性語言
本頁工具接受一組 RGB 色彩——三個 0 到 255 的整數，分別代表紅、綠、藍三顆螢幕發光元件的強度——並立即顯示它在 HSL 模型下的對應數值：色相以 0–360 度表示，飽和度與明度則以百分比呈現。輸出欄同時提供 HEX、HSV、CMYK（螢幕估算值）以及 LAB 格式，方便你直接複製所需的值。編輯任何一個欄位，所有其他欄位會立刻重新計算；所有轉換都在你的瀏覽器中完成，資料不會上傳到任何伺服器。
RGB 如何定義螢幕上的顏色
RGB 是加法混色模型：沒有光（0,0,0）是黑色，三色全開（255,255,255）是白色。中間數值混合出各種色光。這個模型直接對應陰極射線管與 LCD/LED 顯示器的物理驅動方式，因此數位影像原始格式幾乎都是 RGB。常見的工作空間是 sRGB——國際電工委員會（IEC）標準化的色彩空間，也是網頁與消費性電子產品的預設空間。本工具採用 sRGB 作為轉換基準，所有輸出的 HEX、HSL、HSV 等數值都落在 sRGB 色域內。
實際使用時，RGB 的直覺障礙在於：調整一個通道的數值往往會同時改變感知上的色相與明暗。例如把 (200,50,50) 的紅色稍微增加綠色通道變成 (200,80,50)，你可能覺得它變成了帶橘味的紅，但無法精確控制這種轉變。HSL 正是為解決這個問題而設計。
HSL 如何模擬人類對色彩的理解
HSL 將色彩拆解為三個與人類思考方式更貼近的維度：
- 色相（Hue）：在 0–360° 的色環上定位，0° 是紅色、120° 是綠色、240° 是藍色，回到 360° 又與 0° 相同。
- 飽和度（Saturation）：百分比，0% 是灰色，100% 是該色相最純的顏色。
- 明度（Lightness）：百分比，0% 是黑色，100% 是白色，50% 是該色相「純色」的標準明度（例如純紅的明度約 50%）。
這個模型由 Alvy Ray Smith 於 1978 年提出，目的是提供一個比 RGB 更直覺的色彩調整方式。在 CSS 中，hsl() 函數已經是現代網頁開發的標準工具。輸入格式範例：hsl(243, 75%, 59%) 對應 RGB (79,70,229)。
為什麼 HSL 是調色板與主題設計的首選
主要的理由是明度獨立於色相。當你建立色彩系統時，通常需要同一色相的不同亮度版本：淺色背景、深色文字、按鈕懸浮效果。在 RGB 裡，要維持色相不變而只調暗或調亮，幾乎不可能；但在 HSL 裡，只要固定色相數值，增減明度百分比即可。飽和度也可以單獨提高或降低，做出更生動或更沉穩的變化。
例如，品牌主色是藍色 hsl(220, 80%, 50%)。要一個淺藍色背景，你只需要把明度升到 90%，飽和度降到 20%，色相維持 220°，就能保證色系一致。對於深色主題，則降低明度、提高飽和度。這種操作在 JavaScript 中只要幾行程式就能動態產生一整套色彩變體。
從 RGB 轉換到 HSL 的數學核心
轉換過程分三步：
- 歸一化：將 R、G、B 各除以 255，得到 0 到 1 的浮點數。
- 找出最大與最小值：設
max = max(r,g,b)，min = min(r,g,b)，計算亮度差delta = max - min。 - 計算各分量：
- 明度：
L = (max + min) / 2 - 飽和度：若
delta為 0，飽和度為 0；否則S = delta / (1 - |2L - 1|) - 色相：視哪個通道是最大值，套用對應的分段公式（使用 atan2 或條件判斷），結果標準化到 0–360°。
- 明度：
這個轉換是可逆的：在工具中直接輸入一組有效的 HSL 值（例如 243, 75%, 59%），它會即時算出對應的 RGB。注意 HSL 輸入格式必須是色相 0–360 加上兩個百分比，如 243, 75%, 59%。若輸入格式不符，會顯示提示：「輸入 HSL 為色相 0–360 搭配兩個百分比，例如 243, 75%, 59%。」
邊界狀況與誤差處理
- RGB 輸入：必須是三個介於 0 到 255 的整數，以逗號或空格分隔。無效輸入會顯示：「輸入 RGB 為三個 0–255 的數字，例如 79, 70, 229。」
- CMYK 輸出：是一個基於 sRGB 的估算值。它透過標準演算法（例如把 RGB 轉成 CMY，再計算黑色生成量）得出，但不同印刷廠的油墨與紙張特性會改變結果，因此不應直接用於專業印刷而未經校樣驗證。
- LAB 與 CMYK 輸入：如果你從其他軟體貼入一組 LAB 或 CMYK 數值，那些座標可能會落在 sRGB 色域之外（例如極高飽和的霓虹色）。此時工具會將它調整到最近的、螢幕可顯示的顏色。反過來把這個調整後的顏色再轉回 LAB，就會與原始數值有小幅偏差。這是顯示技術的硬體限制，而非工具的錯誤。
HSL 的固有局限與替代方案
儘管 HSL 對調色板設計很方便，它並不是感知均勻的模型。兩個不同色相在相同明度與飽和度下，人眼感受到的亮度可能不同。例如，黃色（色相 60°）在明度 50% 時看起來比藍色（色相 240°）亮得多。這源自於人類視錐細胞對不同波長光的敏感度差異。如果需要感知上均勻的梯度（像是熱力圖或資料視覺化），通常會採用 CIELAB 或 CIELUV（此工具輸出的 LAB 即為 CIELAB）。LAB 把亮度（L*）與色度（a*, b*）獨立，更接近人眼判斷「這個顏色比那個顏色亮多少」的能力。你可以在本頁直接輸入 LAB 值來觀察對應的 RGB，但要注意上述色域限制。
在網頁開發中實際運用 HSL
CSS 的 hsl() 與 hsla() 函式已經被所有現代瀏覽器支援超過十年。使用 HSL 撰寫樣式表的好處是：想全域調暗一個主題，只要透過 CSS 變數（custom properties）修改明度值，所有引用該變數的規則同時更新。動態色彩生成（例如根據後端返回的品牌色彩產生漸層或輔助按鈕）也更容易用 JavaScript 實現，只需處理三個數字而非三個原始強度。
另外，WCAG 無障礙對比度要求文字與背景之間的亮度差異足夠大。因為 HSL 的明度是獨立的，你可以固定色相與飽和度，只調整明度直到對比度通過 4.5:1（AA 標準）或 7:1（AAA 標準），而不改變色彩的主觀印象。這對保留品牌識別同時滿足法規要求非常實用。
常見問題
問：HSL 的色相 0° 和 360° 是一樣的顏色嗎？
是的。色相環是循環的，0° 與 360° 都對應紅色。工具在內部會將大於等於 360 的輸入換算回 0–359 範圍，但輸出時有時會顯示 360 方便理解。
問：我從設計軟體貼入 CMYK (0, 100, 100, 0) 卻得到接近紅色的 HSL，但我知道那是印刷純紅，為什麼看起來不太一樣？
因為螢幕只能顯示 sRGB 色域內的顏色。印刷純紅（例如在廣色域油墨下）可能比 sRGB 純紅更飽和或更暗，工具會強制裁切到最近的螢幕可顯示顏色。這個結果只能當做粗略參考，不能取代打樣。
問：我可以直接在這個工具上輸入 HSL 轉回 RGB 嗎？
可以。只要在 HSL 欄位（通常標示為 H, S, L）輸入符合格式的數值，例如 243, 75%, 59%，RGB 與其他欄位會自動更新。不支援只輸入兩個數值，必須三個齊全。
問：為什麼我的輸入完全正確卻顯示錯誤提示？
最常見的原因是數字之間使用了不支援的符號，例如全形逗號或半形句點。請確認使用半形逗號（,）或半形空格分隔。色相與百分比中間也應有空格，例如 243, 75%, 59% 而非 243,75%,59%。
問：LAB 的數值範圍是固定的嗎？
LAB 中的 L* 範圍是 0 到 100，但 a* 與 b* 並無絕對上限——它們可以到 ±128 以上（取決於色彩空間）。不過一旦對應到 sRGB，可顯示的 a*、b* 範圍會被限制。如果輸入的 a* 或 b* 太大，工具會將它調整到最近的可顯示色，並在轉換回 LAB 時觀察到偏差。
問：這個工具可以用於印刷前的色彩檢查嗎？
不適合。CMYK 輸出是基於通用轉換公式的螢幕估算，沒有考慮特定印刷機、紙張、油墨與 ICC 設定。專業印刷應使用專用色彩管理軟體，並以實體打樣為準。