TestMyGears

螢幕色域測試

並排比對 sRGB 與 Display P3 顏色色塊。利用色塊之間的相對差異，快速檢驗螢幕鮮豔模式與瀏覽器色彩管線的表現——而非用於出具精確的面板色域容積認證報告。

Browsers clip color to sRGB. P3/Adobe RGB coordinates here are for relative side-by-side comparison — not certified gamut volume. Use OS calibration software for absolute coverage.

Red — sRGB vs P3 已暫停 · 按 F 進入全螢幕
準備就緒

Gamut patch

Gamut unknown
Gamut comparison patch

Compare layout

Pair layout
Surround

What to look for

Relative gap visible

Paired sRGB and P3 swatches separate in hue or saturation — your browser path may be passing wider primaries for this session.

Identical pairs

sRGB and P3 look the same — usual cause is browser/OS sRGB clipping, not proof your panel lacks P3 hardware.

Run & cycle

  • ← → Cycle patches
  • F Fullscreen

免費 sRGB 與 Display P3 色域比對工具

提供 sRGB/Display P3 三原色與二次色配對、基準原色帶以及雙軌色相漸層平移的瀏覽器色域檢測。專為目視相對分離度檢查與色彩模式 A/B 對比設計——非針對原廠出廠 ΔE 認證、ICC 設定檔生成或官方級 P3 覆蓋率測量。

成對的 sRGB / Display P3 色塊

從紅色到洋紅色的系列對比，將 sRGB 16 進位色值與 CSS color(display-p3 …) 標靶並列，讓您一眼看清色彩深度的相對落差。

純原色帶與廣色域全光譜漸層

完整的 sRGB 與 Display P3 原色色帶，搭配雙彩虹連續漸層，在單純色塊難以斷定時，能直觀考驗色調過渡的連續性。

色域支援度即時標章

即時讀取 CSS color-gamut 媒體查詢結果，顯示瀏覽器是否宣告支援 P3 或 Rec. 2020——提供功能支援提示，非校準後的硬體實測值。

全螢幕循環切換

單選色塊、並排或上下堆疊版型、周圍背景底色切換、色彩標籤與自動循環播放，無需跳出瀏覽器即可流暢走完整套測試。

這項色域測試能夠證明與無法證明的範疇

廣色域本質上是指三維色度空間的容積大小。現代瀏覽器與多數作業系統在訊號輸出至面板前，仍常將畫面限制在 sRGB 空間——因此即便使用高階 P3 螢幕，兩側色塊看起來完全一樣也是十分常見的正常現象。

sRGB 色彩空間三角形

sRGB 是網際網路預設的工作色彩空間。絕大多數網頁內容、數位照片與 UI 元件皆以此標準製作——因此色塊符合 sRGB 往往正是系統預期的正確結果。

Display P3 色彩座標

CSS color(display-p3 …) 指令要求顯示更廣的原色。若系統合成器將訊號裁切至 sRGB，這些超出範圍的顏色會退化折疊至最接近的 sRGB 邊界值，使兩側外觀毫無二致。

相對目視差異與絕對覆蓋率測量

肉眼可見的顏色差異僅證明本次連線階段以不同色彩配方進行了渲染。它無法量化 DCI-P3 的百分比覆蓋率，也無法證明 Adobe RGB 的色域體積。

color-gamut CSS 媒體查詢

此標章反映的是 matchMedia('(color-gamut: p3)') 的回傳狀態。作業系統覆寫、瀏覽器內部旗標設定或 HDR 啟用路徑，有時會與螢幕外箱上的規格貼紙有所出入。

如何執行螢幕色域比對測試

維持室內光線穩定，從紅色比對開始，接著檢視二次色與漸層光譜。在歸咎於硬體面板之前，請先將完全相同的色塊視為系統色彩管線設定的線索。

  1. 在受測裝置上切換為全螢幕檢視

    請在您真正關注的螢幕或筆電上測試。外接顯示器的色彩管線與色彩描述檔，往往與您查閱規格時使用的筆電內建螢幕完全不同。

    提示 比對時請停用夜間光線或原彩顯示——暖色濾鏡會掩蓋微弱的 P3 飽和度變化。

  2. 優先比對紅、綠、藍三原色配對

    切換檢視紅、綠、藍色塊。注意 Display P3 側是否更為深濃，或兩者完全一致。一旦存在色域差異，橘色與青色（Cyan）往往能最顯著地放大相對色差。 另請參閱： 螢幕色彩校準工具 .

    提示 若兩側反光眩光導致非色彩因素的明暗不均，可將版面切換為上下堆疊排列。

  3. 交叉比對螢幕模式與色域標章

    在螢幕選單中切換 sRGB 與廣色域模式並重新測試。將色彩標章與肉眼所見進行比對——若標章顯示支援 P3 但色塊依然毫無差別，說明瀏覽器層級依然在進行 sRGB 裁切。 另請參閱： RGB 三原色通道測試 .

    提示 在完成純色比對後，以廣色域漸層色帶收尾，檢驗色調是否有不自然的斷階突變。

瀏覽器端色域測試的技術限制

非官方覆蓋率證書

面板製造商標示的 DCI-P3 或 Adobe RGB 百分比均出自實驗室光學儀器。網頁程式無法穿透被裁切的瀏覽器輸出管線來精確測量這些實體色域體積。

誠實看待 sRGB 預設規範

在看到明確的相對差異之前，應預設訊號已被裁切至 sRGB。當您需要絕對科學的數據證明時，請使用作業系統專業工具（DisplayCAL、原廠校色軟體或工程選單）。

何時應該執行此色域比對檢測

當硬體規格宣傳、螢幕影像模式或輸出色彩空間產生矛盾時使用——而非僅作為退貨判定的唯一依據。

全新購入的廣色域螢幕

  • 產品外箱標註具備 95%+ DCI-P3 廣色域
  • 在螢幕的標準 sRGB 模式下，兩側色塊看起來毫無差別
  • 切換至 Display P3 或原生模式時，兩者可能出現明顯視覺落差

推薦 記錄哪個 OSD 模式能展現色彩分離；若工作對色彩要求嚴苛，再使用硬體校色器進行覆蓋率驗證。

攝影照片與視覺設計交付

  • 客戶在 Google Chrome 或 Microsoft Edge 瀏覽器中預覽成品
  • 您同時輸出了標準 sRGB 與 Display P3 規格的母檔
  • 需要確認使用者的瀏覽器路徑是否會將兩者強制壓縮混為一談

推薦 若色塊看起來完全相同，網頁交付請維持標準 sRGB，並將廣色域檔案保留給具備完整色彩管理的原生應用程式。

獲得更清晰客觀比對效果的設定建議

面板充分預熱與環境光源控制

讓螢幕通電穩定運作數分鐘，並關閉帶有顏色的情境氛圍燈。環境光的雜色會引發肉眼錯覺，偽造出不存在的色域差異。

關閉顯示卡驅動中的強制 sRGB 選項

某些顯示卡驅動程式面板會強制將訊號鉗制在 sRGB。在評估 P3 配對色塊之前，請務必先將該選項關閉。

一次僅變更單一變數

單次只更改螢幕 OSD 選單模式或瀏覽器設定——切勿同時調整兩者——這樣才能準確掌握是哪個環節拉開或縮小了色彩差距。

後續搭配三原色獨立通道檢測

若某個原色看起來黯淡無力而非被標準裁切，請接著執行 RGB 三原色通道測試，以排除傳輸線材或子像素硬體瑕疵。

螢幕色域測試 常見問題

這項測試能夠證明我的螢幕百分之百覆蓋 Display P3 色域嗎？

不能。在像素送達螢幕面板之前，瀏覽器通常會將超出 sRGB 的色彩強制裁切。請將本工具用於在同一連線環境下觀察成對色塊的相對視覺差異。若要測量真實的色域覆蓋體積，必須仰賴作業系統層級的專業校色軟體或光學校色儀器。

為什麼在我的螢幕上 sRGB 和 Display P3 看起來一模一樣？

可能是作業系統、瀏覽器、顯示卡驅動或螢幕硬體本身強制套用了 sRGB 輸出管線——或者該面板本身的原生色域就不支援超出 sRGB 的範圍。請檢查螢幕色彩模式、關閉顯示卡驅動中的強制 sRGB 選項，並在支援 CSS color(display-p3) 的現代瀏覽器中重新測試。

色域支援度標章代表什麼含意？

它即時回報瀏覽器的 CSS color-gamut 媒體查詢結果（如 sRGB、Display P3 或 Rec. 2020）。這僅代表瀏覽器向網頁宣告的色彩功能支援提示，絕非硬體面板覆蓋率的校準實測值。

網頁設計師是否應該優先使用 Display P3 素材？

大部分公開網頁的最終發布標準依然預設為 sRGB。僅在您的產製流程能夠達成端到端的完整色彩管理時，才建議將 P3 作為母檔標準；否則對於一般公開網站，輸出標準 sRGB 是最穩妥的做法，並將廣色域素材保留給色彩可控的原生應用軟體。

Rec. 2020 與 Display P3 是同一種色域嗎？

不是。Rec. 2020 是範圍更為廣袤的超高畫質電視（UHDTV）廣色域標準。在某些開啟 HDR 的系統路徑下，標章可能會回報 Rec. 2020，但本工具的各項比對色塊主要鎖定 sRGB 與 Display P3 的色彩座標，供使用者進行直觀的相對差異比較。

其他色彩與螢幕檢測工具

當螢幕顯色因不同原因呈現異常時，將色域比對與色彩校準、原色通道及色階斷層測試搭配使用。