工具用的順手嗎?
你的回饋能幫助我們做得更好
實現RGB與CIELab顏色空間的雙向轉換,為設計師和開發者提供精準的色彩對應關係。
概覽
了解工具能解決的問題、計算或處理邏輯,以及資料邊界。
這個轉換器以 8 位元 sRGB 為 RGB 輸入:紅、綠、藍各為 0–255;也可輸入有效的 HEX 色碼、使用取色器或點選預設色。結果會同步顯示色彩預覽、RGB 整數、HEX 與 CIELAB(CIE L*a*b*)座標。反向調整 L*、a*、b* 滑桿時,工具會換算出可用的 RGB 與 HEX。RGB 每格以 1 為調整單位;Lab 每格以 0.1 為調整單位,正向換算的 Lab 顯示至小數點後兩位。
此處 Lab 是以 D65 參考白計算的結果。L* 表示明度;a* 負值朝綠、正值朝紅;b* 負值朝藍、正值朝黃。a*、b* 不是 RGB 的紅綠藍通道,數值不能逐一對應。CIELAB 公式使用 XYZ 與指定參考白的比例,再套用分段函數;它描述的是一組有參考條件的色彩座標。
L* = 116 f(Y/Yn) − 16
a* = 500 [f(X/Xn) − f(Y/Yn)]
b* = 200 [f(Y/Yn) − f(Z/Zn)]
換算時先將 sRGB 的非線性 RGB 分量解碼為線性光,再依 sRGB 矩陣計算 D65 XYZ,最後以 D65 參考白正規化並計算 L*a*b*。例如工具預設的 #3B82F6(RGB 59, 130, 246)結果為約 L*=55.63、a*=17.54、b*=−64.42;純紅 #FF0000(RGB 255, 0, 0)約為 53.24、80.09、67.20。工具中間 XYZ 會先保留四位小數,因此與不做中間捨入的軟體可能有末位差異。
指南
依步驟完成操作,並透過範例核對輸入與結果。
在 HEX 欄輸入有效色碼,例如 #3B82F6;也可以按取色器選色,或直接挑選下方預設色。HEX 輸入尚未成為有效色碼時,工具會保留前一次有效顏色。
要從 RGB 開始,可移動 R、G、B 滑桿;要依 Lab 目標微調,則移動 L*、a*、b*。輸入或調整後,預覽及另一組座標會同步更新。Lab 的 a*、b* 範圍是滑桿可調範圍,不代表所有 CIELAB 數學值的絕對界限。
可複製 HEX、RGB、單一 Lab 分量或全部結果。分享會帶入目前 HEX 色碼;開啟分享內容後,Lab 會由該 sRGB 顏色重新計算。
情境
查看這項工具在不同工作與生活流程中的用法。
設計稿提供 HEX 或 RGB 時,可換算出本工具採用的 D65 Lab 座標,讓設計、前端與測試人員以相同參考白記錄明度及色彩偏向。
逐一選取色票並比較 L*,可快速檢視同一組 sRGB 顏色的明暗排序;a*、b* 則可協助標記偏紅綠、偏黃藍的方向。
從 Lab 滑桿調整目標並觀察返回的 RGB,可初步查看它在 sRGB 通道中的呈現結果;若目標超出色域,結果會被限制到通道範圍,適合初步對照而非色彩管理驗收。
問答
集中解答常見疑問與容易混淆的問題。
先確認 RGB 色彩空間、Lab 參考白與觀察條件。本工具從 sRGB 換算並使用 D65;許多編輯與測色工作流程採用 D50。若白點不同,需進行色適應,單看「Lab」名稱不足以判斷數值相同。
不能。RGB 與 Lab 數值透過滑桿調整,文字欄位用於輸入 HEX 色碼;需要指定通道值時,移動對應滑桿即可。
不建議照抄。本工具採 D65 參考白,W3C CSS Color Module Level 4 草案所述 CSS Lab 採 D50;要轉用 CSS 值,應按相應色彩流程處理白點差異,並核對瀏覽器實際色域呈現。
不會。一次只能處理一個顏色並提供 RGB、HEX 與 Lab 對應值;頁面不接受第二個樣本,也不會輸出 ΔE76、CIE94 或 CIEDE2000。
須知
使用前了解適用範圍、結果限制與必要提醒。
CIELAB 可表示的顏色不一定能由 sRGB 表示。當 Lab 轉回 sRGB 遇到超出色域的值時,RGB 通道會限制在 0–255 並取整;回轉後的顏色可能與原始 Lab 目標不同。
推薦
查找相關工具、專題與可用的 API 能力。