整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
色顯示百度首頁
今天早上醒來一看各大網站，為表示新冠肺炎疫情死難者的哀悼，各大網站均將頁面變為灰色顯示，顯示的極為莊重肅穆。本文主要介紹常用網頁頁面快速變灰色的方法。
對于網頁而言，頁面色彩、布局等主要受到層疊樣式文件CSS控制，網站頁面整體色彩的改變可以通過CSS進行整體的控制。在CSS中可以通過filter濾鏡屬性實現對網頁元素進行圖像、背景及素材的渲染。
Filter調整測試Demo
如上圖所示，通過設置Filter的屬性取值，實現對顏色色彩的控制。主要屬性說明如下：
1、filter: blur()方法
該方法主要用于實現對圖像設置高斯模塊，及屏幕上的像素融合程度即模糊程度。其參數需要以像素值形式進行提供。參數值越大模糊程度越高。示例如下圖：
網頁中顯示的圖標
在未使用filter屬性未設置時，顯示的原始圖片效果如上圖所示。我們可以進一步對頁面添加style樣式調整filter blur參數值，可實現頁面的模糊程度。如blur參數取值為2個像素，效果如下：
blur參數取值為2顯示效果
2、filter: grayscale()方法
該方法是用于實現頁面變灰的主要方法，主要用于設置頁面顯示的灰度。參數值需要以百分比形式進行提供，0%表示未進行灰度調整，100%表示將頁面完全轉化為灰度。我們還是以圖標為例，對其進行灰度設置進行說明。當灰度取值設置為20%時效果如下圖1所示，當灰度值設置為100%時效果如圖2所示：
圖一：灰度20%設置顯示效果
圖二：灰度100%設置圖片顯示效果
使用filter提供的 grayscale()方法對頁面進行灰度設置實現效果描述如上圖，我們可以快速實現將頁面快速變灰。目前瀏覽器的內核型號較多，對CSS的支持與解析情況不相同，在進行頁面灰度處理時需要考慮到用戶終端瀏覽器的類型，需要進行CSS樣式的兼容性設置。實現基本代碼描述如下：
-webkit-filter: grayscale(100%);
//(Apple Safari內核)
-moz-filter: grayscale(100%);
//(Firefox瀏覽器)
-ms-filter: grayscale(100%);
//(Internet Explorer（IE）瀏覽器)
-o-filter: grayscale(100%);
//(Opera瀏覽器)在明確網頁變灰所需使用濾鏡效果之后，我們可以使用其屬性進行頁面變灰效果。以下給出本人編寫的一個簡單Demo進行變灰測試，原始頁面效果如下：
測試原始頁面
按照編碼要求，我們在該頁面頭部<head>編寫樣式文件，實現變灰處理，所添加代碼描述如下：
變灰實現代碼
在頁面添加變灰代碼之后，我們可以看出明顯的變灰效果，效果描述如下：
頁面變灰實現效果
本文給出了網頁頁面變灰的實現簡單方法，作為網頁設計人員、前端開發人員應當能夠掌握基本使用方法，實現頁面的快速改變。
.4日清明節大家可以看到很多很多網站包括主頁和內容也都已經變成了灰色，比如百度、掘金、思否、CSDN 等等。
思否
CSDN
大家可以看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？
有人會以為所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。
其實，解決方案很簡單，只需要幾行代碼就能搞定了。
我們選擇一個網站，比如 頭條，打開瀏覽器開發者工具。
變灰效果
審查一下網頁的源代碼，選中html，然后我們只要將下面這行 CSS 樣式，加入到頁面指定節點，即可實現網頁變灰的效果：
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
-webkit-filter: grayscale(.95);我們將其取消，就能發現網站的顏色就能重新還原回來了。還原效果還原效果
果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節點之上的。
因此我們可以確定，通過一個全局的 CSS 樣式就能將整個網站變成灰色效果。
那么這里我們就來詳細了解一下這究竟是一個什么樣的 CSS 樣式。
這個樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。
官方介紹內容如下：
filter CSS 屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像，背景和邊框的渲染。
CSS 標準里包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。
其實就是一個濾鏡的意思。
官方有一個 Demo，可以看下效果，如圖所示。
Demo
比如這里通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。
其所有用法示例如下：
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
各個用法介紹大家可以參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
比如這里如果我們可以使用 blur 設置高斯模糊，用法如下：
給圖像設置高斯模糊。radius 一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設定值，則默認是 0；這個參數可設置絕對像素值，但不接受百分比值。
可以達成這樣的效果：
效果
再說回剛才的灰色圖像，這里其實就是設置了 grayscale，其用法如下：
filter: grayscale(percent)
filter: grayscale(percent)將圖像轉換為灰度圖像。值定義轉換的比例。percent 值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還可以傳遞浮點數，效果是一樣的。
如：
filter: grayscale(1)
filter: grayscale(100%)
都可以將節點轉化為 100% 的灰度模式。
所以一切到這里就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考下 CSDN 的寫法：
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
這樣想要變灰的節點只需要加上 gray 這個 class 就好了，比如加到 html 節點上就可以全站變灰了。
最后呢，看一下瀏覽器對 filter 這個樣式的兼容性怎樣，如圖所示：
兼容性
這里我們看到，這里除了 IE，其他的 PC、手機端的瀏覽器都支持了，Firefox 的 PC、安卓端還單獨對 SVG 圖像加了支持，可以放心使用。
近期，三大主流瀏覽器引擎均發布最新版本，支持W3C的CSS Color 4標準，包含新的取色方法color()和相應語法，可展示更多的色域及色彩空間，這意味著web端能展示更豐富更高清的色彩。雖然目前只有最新版本的現代瀏覽器才支持，我們可以先提前了解一下這項新標準。
本文首先會先簡單介紹幾個色彩的基礎概念，了解為何需要新標準，之后會介紹新標準中的方法和語法使用。
指顏色的可選范圍。如sRGB色域，目前web廣泛應用的色域標準，使用紅（red）綠（green）藍（blue）作為基礎色，色值范圍0~255，三種基礎色互相混合起來可展示255*255*255種顏色，這大致可理解為sRGB的色域。
現代web css使用的sRGB色域僅滿足基礎性的色彩需求，能展示的色彩范圍遠小于人類肉眼所能感知的顏色范圍，也遠低于高清展示的要求。
以下是sRGB與其他幾種色域標準的色值范圍大小比較：
??以下是sRGB與人類肉眼可感知的色域比較：
色彩空間可以理解為一個基于某一色域標準下構建的空間數學模型，例如一些簡單的方塊、圓柱的3D模型，可以用來標記出色域中每個顏色的空間位置，各個顏色之間的關系等。
再用sRGB舉例，紅（red）綠（green）藍（blue）三種基礎色可設置為3個直線坐標軸，每種顏色便可標記為這個立方體中的一個點，在css中便是使用rgb()方法來取色，參數為指定顏色在色彩空間中的坐標(R, G, B)。
再再比如css的另一個取色方法hsl()，使用的是一套完全不同的色彩空間HSL，H色相（hue）是取值范圍為0~360的角度，可作為角軸；S飽和度（Saturation）和L亮度（Lightness）作為兩個直線軸，可構建為一個圓柱形的空間，css中使用hsl(H, S, L)表示顏色。
??一種色域標準可以使用不同的色彩空間來描述，不同的色域標準也可以使用的是同一類的色彩空間表示。例如sRGB可以使用rgb()、hsl()、hwb()等方式進行描述，而像Display-P3、Rec2020色域都可以使用（R，G，B）的色彩空間來描述，只是空間的邊界范圍有所不同。
高清意味著更高范圍的色域，讓我們先直觀感覺一下窄色域與廣色域的視覺差距：
??在實際的css顏色取值中，我們常用的方法有很多rgb()、rgba()、hsl()、hwb()，對應不同的色彩空間，但取的都是同一色域范圍內的顏色，即sRGB，大概只能展示人類肉眼可感知的色彩中的30%，仿佛在使用一臺90年代的電視機播放4K電影。
雖然目前的網絡顯示設備很多還是sRGB標準，并不支持顯示更廣色域標準的色彩，僅部分HDR顯示器、或視頻錄制設備、電影制造中使用了如Display P3這類更廣的色域標準。但對于高清的需求只會越來越多，支持更廣色域標準注定也是未來web端顯示的目標之一。
為應對這一趨勢，W3C的CSS Color 4標準定義了新方法color()和其他語法能更靈活的指定各種不同色域標準下的顏色，以及更好的色彩漸變展示。最近，主流三大web瀏覽器也都已支持了W3C的新標準。
2000年以來，我們有多種方式指定色值：hex色值（#rgb、#rrggbb）、rgb()、rgba()、或是一些特定顏色的字符（如white、pink等）；2010年左右開始，瀏覽器開始支持hsl()方法；2017年，hex色值擴展了對于透明度的支持，#rrggbbaa；之后各種瀏覽器又陸續增加對hwb()方法的支持。
不同的方法對應的是不同的色彩空間，但色域都是同一個，即sRGB。
?使用十六進制的數字來分別表示R、G、B、A的值
.valid-css-hex-colors {
/* 一般標準 */
--3-digits: #49b;
--6-digits: #4499bb;
/* 帶透明度 */
--4-digits-opaque: #f9bf; /* 不透明 */
--8-digits-opaque: #ff99bbff; /* 不透明 */
--4-digits-with-opacity: #49b8; /* 透明度88% */
--8-digits-with-opacity: #4499bb88; /* 透明度88% */
}
??使用0~255的十進制數字，或是0%~100%的百分比來指明R、G、B，透明度A使用百分比或0~1的數字表示
.valid-css-rgb-colors{
--classic:rgb(64, 149, 191);
--modern:rgb(64 149 191);
--percents:rgb(25% 58% 75%);
--classic-with-opacity-percent:rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal:rgba(64, 149, 191, .5);
--modern-with-opacity-percent:rgb(64 149 191 / 50%);
--modern-with-opacity-decimal:rgb(64 149 191 / .5);
--percents-with-opacity-percent:rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal:rgb(25% 58% 75% / 50%);
--empty-channels:rgb(none none none);
}
??這種色彩空間更符合人類自然理解，無需了解紅綠藍基礎色是如何混合的。參數分別表示：
?H：hue，色相，取值0deg~360deg
?S：Saturation，飽和度，取值0%~100%
?L：Lightness，亮度，取值0%~100%
.valid-css-hsl-colors{
--classic:hsl(200deg, 50%, 50%);
--modern:hsl(200 50% 50%);
--classic-with-opacity-percent:hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal:hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent:hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal:hsl(200 50% 50% / .5);
/* 無色相和飽和度，僅用亮度可表示黑白色 */
--empty-channels-white:hsl(none none 100%);
--empty-channels-black:hsl(none none 0%);
}
??形式上和HSL類似，但使用的3個維度為：
?H：Hue，色相，取值0deg~360deg；
?W：Whiteness，白色的濃度（0~100%）；
?B：Blackness，黑色的濃度（0~100%）；
.valid-css-hwb-colors{
--modern:hwb(200deg 25% 25%);
--modern2:hwb(200 25% 25%);
--modern-with-opacity-percent:hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal:hwb(200 25% 25% / .5);
/* 無色相和飽和度，僅用亮度可表示黑白色 */
--empty-channels-white:hwb(none 100% none);
--empty-channels-black:hwb(none none 100%);
}
??新的color()方法的參數類似于rgb()方法，使用R、G、B三個直線軸上的數值來指明色彩，不同的是color()方法的第一個參數可以接收除sRGB以外的其他色域下的色彩空間標識符，且R、G、B的值僅支持0~1或0%~100%。
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
方法定義：color(colorspace c1 c2 c3[ / A])
? 參數colorspace：標識符，指明使用哪種色彩空間，可選值包括：srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz,xyz-d50, andxyz-d65.
?參數c1、c2、c3：可以是number（0~1）、百分比或none，對應指定色彩空間下的各參數值，比如srgb,srgb-linear,display-p3對應的是R、G、B的值，具體需要看指定色彩空間描述顏色的維度。
?參數A：可選項，可以是number（0~1）、百分比或none，指明顏色的透明度
不再支持0~255取值，改為0~1范圍，其實和百分比的形式是等價的。如果傳了大于1的數值也默認當作1來解析。
.valid-css-srgb-colors{
--percents:color(srgb 34% 58% 73%);
--decimals:color(srgb .34 .58 .73);
--percents-with-opacity:color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity:color(srgb .34 .58 .73 / .5);
/* 色值為none或空時，表示黑色 */
--empty-channels-black:color(srgb none none none);
--empty-channels-black2:color(srgb);
}
Linear sRGB和sRGB是不同的色彩空間，sRGB的取值是通過一個伽馬曲線函數做過校正的，并不是線性變化的，更適應人眼的感知特性，即對明暗的感知是非線性的；而Linear sRGB的顏色變化是線性的，以下是明暗從0-1漸變時，兩種色彩空間實際的漸變走向。
.valid-css-srgb-linear-colors{
--percents:color(srgb-linear 34% 58% 73%);
--decimals:color(srgb-linear .34 .58 .73);
--percents-with-opacity:color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity:color(srgb-linear .34 .58 .73 / .5);
/* 色值為none或空時，表示黑色 */
--empty-channels-black:color(srgb-linear none none none);
--empty-channels-black2:color(srgb-linear);
}
display P3是最早由蘋果公司推行的。如今這一標準已成為HDR顯示的基礎標準，能顯示的顏色比sRGB多50%。而Rec2020標準比display P3的色域更廣，可以用來顯示4K甚至8K的影像，但目前支持這一標準的終端顯示器還很少。兩種色域都是使用RGB來描述的。
.valid-css-display-p3-colors{
--percents:color(display-p3 34% 58% 73%);
--decimals:color(display-p3 .34 .58 .73);
--percent-opacity:color(display-p3 34% 58% 73% / 50%);
--decimal-opacity:color(display-p3 .34 .58 .73 / .5);
/* 無色度色相，展示為黑色 */
--empty-channels-black:color(display-p3 none none none);
--empty-channels-black2:color(display-p3);
}
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* 無色度色相，展示為黑色 */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
讓我們先回到開頭的兩張色域圖，會發現基于RGB描述的色域基本是一個三角形，因為都是使用3個基礎色混合而成，但人眼所能感知的色域是形似馬蹄的圖形（具體如何繪制出的，感興趣的可自行搜索了解）。基于RGB標準的色彩空間，都很難完全覆蓋人眼能感知的所有顏色。而基于CIE標準（國際照明委員會制定的一種測定顏色的國際標準，它描述了人眼對顏色的感知和色彩的測量方法）的色彩空間，理論上是能夠包括人視覺所能感知到的所有顏色。
CSS Color 4新標準也新增了對于CIE標準色域的支持。下面介紹的lab()、lch()、oklab()、oklch()都是基于CIE的取色新方法。
?lab()方法描述的是基于CIE標準的色彩空間中的顏色，能夠覆蓋人眼所能看到的全色域。和與基于RGB來描述色彩的維度不同，lab使用的維度分別為：
?L：lightness，視覺上線性漸變的亮度，取值范圍0~100或0%~100%；
?A：代表更貼合人眼視覺特性的兩個色軸之其一：紅-綠，取值范圍均為 -125~125 或 -100%~100%。當A為正值，則為更偏紅色；為負值時，更偏綠；
?B：代表更貼合人眼視覺特性的兩個色軸之其二：藍-黃，取值范圍均為 -125~125 或 -100%~100%。值為正值，更偏黃；為負值，更偏藍。
.valid-css-lab-colors{
--percent-and-degrees:lab(58% -16 -30);
--minimal:lab(58 -16 -30);
--percent-opacity:lab(58% -16 -30 / 50%);
--decimal-opacity:lab(58% -16 -30 / .5);
/* 后兩個參數為none是可表示純灰度 */
--empty-channels-white:lab(100 none none);
--empty-channels-black:lab(none none none);
}
lch使用的維度分別是：
?L：lightness，視覺上線性漸變的亮度，取值范圍0~100或0%~100%；
?C：chroma，顏色的純度，類似于飽和度，取值范圍0~230，但實際上，這個值是沒有上限的；
?H：hue，色相，類似hsl和hwb，是個角軸，取值范圍0deg~360deg；
.valid-css-lch-colors{
--percent-and-degrees:lch(58% 32 241deg);
--just-the-degrees:lch(58 32 241deg);
--minimal:lch(58 32 241);
--percent-opacity:lch(58% 32 241 / 50%);
--decimal-opacity:lch(58% 32 241 / .5);
/* 后兩個參數為none是可表示純灰度 */
--empty-channels-white:lch(100 none none);
--empty-channels-black:lch(none none none);
}
?oklab是校正版的lab，優化了圖片處理質量，在CSS中意味著漸變優化和顏色處理函數優化，消除了色相偏移（hue shift，即在lab中改變顏色純度，色相也會變化），使用的維度和lab()是一致的。
.valid-css-oklab-colors{
--percent-and-degrees:oklab(64% -.1 -.1);
--minimal:oklab(64 -.1 -.1);
--percent-opacity:oklab(64% -.1 -.1 / 50%);
--decimal-opacity:oklab(64% -.1 -.1 / .5);
/* 后兩個參數為none是可表示純灰度 */
--empty-channels-white:oklab(100 none none);
--empty-channels-black:oklab(none none none);
}
??相應的，oklch是lch的校正版，取色的邏輯和hsl類似，在圓色盤中選擇一個角度從而選中一個色相，再通過調節亮度和純度，也就是hsl中的飽和度，純度和飽和度基本可認為是等價的，區分僅在于純度和亮度的調節通常是同步進行的，否則純度很容易超出目標色域的范圍。這里有一個oklch的拾色器，可以體驗下。
.valid-css-oklch-colors{
--percent-and-degrees:oklch(64% .1 233deg);
--just-the-degrees:oklch(64 .1 233deg);
--minimal:oklch(64 .1 233);
--percent-opacity:oklch(64% .1 233 / 50%);
--decimal-opacity:oklch(64% .1 233 / .5);
/* 后兩個參數為none是可表示純灰度 */
--empty-channels-white:oklch(100 none none);
--empty-channels-black:oklch(none none none);
}
?除了新增的一些取色方法外，新標準還有一個混色函數，可以將上邊提到的各種不同色彩空間的中顏色進行混合計算出新顏色。
color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue,hsl(120 100% 50%) 20%, white);
方法定義：color-mix(method, color1[ p1], color2[ p2])
?參數method：指定混色的色彩空間，以 in <color space> 的形式，<color space>包含：srgb,srgb-linear,lab,oklab,xyz,xyz-d50, xyz-d65,hsl,hwb,lch, oroklch
?參數color1、color2：為對應method中指定色彩空間中的任一顏色；
?參數p1、p2：為可選參數，取值范圍為0%~100%，可以指明混色的比例，如果為空，默認color1和color2各為50%；
在我們應用一項新語法時，我們通常會有兩種策略：優雅降級和漸進增強，具體實施方案：
這種實施起來比較簡單，即同時使用新舊取色方法，讓瀏覽器自動判斷展示哪種
/* 原代碼 */
color: red;
color:color(display-p3 1 0 0);
/* 如果瀏覽器不支持display-p3，則會只解析第一行 */
color: red;
/* 如果瀏覽器支持，則會最終使用第二行 */
color:color(display-p3 1 0 0);
使用@supports和@media先判斷當前瀏覽器是否支持新的色域標準，并在條件的情況下提供新的色值。
?dynamic-range：取值standard或high，用于判斷當前硬件設備是否支持高清、高對比度、高色彩精度，不過這一屬性判斷的比較籠統，并不能準確判斷瀏覽器是否支持新色域和色彩空間。
@media(dynamic-range: high){
/* safe to use HD colors */
color: color(display-p3 34% 58% 73%);
}
?color-gamut：取值 srgb、p3 或 rec2020，對應可判斷用戶設備是否支持sRGB、Display P3 或 REC2020色域。
@media(color-gamut: srgb){
/* safe to use srgb colors */
color: #4499bb;
}
@media(color-gamut: p3){
/* safe to use p3 colors */
color: color(display-p3 34% 58% 73%);
}
@media(color-gamut: rec2020){
/* safe to use rec2020 colors */
color: color(rec2020 34% 58% 73%);
}
除了可以直接使用css媒體查詢，還可用途JavaScript中的window.matchMedia()方法來進行媒體查詢。
const hasHighDynamicRange=window.matchMedia('(dynamic-range: high)').matches;
console.log(hasHighDynamicRange);// true || false
const hasP3Color=window.matchMedia('(color-gamut: p3)').matches;
console.log(hasP3Color);// true || false
?使用@supports判斷某個css方法或屬性是否支持
@supports(background:rgb(0 0 0)){
/* rgb color space supported */
background:rgb(0 0 0);
}
@supports(background:color(display-p3 0 0 0)){
/* display-p3 color space supported */
background:color(display-p3 0 0 0);
}
@supports(background:oklch(0 0 0)){
/* oklch color space supported */
background:oklch(0 0 0);
}
在實際應用中，在新舊標準過渡期間，可以綜合使用上邊的查詢方法，下面是一個兼容新舊標準的實例：
:root{
--neon-red:rgb(100% 0 0);
--neon-blue:rgb(0 0 100%);
}
/* 設備是否支持展示高清 */
@media(dynamic-range: high){
/* 瀏覽器是否能解析display-p3 */
@supports(color:color(display-p3 0 0 0)){
/* 安全使用display-p3 */
--neon-red:color(display-p3 1 0 0);
--neon-blue:color(display-p3 0 0 1);
}
}
如果更新了最新版本的chrome瀏覽器的話，就能發現DevTools里的拾色器已經支持了CSS Color 4中的新語法，點擊頁面元素中的顏色屬性，在彈出的拾色器中，中間色值右側的箭頭，之前的版本中，點擊箭頭是在hex、rgb、hsl和hwb之間切換，但新版本中，點擊箭頭會出現下拉框，可以看到所有新增的色彩空間和方法，以及當前色值所對應的可替換色值。
??同時在選擇了不同的色彩空間后，色彩的可調節參數也會相應改變。
??當我們選擇了一個非sRGB色域的色值后，會發現拾色器的上方區域里會展示一條sRGB的分界線，可以清晰地看出當前選擇的顏色所在的色域。這能幫助開發者分辨高清色與非高清色。
??而當我們選擇一個超出sRGB范圍的顏色后，再來點擊色值右側的箭頭彈出選項列表時，會發現sRGB色域下的色值后邊會帶上一個三角嘆號。這說明當前色值已超出了sRGB所能描述的范圍，只能使用相近的顏色作為替代。
??關于chrome DevTools更多關于高清顏色的更新，可參閱官方文檔。
sRGB之外的色域和色彩空間目前雖然還剛剛在web端起步，但未來的設計和開發要求可能會慢慢出現，尤其是H5動畫、游戲、3D圖像等等，對于色彩顯示的要求不會永遠停留在sRGB階段，希望本文簡陋的介紹能讓大家多少開始了解一些關于色彩的東西。如有錯誤或疏漏，歡迎指正討論。
參考文章：
1. https://web.dev/articles/color-spaces-and-functions?hl=en
2. https://developer.chrome.com/articles/high-definition-css-color-guide/
3. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color
作者：京東科技 鄭莉
來源：京東云開發者社區 轉載請注明來源
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
