整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
近期，三大主流瀏覽器引擎均發(fā)布最新版本，支持W3C的CSS Color 4標(biāo)準(zhǔn)，包含新的取色方法color()和相應(yīng)語(yǔ)法，可展示更多的色域及色彩空間，這意味著web端能展示更豐富更高清的色彩。雖然目前只有最新版本的現(xiàn)代瀏覽器才支持，我們可以先提前了解一下這項(xiàng)新標(biāo)準(zhǔn)。
本文首先會(huì)先簡(jiǎn)單介紹幾個(gè)色彩的基礎(chǔ)概念，了解為何需要新標(biāo)準(zhǔn)，之后會(huì)介紹新標(biāo)準(zhǔn)中的方法和語(yǔ)法使用。
指顏色的可選范圍。如sRGB色域，目前web廣泛應(yīng)用的色域標(biāo)準(zhǔn)，使用紅（red）綠（green）藍(lán)（blue）作為基礎(chǔ)色，色值范圍0~255，三種基礎(chǔ)色互相混合起來(lái)可展示255*255*255種顏色，這大致可理解為sRGB的色域。
現(xiàn)代web css使用的sRGB色域僅滿足基礎(chǔ)性的色彩需求，能展示的色彩范圍遠(yuǎn)小于人類肉眼所能感知的顏色范圍，也遠(yuǎn)低于高清展示的要求。
以下是sRGB與其他幾種色域標(biāo)準(zhǔn)的色值范圍大小比較：
??以下是sRGB與人類肉眼可感知的色域比較：
色彩空間可以理解為一個(gè)基于某一色域標(biāo)準(zhǔn)下構(gòu)建的空間數(shù)學(xué)模型，例如一些簡(jiǎn)單的方塊、圓柱的3D模型，可以用來(lái)標(biāo)記出色域中每個(gè)顏色的空間位置，各個(gè)顏色之間的關(guān)系等。
再用sRGB舉例，紅（red）綠（green）藍(lán)（blue）三種基礎(chǔ)色可設(shè)置為3個(gè)直線坐標(biāo)軸，每種顏色便可標(biāo)記為這個(gè)立方體中的一個(gè)點(diǎn)，在css中便是使用rgb()方法來(lái)取色，參數(shù)為指定顏色在色彩空間中的坐標(biāo)(R, G, B)。
再再比如css的另一個(gè)取色方法hsl()，使用的是一套完全不同的色彩空間HSL，H色相（hue）是取值范圍為0~360的角度，可作為角軸；S飽和度（Saturation）和L亮度（Lightness）作為兩個(gè)直線軸，可構(gòu)建為一個(gè)圓柱形的空間，css中使用hsl(H, S, L)表示顏色。
??一種色域標(biāo)準(zhǔn)可以使用不同的色彩空間來(lái)描述，不同的色域標(biāo)準(zhǔn)也可以使用的是同一類的色彩空間表示。例如sRGB可以使用rgb()、hsl()、hwb()等方式進(jìn)行描述，而像Display-P3、Rec2020色域都可以使用（R，G，B）的色彩空間來(lái)描述，只是空間的邊界范圍有所不同。
高清意味著更高范圍的色域，讓我們先直觀感覺(jué)一下窄色域與廣色域的視覺(jué)差距：
??在實(shí)際的css顏色取值中，我們常用的方法有很多rgb()、rgba()、hsl()、hwb()，對(duì)應(yīng)不同的色彩空間，但取的都是同一色域范圍內(nèi)的顏色，即sRGB，大概只能展示人類肉眼可感知的色彩中的30%，仿佛在使用一臺(tái)90年代的電視機(jī)播放4K電影。
雖然目前的網(wǎng)絡(luò)顯示設(shè)備很多還是sRGB標(biāo)準(zhǔn)，并不支持顯示更廣色域標(biāo)準(zhǔn)的色彩，僅部分HDR顯示器、或視頻錄制設(shè)備、電影制造中使用了如Display P3這類更廣的色域標(biāo)準(zhǔn)。但對(duì)于高清的需求只會(huì)越來(lái)越多，支持更廣色域標(biāo)準(zhǔn)注定也是未來(lái)web端顯示的目標(biāo)之一。
為應(yīng)對(duì)這一趨勢(shì)，W3C的CSS Color 4標(biāo)準(zhǔn)定義了新方法color()和其他語(yǔ)法能更靈活的指定各種不同色域標(biāo)準(zhǔn)下的顏色，以及更好的色彩漸變展示。最近，主流三大web瀏覽器也都已支持了W3C的新標(biāo)準(zhǔn)。
2000年以來(lái)，我們有多種方式指定色值：hex色值（#rgb、#rrggbb）、rgb()、rgba()、或是一些特定顏色的字符（如white、pink等）；2010年左右開(kāi)始，瀏覽器開(kāi)始支持hsl()方法；2017年，hex色值擴(kuò)展了對(duì)于透明度的支持，#rrggbbaa；之后各種瀏覽器又陸續(xù)增加對(duì)hwb()方法的支持。
不同的方法對(duì)應(yīng)的是不同的色彩空間，但色域都是同一個(gè)，即sRGB。
?使用十六進(jìn)制的數(shù)字來(lái)分別表示R、G、B、A的值
.valid-css-hex-colors {
/* 一般標(biāo)準(zhǔn) */
--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的十進(jìn)制數(shù)字，或是0%~100%的百分比來(lái)指明R、G、B，透明度A使用百分比或0~1的數(shù)字表示
.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);
}
??這種色彩空間更符合人類自然理解，無(wú)需了解紅綠藍(lán)基礎(chǔ)色是如何混合的。參數(shù)分別表示：
?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);
/* 無(wú)色相和飽和度，僅用亮度可表示黑白色 */
--empty-channels-white:hsl(none none 100%);
--empty-channels-black:hsl(none none 0%);
}
??形式上和HSL類似，但使用的3個(gè)維度為：
?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);
/* 無(wú)色相和飽和度，僅用亮度可表示黑白色 */
--empty-channels-white:hwb(none 100% none);
--empty-channels-black:hwb(none none 100%);
}
??新的color()方法的參數(shù)類似于rgb()方法，使用R、G、B三個(gè)直線軸上的數(shù)值來(lái)指明色彩，不同的是color()方法的第一個(gè)參數(shù)可以接收除sRGB以外的其他色域下的色彩空間標(biāo)識(shí)符，且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])
? 參數(shù)colorspace：標(biāo)識(shí)符，指明使用哪種色彩空間，可選值包括：srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz,xyz-d50, andxyz-d65.
?參數(shù)c1、c2、c3：可以是number（0~1）、百分比或none，對(duì)應(yīng)指定色彩空間下的各參數(shù)值，比如srgb,srgb-linear,display-p3對(duì)應(yīng)的是R、G、B的值，具體需要看指定色彩空間描述顏色的維度。
?參數(shù)A：可選項(xiàng)，可以是number（0~1）、百分比或none，指明顏色的透明度
不再支持0~255取值，改為0~1范圍，其實(shí)和百分比的形式是等價(jià)的。如果傳了大于1的數(shù)值也默認(rèn)當(dāng)作1來(lái)解析。
.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或空時(shí)，表示黑色 */
--empty-channels-black:color(srgb none none none);
--empty-channels-black2:color(srgb);
}
Linear sRGB和sRGB是不同的色彩空間，sRGB的取值是通過(guò)一個(gè)伽馬曲線函數(shù)做過(guò)校正的，并不是線性變化的，更適應(yīng)人眼的感知特性，即對(duì)明暗的感知是非線性的；而Linear sRGB的顏色變化是線性的，以下是明暗從0-1漸變時(shí)，兩種色彩空間實(shí)際的漸變走向。
.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或空時(shí)，表示黑色 */
--empty-channels-black:color(srgb-linear none none none);
--empty-channels-black2:color(srgb-linear);
}
display P3是最早由蘋(píng)果公司推行的。如今這一標(biāo)準(zhǔn)已成為HDR顯示的基礎(chǔ)標(biāo)準(zhǔn)，能顯示的顏色比sRGB多50%。而Rec2020標(biāo)準(zhǔn)比display P3的色域更廣，可以用來(lái)顯示4K甚至8K的影像，但目前支持這一標(biāo)準(zhǔn)的終端顯示器還很少。兩種色域都是使用RGB來(lái)描述的。
.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);
/* 無(wú)色度色相，展示為黑色 */
--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);
/* 無(wú)色度色相，展示為黑色 */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
讓我們先回到開(kāi)頭的兩張色域圖，會(huì)發(fā)現(xiàn)基于RGB描述的色域基本是一個(gè)三角形，因?yàn)槎际鞘褂?個(gè)基礎(chǔ)色混合而成，但人眼所能感知的色域是形似馬蹄的圖形（具體如何繪制出的，感興趣的可自行搜索了解）。基于RGB標(biāo)準(zhǔn)的色彩空間，都很難完全覆蓋人眼能感知的所有顏色。而基于CIE標(biāo)準(zhǔn)（國(guó)際照明委員會(huì)制定的一種測(cè)定顏色的國(guó)際標(biāo)準(zhǔn)，它描述了人眼對(duì)顏色的感知和色彩的測(cè)量方法）的色彩空間，理論上是能夠包括人視覺(jué)所能感知到的所有顏色。
CSS Color 4新標(biāo)準(zhǔn)也新增了對(duì)于CIE標(biāo)準(zhǔn)色域的支持。下面介紹的lab()、lch()、oklab()、oklch()都是基于CIE的取色新方法。
?lab()方法描述的是基于CIE標(biāo)準(zhǔn)的色彩空間中的顏色，能夠覆蓋人眼所能看到的全色域。和與基于RGB來(lái)描述色彩的維度不同，lab使用的維度分別為：
?L：lightness，視覺(jué)上線性漸變的亮度，取值范圍0~100或0%~100%；
?A：代表更貼合人眼視覺(jué)特性的兩個(gè)色軸之其一：紅-綠，取值范圍均為 -125~125 或 -100%~100%。當(dāng)A為正值，則為更偏紅色；為負(fù)值時(shí)，更偏綠；
?B：代表更貼合人眼視覺(jué)特性的兩個(gè)色軸之其二：藍(lán)-黃，取值范圍均為 -125~125 或 -100%~100%。值為正值，更偏黃；為負(fù)值，更偏藍(lán)。
.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);
/* 后兩個(gè)參數(shù)為none是可表示純灰度 */
--empty-channels-white:lab(100 none none);
--empty-channels-black:lab(none none none);
}
lch使用的維度分別是：
?L：lightness，視覺(jué)上線性漸變的亮度，取值范圍0~100或0%~100%；
?C：chroma，顏色的純度，類似于飽和度，取值范圍0~230，但實(shí)際上，這個(gè)值是沒(méi)有上限的；
?H：hue，色相，類似hsl和hwb，是個(gè)角軸，取值范圍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);
/* 后兩個(gè)參數(shù)為none是可表示純灰度 */
--empty-channels-white:lch(100 none none);
--empty-channels-black:lch(none none none);
}
?oklab是校正版的lab，優(yōu)化了圖片處理質(zhì)量，在CSS中意味著漸變優(yōu)化和顏色處理函數(shù)優(yōu)化，消除了色相偏移（hue shift，即在lab中改變顏色純度，色相也會(huì)變化），使用的維度和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);
/* 后兩個(gè)參數(shù)為none是可表示純灰度 */
--empty-channels-white:oklab(100 none none);
--empty-channels-black:oklab(none none none);
}
??相應(yīng)的，oklch是lch的校正版，取色的邏輯和hsl類似，在圓色盤(pán)中選擇一個(gè)角度從而選中一個(gè)色相，再通過(guò)調(diào)節(jié)亮度和純度，也就是hsl中的飽和度，純度和飽和度基本可認(rèn)為是等價(jià)的，區(qū)分僅在于純度和亮度的調(diào)節(jié)通常是同步進(jìn)行的，否則純度很容易超出目標(biāo)色域的范圍。這里有一個(gè)oklch的拾色器，可以體驗(yàn)下。
.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);
/* 后兩個(gè)參數(shù)為none是可表示純灰度 */
--empty-channels-white:oklch(100 none none);
--empty-channels-black:oklch(none none none);
}
?除了新增的一些取色方法外，新標(biāo)準(zhǔn)還有一個(gè)混色函數(shù)，可以將上邊提到的各種不同色彩空間的中顏色進(jìn)行混合計(jì)算出新顏色。
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])
?參數(shù)method：指定混色的色彩空間，以 in <color space> 的形式，<color space>包含：srgb,srgb-linear,lab,oklab,xyz,xyz-d50, xyz-d65,hsl,hwb,lch, oroklch
?參數(shù)color1、color2：為對(duì)應(yīng)method中指定色彩空間中的任一顏色；
?參數(shù)p1、p2：為可選參數(shù)，取值范圍為0%~100%，可以指明混色的比例，如果為空，默認(rèn)color1和color2各為50%；
在我們應(yīng)用一項(xiàng)新語(yǔ)法時(shí)，我們通常會(huì)有兩種策略：優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)，具體實(shí)施方案：
這種實(shí)施起來(lái)比較簡(jiǎn)單，即同時(shí)使用新舊取色方法，讓瀏覽器自動(dòng)判斷展示哪種
/* 原代碼 */
color: red;
color:color(display-p3 1 0 0);
/* 如果瀏覽器不支持display-p3，則會(huì)只解析第一行 */
color: red;
/* 如果瀏覽器支持，則會(huì)最終使用第二行 */
color:color(display-p3 1 0 0);
使用@supports和@media先判斷當(dāng)前瀏覽器是否支持新的色域標(biāo)準(zhǔn)，并在條件的情況下提供新的色值。
?dynamic-range：取值standard或high，用于判斷當(dāng)前硬件設(shè)備是否支持高清、高對(duì)比度、高色彩精度，不過(guò)這一屬性判斷的比較籠統(tǒng)，并不能準(zhǔn)確判斷瀏覽器是否支持新色域和色彩空間。
@media(dynamic-range: high){
/* safe to use HD colors */
color: color(display-p3 34% 58% 73%);
}
?color-gamut：取值 srgb、p3 或 rec2020，對(duì)應(yīng)可判斷用戶設(shè)備是否支持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()方法來(lái)進(jìn)行媒體查詢。
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判斷某個(gè)css方法或?qū)傩允欠裰С?/span>
@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);
}
在實(shí)際應(yīng)用中，在新舊標(biāo)準(zhǔn)過(guò)渡期間，可以綜合使用上邊的查詢方法，下面是一個(gè)兼容新舊標(biāo)準(zhǔn)的實(shí)例：
:root{
--neon-red:rgb(100% 0 0);
--neon-blue:rgb(0 0 100%);
}
/* 設(shè)備是否支持展示高清 */
@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瀏覽器的話，就能發(fā)現(xiàn)DevTools里的拾色器已經(jīng)支持了CSS Color 4中的新語(yǔ)法，點(diǎn)擊頁(yè)面元素中的顏色屬性，在彈出的拾色器中，中間色值右側(cè)的箭頭，之前的版本中，點(diǎn)擊箭頭是在hex、rgb、hsl和hwb之間切換，但新版本中，點(diǎn)擊箭頭會(huì)出現(xiàn)下拉框，可以看到所有新增的色彩空間和方法，以及當(dāng)前色值所對(duì)應(yīng)的可替換色值。
??同時(shí)在選擇了不同的色彩空間后，色彩的可調(diào)節(jié)參數(shù)也會(huì)相應(yīng)改變。
??當(dāng)我們選擇了一個(gè)非sRGB色域的色值后，會(huì)發(fā)現(xiàn)拾色器的上方區(qū)域里會(huì)展示一條sRGB的分界線，可以清晰地看出當(dāng)前選擇的顏色所在的色域。這能幫助開(kāi)發(fā)者分辨高清色與非高清色。
??而當(dāng)我們選擇一個(gè)超出sRGB范圍的顏色后，再來(lái)點(diǎn)擊色值右側(cè)的箭頭彈出選項(xiàng)列表時(shí)，會(huì)發(fā)現(xiàn)sRGB色域下的色值后邊會(huì)帶上一個(gè)三角嘆號(hào)。這說(shuō)明當(dāng)前色值已超出了sRGB所能描述的范圍，只能使用相近的顏色作為替代。
??關(guān)于chrome DevTools更多關(guān)于高清顏色的更新，可參閱官方文檔。
sRGB之外的色域和色彩空間目前雖然還剛剛在web端起步，但未來(lái)的設(shè)計(jì)和開(kāi)發(fā)要求可能會(huì)慢慢出現(xiàn)，尤其是H5動(dòng)畫(huà)、游戲、3D圖像等等，對(duì)于色彩顯示的要求不會(huì)永遠(yuǎn)停留在sRGB階段，希望本文簡(jiǎn)陋的介紹能讓大家多少開(kāi)始了解一些關(guān)于色彩的東西。如有錯(cuò)誤或疏漏，歡迎指正討論。
參考文章：
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
作者：京東科技 鄭莉
來(lái)源：京東云開(kāi)發(fā)者社區(qū) 轉(zhuǎn)載請(qǐng)注明來(lái)源
次要選擇顏色的時(shí)候，我總是會(huì)從眾多配色工具找一兩個(gè)自己喜歡的，無(wú)論從中尋找靈感或挑選合適的顏色都很好用，例如：Coolors快速選色器，后來(lái)改版后界面稍微有變得復(fù)雜一些;另外還有Colordot更人性化的選色工具服務(wù)，在移動(dòng)鼠標(biāo)搖標(biāo)時(shí)輕松找出配色靈感;我也喜歡NIPPON COLORS代表日本的250種顏色，這是找尋日本傳統(tǒng)色系配色的絕佳網(wǎng)站。
越簡(jiǎn)單的工具越深得我心，至少可快速解決問(wèn)題而不用花太多時(shí)間摸索，本文要推薦的「ColorSpark」是一款非常易用的選色器，開(kāi)啟網(wǎng)站按下「生成」按鈕，每次都會(huì)隨機(jī)出現(xiàn)一種顏色，同時(shí)也會(huì)顯示十六進(jìn)制顏色代碼可快速?gòu)?fù)制。
除此之外，ColorSpark還提供漸層色（梯度）產(chǎn)生器，之前在WebGradients和CoolHue有介紹過(guò)收錄漸層背景免費(fèi)下載的網(wǎng)站，現(xiàn)在你也可以在這項(xiàng)服務(wù)上隨機(jī)產(chǎn)生漸層色，一鍵快速?gòu)?fù)制CSS3語(yǔ)法，將它加入你的網(wǎng)站設(shè)計(jì)。
站點(diǎn)名稱：ColorSpark
網(wǎng)站連接：HTTPS：//colorspark.app/
使用教學(xué)
步驟1
開(kāi)啟ColorSpark會(huì)隨機(jī)出現(xiàn)一個(gè)顏色，下方會(huì)有十六進(jìn)制色碼，點(diǎn)選「生成」重新產(chǎn)生一個(gè)顏色，每個(gè)顏色之間沒(méi)什么關(guān)連，可以多按幾次看看有沒(méi)有讓自己賞心悅目的顏色。
STEP 2
點(diǎn)選上方的「漸變」切換成漸層色模式，會(huì)顯示兩種顏色及偏移角度。
點(diǎn)擊右下角的「復(fù)制CSS」可快速?gòu)?fù)制CSS3代碼，將它放進(jìn)CSS檔就能成為背景顏色使用。當(dāng)然還有其他使用方法，可以自己研究一下語(yǔ)法，總之ColorSpark主要用途就是讓使用者找到配色靈感。
STEP 3
此外，ColorSpark還提供夜間模式，從右上角點(diǎn)選月亮圖標(biāo)切換，夜間模式底色會(huì)變深色，但功能一樣沒(méi)變，蠻有趣的功能。
依照ColorSpark說(shuō)明表示這項(xiàng)服務(wù)是為了讓設(shè)計(jì)師找到獨(dú)特的顏色和漸層組合，通過(guò)這個(gè)可產(chǎn)生隨機(jī)顏色和漸變顏色的工具，可以找到一些原本不知道的顏色，這是一個(gè)有趣的實(shí)驗(yàn)，或許可以為你的下一個(gè)設(shè)計(jì)項(xiàng)目激發(fā)出靈感。
67運(yùn)營(yíng)推薦值得一試的三個(gè)理由：
1、可隨機(jī)產(chǎn)生顏色或漸層色組合
2、 一鍵復(fù)制十六進(jìn)制色碼或CSS3代碼
3、 界面簡(jiǎn)單易用，內(nèi)置夜間模式降低亮度
首先查看預(yù)覽圖:
多彩方塊
inherit 關(guān)鍵字使得元素獲取其父元素的計(jì)算值。它可以應(yīng)用于任何 CSS 屬性，包括 CSS 簡(jiǎn)寫(xiě) all。對(duì)于繼承屬性，inherit 關(guān)鍵字只是增強(qiáng)了屬性的默認(rèn)行為，通常只在覆蓋原有的值的時(shí)候使用。繼承始終來(lái)自文檔樹(shù)中的父元素，即使父元素不是包含塊。
線性漸變由一個(gè)軸 (梯度線) 定義，其上的每個(gè)點(diǎn)具有兩種或多種的顏色，且軸上的每個(gè)點(diǎn)都具有獨(dú)立的顏色。為了構(gòu)建出平滑的漸變，linear-gradient() 函數(shù)構(gòu)建一系列垂直于漸變線的著色線，每一條著色線的顏色則取決于與之垂直相交的漸變線上的色點(diǎn)。
用法：
// 漸變軸從左上角出發(fā)并且呈 45 度。
background: linear-gradient(45deg, red, blue);CSS偽元素::after用來(lái)創(chuàng)建一個(gè)偽元素，作為已選中元素的最后一個(gè)子元素。通常會(huì)配合content屬性來(lái)為該元素添加裝飾內(nèi)容。這個(gè)虛擬元素默認(rèn)是行內(nèi)元素。
.content-item::after {
content: "";
width: 280px;
height: 280px;
/* 獲取其父元素的計(jì)算值 */
background: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(20px) brightness(80%);
z-index: -1;
}在該程序中調(diào)用了2個(gè)函數(shù)： blur(20px) brightness(80%);
至于代碼中還有其他知識(shí)點(diǎn)，也就是 margin 、position 等基礎(chǔ)內(nèi)容了。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>陰影和背景一致</title>
<style>
.content-item {
position: relative;
width: 260px;
height: 260px;
border-radius: 10px;
/* background: linear-gradient(90deg, #e66465, #9198e5); */
background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
margin: 100px auto;
}
.content-item::after {
content: "";
width: 280px;
height: 280px;
/* 獲取其父元素的計(jì)算值 */
background: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(20px) brightness(80%);
z-index: -1;
}
</style>
</head>
<body>
<div class="content">
<div class="content-item"></div>
</div>
</body>
</html>css 設(shè)置盒子陰影，陰影和背景圖保持一致_css filter 陰影色和背景色一致_隨憶~的博客-CSDN博客
歡迎收藏該文章！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
