網頁色彩空間：sRGB、DCI-P3、Rec.2020、伽瑪，以及相同十六進位色彩在兩台螢幕上看起來不同的原因
什麼是色彩空間：三原色、色域與參考白點
色彩空間定義了三件事：一組原色、一個參考白點，以及一個轉換函數。原色以 CIE 1931 xy 色度圖上的精確座標表示——這張二維圖形涵蓋了標準人眼所能感知的所有顏色。三個原色在圖上形成一個三角形，三角形內的所有顏色都能透過混合原色來重現，三角形外的則無法。這個三角形就是該色彩空間的色域。
參考白點是三個原色以最大強度同時輸出時所產生的顏色。大多數消費性設備與網頁標準採用 D65——一個模擬約 6500 K 色溫日光的標準光源。兩台色域原色相同但白點不同的顯示器，呈現中性灰色時結果會不一樣。當瀏覽器解譯 CSS 色彩值 #808080 時，它會假設使用 sRGB 搭配 D65 白點，並假設你的顯示器符合這個預設值。
sRGB：1996 年標準化的網頁通用基準
sRGB 由國際電工委員會於 1996 年訂定為 IEC 61966-2-1 標準，設計目標是匹配 1990 年代中期典型消費性 CRT 顯示器的特性。其紅色原色的 CIE xy 座標約為 (0.64, 0.33)，綠色約為 (0.30, 0.60)，藍色約為 (0.15, 0.06)。由此形成的色域三角形涵蓋了 CIE 1931 色度圖中標準人眼可見色彩約 35% 的面積。
每一個 CSS 十六進位色彩值、每一張未嵌入 ICC 設定檔的 PNG 或 JPEG 圖片，以及 HTML canvas 上的每個像素，預設都屬於 sRGB 色彩空間。瀏覽器在未得到其他指示時，一律假定使用 sRGB。sRGB 的實際限制在色域邊緣最為明顯：高飽和度的紅色、鮮豔的綠色與純青色都無法完整呈現。戶外拍攝的成熟番茄，其紅色往往超出 sRGB 色域；圖片檔案會將這個紅色截切至最接近的 sRGB 色彩，使得螢幕顯示的顏色比實物稍顯暗淡。
DCI-P3：數位電影院標準進入消費性顯示器
DCI-P3 源自數位電影院倡議聯盟。與 sRGB 相比，P3 的原色有所偏移：紅色原色略微偏向橙色（xy 約 0.680, 0.320），綠色則更接近純綠（0.265, 0.690）。由此形成的色域涵蓋 CIE 1931 色度圖約 45.5% 的面積，比 sRGB 大約寬廣 26%。這個更寬廣的色域是為了讓數位電影院放映機能夠重現接近傳統膠片電影的飽和色彩。
大約從 2015 年起，消費性顯示器開始採用 P3 原色——Apple 率先在 27 吋 iMac 導入 P3 螢幕，2016 年的 iPhone 7 也跟進。在使用 P3 色彩空間的 P3 顯示器上，#FF0000 呈現的紅色明顯比 sRGB 顯示器上更為飽和。CSS 透過 color() 函數支援 P3：color(display-p3 1 0 0) 指定最飽和的 P3 紅色。截至 2023 年，所有主流瀏覽器均支援此語法，在具備 P3 能力的硬體上顯示更寬廣的色域，在較窄色域的顯示器上則自動截切至 sRGB。
Rec.2020：廣播未來標準與當前顯示器的落差
Rec.2020（正式名稱 ITU-R BT.2020）由國際電信聯盟於 2012 年訂定，作為超高畫質電視的標準。其原色接近單色光：紅色定義於約 630 nm，綠色約 532 nm，藍色約 467 nm。由此形成的色域涵蓋 CIE 1931 色度圖約 75.8% 的面積，約為 sRGB 的兩倍。
標準與實際之間的差距相當顯著：2025 年市面上沒有任何消費性顯示器能重現完整的 Rec.2020 色域。高階專業參考顯示器在三維色彩外觀模型 CIECAM02 中，大約能覆蓋 75–80% 的 Rec.2020 體積。HDR 影片內容通常以 Rec.2020 原色搭配感知量化器（PQ）或混合對數伽瑪（HLG）轉換函數進行母帶製作，但串流平台的最終交付訊號通常會透過色調映射降到 Display P3 或 sRGB 的範圍。
伽瑪與轉換函數：為何 sRGB 編碼不是純冪次函數
「伽瑪 2.2」常被用來描述 sRGB，但 sRGB 實際上使用的是分段轉換函數，而非純冪次函數。IEC 61966-2-1 標準定義了兩段：對於極低亮度值（線性 C 不超過 0.0031308），編碼為線性——C 乘以 12.92；超過此門檻後，則套用近似於 1.055 × C^(1/2.4) − 0.055 的冪次曲線。結果在大部分可用範圍內非常接近伽瑪 2.2，同時避免了純冪次函數在零值附近近乎垂直的斜率問題。
這種編碼在影像處理中十分重要。在伽瑪編碼域中對相鄰像素取平均進行縮圖，會產生比在線性光域中取平均稍暗的結果——這是一個被稱為「伽瑪暗化平均問題」的已知缺陷。正確的影像縮小流程應先線性化數值、取平均，再重新編碼。CSS 漸層與 color-mix() 預設在 sRGB 空間中混合，即在伽瑪壓縮後的數值間插值，而非在線性光中進行；CSS Color Level 4 允許透過 in srgb-linear 明確指定插值色彩空間以覆蓋此預設行為。
相同十六進位色彩值在不同螢幕上顯示不同的原因
有幾個獨立因素可以解釋為何 #FF6600 在不同螢幕上看起來不同。首先，如果某台顯示器具備更寬廣的物理色域（P3 硬體），但作業系統未提供色彩管理，它可能會將 sRGB 訊號值直接映射到更寬廣的原色中，導致所有顏色看起來過於飽和。其次，未校正的顯示器可能在實際白點、伽瑪曲線或色溫上偏離 sRGB 標準的假設。第三，瀏覽器對色彩管理的支援歷來參差不齊：macOS 上的 Safari 套用完整的 ICC 設定檔色彩管理，其他瀏覽器舊版本的支援則較不完整。
嵌入在圖片中或由校正軟體套用至顯示器的 ICC 色彩設定檔，描述了從該內容的編碼色彩空間到顯示器實際量測回應的對應關係。作業系統的色彩管理流水線——macOS 上的 ColorSync、Windows 上的 Windows Color System——會為每台連接的顯示器進行這項轉換。針對廣色域顯示器的網頁開發者可以使用 @media (color-gamut: p3) 提供 color(display-p3 ...) 數值作為鮮豔介面色彩，同時保留純十六進位值作為 sRGB 的回退。TeaFun 的色彩調色盤與色覺模擬工具在 sRGB 色彩空間中運作，這是通用的安全基準，其輸出無論在何種顯示器的原生色域下，都能透過色彩管理正確呈現。