請開啟https://fff.kidi.ng 這個網頁看一看,你感覺是文字“White.”的顏色更白,還是其背景色更白呢?
域名中的fff
是簡寫的 十六進位制顏色程式碼,表示白色
在 2020 年產、採用了 Intel i5 處理器的 MacBook 上,使用 Safari 瀏覽器開啟https://fff.kidi.ng,看到的效果如下(試著截一下圖就知道這裡為什麼不得不貼照片了):

是文字更白,還是背景色更白呢?我們用 macOS 自帶的取色工具 Digital Color Meter 來檢測一下。


文字的顏色為
RGB(255,255,255)
即白色(雖然看起來是淺灰色),再來看背景色。
也是一模一樣的
RGB(255,255,255)
,竟然也是白色!可明明背景色看起來更白啊。其實理論上不存在更白的白色,因為白色本身是光的完全反射,包含了所有波長的光,通常認為是“無色”的合成。然而,在某些視覺效果或極端的亮度表現下,有些“白色”看起來確實更亮或更純淨。
https://github.com/kiding/wanna-see-a-whiter-white 上總結了出現這種現象需要滿足的幾個條件:
首先瀏覽器需要支援顯示HDR(High Dynamic Range,高動態範圍) 的內容。這種瀏覽器能夠提供更高的亮度、對比度和更廣的色域,帶來更加逼真的視覺體驗。
第 2 個條件是頁面中要包含一段 HDR 影片,以使瀏覽器進入 HDR 模式。注意到圖中中心位置明亮的白色小方塊了嗎?那不是拍照時螢幕的反光,而是一個小影片。檢視網頁原始碼,可以看到對應的
<video>
標籤:
最後一個觸發條件是一段 CSS 程式碼:
#whiter {
filter:brightness(10);
backdrop-filter:brightness(1);
}
brightness(10)
將元素的亮度增加了 10 倍,而brightness(1)
表示背景亮度保持預設值(1
是標準亮度值)。
然而,為什麼滿足以上條件就會形成這一怪象,其中的具體原因還不完全清楚。
另外,在不同裝置或不同瀏覽器上看到的結果可能還不一樣。有時是文字“White.“更亮:

而在手機上的 Safari 中,有可能一開始看不到 “White.“,直到點選下方的分享按鈕,這個”白色幽靈“才會出現。