工具用的順手嗎?
你的回饋能幫助我們做得更好
實現RGB與XYZ色彩程式碼雙向轉換的工具,適用於網頁設計和影象處理場景
概覽
了解工具能解決的問題、計算或處理邏輯,以及資料邊界。
RGB 常用來指定螢幕上的紅、綠、藍通道;這個頁面把輸入解讀為 8 位元 sRGB,通道範圍各為 0–255,也可輸入 HEX 色碼。CIE XYZ 則以 X、Y、Z 三個三刺激值表示顏色。X、Y、Z 不是另一組紅綠藍通道,而是依指定標準轉換後的座標;同一組 RGB 若未說明色域與白點,不能唯一決定 XYZ。
此處採 sRGB、D65 白點與參考白 Y=100 的尺度。轉換會先把非線性編碼的 sRGB 通道解碼為線性光,再乘上 sRGB 至 XYZ 矩陣。因此 RGB 數字不能直接代入矩陣。以下以 R、G、B 表示線性化後、介於 0 與 1 的通道值:
X = 100 × (0.4124564R + 0.3575761G + 0.1804375B)Y = 100 × (0.2126729R + 0.7151522G + 0.0721750B)Z = 100 × (0.0193339R + 0.1191920G + 0.9503041B)
反向換算則先用逆矩陣求線性 RGB,再編碼為 sRGB,轉成 0–255 整數並限制在可顯示通道範圍。這適合核對同一套 sRGB D65 數值;若原始資料來自 Display P3、Adobe RGB、D50 或帶有特定 ICC 設定檔,需先依其色彩管理流程轉換。
在這套尺度中,參考白的 Y 設為 100;Y 與亮度成比例,但不是以 cd/m² 表示的螢幕實測亮度。X 和 Z 也會參與描述色彩,不能單獨當成紅、藍通道。由 sRGB 換出的 XYZ 數字可以超過輸入滑桿範圍,例如 sRGB 白色的 Z 約為 108.883;這不代表算錯,而是輸出與頁面可手動設定的 XYZ 範圍不同。
W3C《CSS Color Module Level 4》說明色彩空間的標準化表示;W3C sRGB 說明列出 sRGB 與 CIE XYZ 的轉換關係及 D65 參考白;CIE XYZ 術語條目支持三刺激值的定義。以上來源於 2026-09-30 查核。
指南
依步驟完成操作,並透過範例核對輸入與結果。
調整 R、G、B 滑桿(各為 0–255 整數),或在 HEX 欄輸入有效色碼,例如 #4D8DEA。也可用取色器或色票選色;有效輸入會同步更新顏色預覽。
右側 X、Y、Z 會依 sRGB D65 口徑計算。以 #4D8DEA(RGB 77、141、234)為例,XYZ 約為 (27.4314, 26.5653, 81.5079)。顯示最多四位小數。
可分別複製 HEX、RGB、整組 XYZ 或單一分量;「複製全部」會整理成多行文字。重置會回到 #3B82F6。
調整右側 X、Y、Z 滑桿即可更新左側 RGB、HEX 與預覽。每個 XYZ 滑桿的可調範圍是 0–100、間距 0.01;如果正向換算產生高於 100 的分量,滑桿不能原樣輸入該值。轉回 RGB 時超出 sRGB 範圍的通道會被裁切,並四捨五入為 0–255 整數,因此反向結果是可顯示的近似色,不一定能完整還原原始 XYZ。
情境
查看這項工具在不同工作與生活流程中的用法。
手上有 HEX 或 CSS 常見的 sRGB 通道,需提供 XYZ 數值給後續計算或文件時,可先換算並複製三個座標。交接時一併註明 sRGB、D65 與 Y=100 尺度,避免接收端按另一種 RGB 或 XYZ 慣例解讀。
比較 HEX 輸入與 XYZ 輸出,可觀察 sRGB 編碼通道並非線性光強度。這有助於理解為何轉換前需先做分段解碼,也可用黑、白與純色檢查自行撰寫的公式。
測試或設計人員可用 #000000、#FFFFFF、#FF0000 等固定輸入,比對 XYZ 與反向 RGB。若末位不同,先確認矩陣精度、舍入方式及色彩空間設定一致。
問答
集中解答常見疑問與容易混淆的問題。
不可以。這裡的 8 位元 sRGB 是非線性編碼,須先除以 255 並套用 sRGB 解碼函數,再以線性 RGB 計算 XYZ。
因為此尺度把參考白的 Y 設為 100,並未要求 X、Z 也小於或等於 100。依本頁口徑,白色約為 X=95.047、Y=100、Z=108.883。
反向結果會限制在 sRGB 可表示的通道範圍,並取為 8 位元整數;超出色域的分量會裁切,精度也會因取整而減少。XYZ 輸入滑桿最高為 100,也無法輸入某些正向結果。
代表相同 sRGB 通道時,結果相同。例如 #4D8DEA 等同 RGB(77, 141, 234),使用同一轉換口徑會得到相同 XYZ。
須知
使用前了解適用範圍、結果限制與必要提醒。
推薦
查找相關工具、專題與可用的 API 能力。