共通設計理論教材 / Class LLL

HSL、Lab與色域

換座標不等於換出得來的顏色

用同一觀察儀讀取HSL與D50 Lab，區分表示方式、參考白及目標範圍。超出sRGB時不畫假原色；用明示的截斷反例觀察資訊如何失去，不能把它當標準色域映射。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 10 分鐘

開啟互動教材查看參考來源

閱讀目標

用座標與空間名稱交代一個顏色
分清HSL L與Lab L*的角色
指出D50／D65轉換時的參考白
以範圍與資訊合併反例判斷預覽限制

適用條件與學習範圍

HSL的L50與Lab的L*50是一樣的量嗎？能寫下的Lab數值，是否一定能由目前的sRGB畫面呈現？

先知道一組數字需要解讀條件；可隨時補讀光／墨頁與原色彩屬性，不要求先通關。

能分開HSL編碼座標與D50 Lab、指出參考白及目的色域條件，識別一個超出範圍及截斷合併的例子；不把L相等或數值可寫當感知／輸出保證。

只做明示sRGB與D50 Lab的有界數學教具，不量測人眼或裝置。人工0.65通道窗不是實際設備色域；逐通道截斷不是CSS規範色域映射、ICC渲染意圖或印刷模擬。

原理與判斷

數字相似不代表同一把尺。HSL把sRGB重新組織成色相、飽和與明度座標；Lab以另一組定義描述顏色，還要交代參考白。先看各自固定哪些量，再決定能比較什麼。範圍也與座標分開。寫出一組Lab值，不等於目標裝置能產生它。本站在超出sRGB時用斜紋標記請求色，讓你知道原色尚未被顯示；右窗只是明說的截斷結果，不能把左右當作已看到完整的色差。

HSL：便於選色，不是均勻的感知尺

固定S100與L50，先看H240，再按只把H改60。藍與黃的RGB通道組合不同，L仍50；這足以反駁「L相同就能省略明暗檢查」。你是否感到一樣明亮，仍要由自己描述，網站沒有替人眼打分。 HSL相同角差也不保相同感覺。要調主輔關係時可沿原色彩頁慢慢比較；不要把本頁的數值轉換當成所有人都會看到同樣層級的證據。依據：CSS 顏色4 HSL限制；觀察活動是本站設計。

Lab：參考白要跟數值一起寫

Lab的L*與a*、b*是另一組座標，不能把HSL的L直接抄過去。本站採CSS Lab的D50參考白，顯示時經XYZ、D50到D65的Bradford適應，再轉線性sRGB及編碼。它是明示的數學步驟，不是讀到螢幕或環境的真白點。 Lab以感知相關的間隔為設計目標，仍不能由一個L*或簡單距離保證任意畫面、觀看條件與人的感覺相同。保留a*、b*只改L*，能比較此座標路線，不能稱已完成真人知覺實驗。依據：CSS 顏色4 §9、§10.11及§19。

同一色可換寫法，範圍卻不因此擴大

按規範轉換樣例，Lab D50約44.36,36.05,-58.99對應sRGB約118,84,205；表格顯示中間線性量。四捨五入會留下微小差，不把顯示的兩位小數稱為完整精度。換寫法沒有讓你的裝置多出新原色。也不要把可輸入範圍當成「所有數字都是真實可見色」：Lab三個欄位不是目標sRGB立方體。本站只對目標數學範圍檢查，不替你的面板、紙墨或校準狀態背書。這個樣例用來核對表示，不是選配色的標準答案。

超出範圍：先承認原色沒有被呈現

按超出sRGB樣例，讀線性通道有哪項小於0或大於1。左窗斜紋代表無法在本站sRGB樣本裡顯示請求色；右窗把各通道截到0至1，再編碼預覽。不要把斜紋看成缺失色的外觀，也不要以右窗當作已忠實重現。真正的色域映射要選策略及目的條件。此頁只示範最直接的截斷，刻意不冒稱CSS規範映射或ICC渲染意圖。換Display P3、印刷或HDR需要另一套明示條件，不能把這個0至1檢查原封不動當成所有媒介的色域。

反例：縮小輸出窗，兩種請求可能失去區別

選Lab，先把a*、b*歸0，L*分別試95與100，再選教學縮小窗。這個人造子集合把線性通道上限設0.65；兩個高值可截成相同右窗，左窗與請求數字仍不同。這是資訊合併的具體反例，不是某台機器的實測行為。如果目的改成用兩塊淺色區分狀態，即使原資料不同，這種結果也可能無法支持區別。下一版應回到必要資訊與真實輸出條件，加入文字／形狀或重新選色，再做成品檢查；不能只看未受限原稿的數字不同就保證可辨。

步驟與觀察

固定HSL的兩個量
用藍色基準，再只改H到60。指出L保持50但RGB改變；把數值描述與自己的明暗觀察分開。
讀Lab與參考白
切規範樣例，核RGB約118,84,205及D50註記。只改一個Lab軸，表述改的是哪個條件，不稱感知提升。
讓範圍失敗可見
切超出sRGB樣例，找到越界通道。解釋左斜紋和右截斷各代表什麼，再恢復完整範圍。
換用途作反例
試中性Lab L*95／100與0.65窗，看兩種請求能否仍區分。改成真裝置或用色目的時另驗，不把人工窗當現成打樣。補讀光墨或原色彩後返回重載保留。

常見問題

把HSL L50直接當Lab L*50

先交代座標與參考白；兩個欄位同名並不表示相同定義。

可以輸入Lab就認為螢幕一定顯得出

檢查明示目標範圍；超出時區分請求與預覽，不能拿截斷色當完整原色。

右窗同色就說原資料相同

讀請求數字與通道上限，可能是映射或截斷合併；回原條件找差異及交付取捨。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：跨工具色彩座標、媒介條件與有限數值模型；沒有Photoshop／Illustrator／Figma操作步驟。來源狀態：實讀CSS 顏色4的HSL限制、Lab D50、轉換順序及§19樣例；版本為2026-10-22 Candidate Recommendation Draft，不是已定稿Recommendation。實讀Adobe Color modes（更新2026-09-30）RGB／CMYK段，以及ICC 常見問題的色彩設定檔／output 色彩設定檔／rendering intent答覆。CIE015:2018仍只讀公開摘要，本頁公式不從該摘要推導。逐頁來源列出實際使用段落。示意限制：本站原創54件雙樣本觀察儀。光墨頁為固定三通道線性發光／獨立理想濾片衰減，不是CMYK分色或光譜；座標頁由明示的sRGB／D50 Lab數學重算，逐通道截斷及0.65人工通道窗是本站反例，不是CSS gamut mapping或某印刷機描述檔。圖像與數值共用模型，沒有搬用官方圖版。原生軟體實測：未原生設計軟體、ICC引擎、校色儀、紙墨或印刷打樣實測；瀏覽器操作檢查只驗本站示意。學習成效驗證：未真人試用、心理物理、眼動或學習成效量測；數值與插旗不代表美感、感知一致或已學會。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。