ByteScope

HDR Test

HDR test online — 這塊螢幕是不是真 HDR。視窗拖到另一台，數字會跟著跑。

不會上傳。只讀這個視窗的媒體查詢，用 CSS 和 canvas 畫測試圖。

此刻這個視窗

檢查中

檢查中

媒體查詢

(dynamic-range) 是這個頁面。(video-dynamic-range) 是影片平面。不是同一個查詢。

(dynamic-range: high)
檢查中
(dynamic-range: standard)
檢查中
(video-dynamic-range: high)
檢查中
(video-dynamic-range: standard)
檢查中
(color-gamut: srgb)
檢查中
(color-gamut: p3)
檢查中
(color-gamut: rec2020)
檢查中
(color: 8)
檢查中
(color: 10)
檢查中
(color: 12)
檢查中
screen.colorDepth
檢查中
devicePixelRatio
檢查中

color-gamut: 檢查中

CSS 顏色寫法

CSS.supports 只代表引擎看得懂這種顏色，不代表這塊面板畫得出來。

color(display-p3 1 0 0)
檢查中
oklch(…)
檢查中
color(rec2020 1 0 0)
檢查中

色域三角形（CIE xy）

  • sRGB · sRGB 佔 Display P3 的 73.7%
  • Display P3 · Display P3 佔 Rec.2020 的 71.7%
  • Rec.2020

亮度階梯

相鄰階應該分得出來。暗部併在一起是黑位被吃掉，亮部併在一起是白位裁切，一階一階變平台就是 banding。

接近黑

接近白

接近黑和接近白的相鄰階，不該併成同一階。

P3 對 sRGB

同一個色相，兩種寫法。紅跟綠看得出差別，才是廣色域。

R

G

B

color(display-p3 …) · rgb()

兩塊長一樣，多半是這個視窗被卡在 sRGB。

HDR 白對 SDR 白

SDR 白是 #fff。HDR 那塊在引擎允許時，會用亮度超過 100% 的 CSS 顏色。

SDR 白

HDR 白

檢查中

常見支援情況

只是常見情況。請以上面的實測為準——視窗拖到另一台，數字會跟著跑。

API / 查詢ChromeEdgeFirefoxSafari
window.matchMedia現在的桌面瀏覽器都有。沒有的話，這一頁會維持不明。✓✓✓✓
(dynamic-range: high)Chrome、Edge、Safari。Firefox 有這個查詢；HDR 判定看作業系統。✓✓◐✓
(video-dynamic-range: high)不是 dynamic-range 的別名。Safari 和 Chromium 不一樣。✓✓◐✓
(color-gamut: p3 / rec2020)實作很普遍。srgb 在 P3、Rec.2020 上也會中（範圍查詢）。✓✓✓✓
CSS.supports display-p3 / oklch寫法能不能過。不是在量面板。✓✓✓✓

關於這個工具

這一頁只答一個問題：你眼前這塊螢幕，是不是真的 HDR。什麼都不會上傳。頁面掛上去之後，才用 matchMedia 讀 dynamic-range、video-dynamic-range、color-gamut，再用 CSS.supports 試廣色域的寫法，並畫出亮度階梯和 P3 對 sRGB 的色塊。視窗拖到另一台螢幕，上面的數字會跟著變。

三件不同的事

系統的 HDR 開關、面板能到多亮、這個瀏覽器回報什麼，不是同一件事。面板做得到 HDR，系統卻可能關著；瀏覽器也可能對峰值差不多只比 SDR 亮一點的螢幕回 dynamic-range: high。這一頁只看得到，瀏覽器對「這個視窗」怎麼說。

dynamic-range 和 video-dynamic-range

(dynamic-range: high) 是這個頁面的輸出路徑。(video-dynamic-range: high) 是影片平面用的，不是同一個 CSS 媒體查詢的別名。筆電有時只中一個。所以分開列。

故意不附 HDR 影片

這一頁沒有 HDR10 樣本。站台靜態匯出已經夠大，再塞一支影片 Cloudflare 部署會炸掉。而且這裡沒有 mediainfo，沒辦法確認檔案真的帶 HDR10 metadata。沒驗證就標 HDR，比沒附還糟。要測播放，把你手上的 HDR 檔丟進編解碼檢查或系統播放器，或看你知道是 HDR 的串流。這裡的測試圖只有 CSS 和 canvas。

常見問題

我的螢幕是 HDR 嗎？

這一頁講的是「瀏覽器」怎麼看這個視窗現在的輸出路徑。dynamic-range: high 代表瀏覽器認為這條路徑做得到 HDR。它不測 nits，也不能證明系統 HDR 開關有開。有兩台螢幕就把視窗拖過去——答案是跟著那台螢幕走的。

為什麼系統 HDR 開關、面板、瀏覽器是三件不同的事？

面板是硬體：峰值亮度、區域調光、能不能走 PQ 或 HLG。系統開關決定桌面要不要進 HDR 模式。瀏覽器再對「這個」視窗回報媒體查詢。三個可能互相對不上。這一頁的「是」，是瀏覽器說是，不是色彩計量過。

dynamic-range: high 到底是什麼意思？

dynamic-range: high 代表瀏覽器認為目前輸出路徑支援 HDR。不是說面板峰值夠亮，也不是說 SDR 內容會突然變好看。(dynamic-range: standard) 在 HDR 螢幕上也會中，因為它們還是播得了 SDR——那不是「只有 SDR」的旗標。

為什麼沒有附 HDR 影片樣本？

兩個都很實際。匯出後的站台已經大約 275 MB，上次部署還把 WASM 丟到 CDN 才塞得進 Cloudflare；再塞 HDR 影片部署會失敗。而且這裡沒裝 mediainfo，沒辦法確認附上的片子真的帶 HDR10 metadata。請用你手上的 HDR 檔，或你知道是 HDR 的串流來測播放。這一頁不會把隨便一個 mp4 說成 HDR10。

視窗一移，數字就變，是壞掉了嗎？

每個 matchMedia 都有訂 change。真正算數的是視窗坐落的那條輸出路徑，所以拖到另一台螢幕時，色域、動態範圍、每通道位元數本來就該更新。那是這一頁要做的事，不是故障。

P3 和 sRGB 色塊看起來一樣。我的螢幕不是廣色域？

看起來一樣，多半是這個視窗被卡在 sRGB：面板本身是 sRGB、系統沒開廣色域，或瀏覽器沒把 Display P3 送出去。紅跟綠看得出差別，才是廣色域的訊號。CSS.supports('color', 'color(display-p3 1 0 0)') 只代表引擎看得懂這種寫法，不是在量螢幕。

相關工具