4個新CSS顏色功能的預覽

本文探討了CSS 顏色領域的最新變化和未來可能出現的變化，內容之多令人驚訝。定義顏色的新方法和即將出現的方法，數量之多甚至超過了現有方法。讓我們快速瀏覽一下。

首先，需要強調的是，這些內容非常複雜。我本人也難以完全理解。但以下是一些要點：

• 在所有即將到來的變化之前，我們只有RGB 作為顏色模型，所有內容都以此為基礎。
• 我們有不同的“顏色空間”來以不同的方式處理它（例如，rgb() 函數將RGB 顏色模型映射為具有線性坐標的立方體，hsl() 函數將RGB 顏色模型映射為圓柱體），但它們都屬於sRGB 色域。
• 隨著即將到來的變化，我們將獲得新的顏色模型，並且(!) 我們將獲得以不同方式映射該顏色模型的新函數。所以我認為這是一種雙重甚至三重打擊。

我無法向您詳細解釋所有細節——我寫這篇文章是因為我相信很多人和我一樣，想知道為什麼我們應該關心這些，而這是我試圖理解為什麼我應該關心所有這些。

Display-P3 開啟了更多以前無法表達的鮮豔色彩。

 body {
  background: color(display-p3 1 0.08 0); /* 超級紅色！ */
}

事實證明，現代顯示器可以顯示更多顏色，特別是額外的鮮豔顏色，但我們只是沒有辦法使用經典的CSS 顏色語法（如HEX、RGB 和HSL）來定義這些顏色。非常奇怪，對吧？ ！但是如果您使用Display-P3，您可以更廣泛地訪問這些鮮豔的色彩。

開發公司Panic 很早就注意到了這一點，並開始將這些顏色用作“秘密武器”：

? 除了WebGL 之外，p3 顏色現在也是Panic 網站秘密武器堆棧的重要組成部分。噓，別告訴任何人，你應該在iMac Pro 屏幕上查看此頁面！ https://www.php.cn/link/f08c64512c2ce6b9642b58563e9c029b

— Panic (@panic) 2019 年5 月24 日

Jen Simmons 還介紹瞭如何使用它們，包括針對不支持的瀏覽器的後備方案：

Display P3 顏色。在瀏覽器中設計。太棒了。

讓我向您展示如何切換到P3，找到一種顏色，然後為舊版瀏覽器找到一種後備顏色。所有操作都在Safari Web Inspector 中進行。 （打開聲音收聽我的解釋！）pic.twitter.com/AaKhrn2s3e

— Jen Simmons (@jensimmons) 2022 年1 月5 日

資源

• 使用Display-P3 的CSS 寬色域顏色（WebKit 博客）
• 網絡上不斷擴展的色彩色域（Ollie Williams）

HWB 更“人性化”，但這有點值得商榷，它仍然基於sRGB。

我以前不知道hwb() 是什麼——感謝Stefan Judis 的博客文章。

我通常認為HSL 是“人性化”的CSS 顏色格式（並且適合程序控制），因為，嗯，操作360° 的色相和0-100% 的飽和度和亮度有一定的明顯意義。

但在hwb() 中，我們有色相(我認為與HSL 相同)，然後是白度和黑度。 Stefan：

向顏色添加白色和黑色會影響其飽和度。假設您向顏色添加相同數量的白色和黑色，顏色色調保持不變，但顏色會失去飽和度。這適用於高達50% 的白色和50% 的黑色(hwb(0deg 50% 50%))，這會導致非彩色顏色。

Stefan 對這是否比HSL 更容易理解表示懷疑，我傾向於同意。我可能只需要更多地習慣它，但它似乎比簡單地改變亮度或飽和度更抽象。

HWB 僅限於與所有舊顏色格式相同的色域(sRGB)。這裡沒有解鎖新的顏色。

資源

• HWB 顏色選擇器
• hwb() – 人性化的顏色表示法？ （Stefan Judis）

LAB 就像一個更廣泛色域的rgb()

 div {
  background: lab(150% -400 400);
}

當我四處詢問時，我喜歡Eric Portis 對LAB 的解釋：

LAB 就像RGB 一樣，它有三個線性分量。數字越低表示該事物越少，數字越大表示該事物越多。因此，您可以使用LAB 指定有史以來最亮、最綠的綠色，它對每個人來說都將非常明亮和綠色，但在色域更廣的顯示器上會更亮更綠。

因此，我們獲得了所有額外的顏色，這很棒，但sRGB 有另一個問題（除了顏色表達有限之外），那就是它不是感知上統一的。 Brian Kardell：

sRGB 空間並非感知上統一。相同的數學移動在顏色空間中的不同位置具有不同程度的感知效果。如果您想閱讀設計師對此的體驗，這裡有一個有趣的例子，它很好地說明了努力做得好的過程。

這裡的經典例子是，在HSL 中，具有完全相同“亮度”的顏色實際上感覺完全不同。

HSL 與LAB:: 亮度?

來自我們棘手的顏色投票的相同顏色，但這次我顯示了相同顏色的LAB 版本。請注意LAB 的亮度值與我們投票的結果有多接近！

? 顏色空間並非都相同！ https://www.php.cn/link/ff15242553d87dd31723dcd88a087382 pic.twitter.com/xkEguq3KZG

— Adam Argyle (@argyleink) 2019 年12 月3 日

但在LAB 中，顯然它是感知上統一的，這意味著以編程方式操作顏色是一項更合理的任務。另一個好處是LAB 顏色被指定為設備無關的。 Michelle Barker：

LAB 和LCH 在規範中被定義為設備無關的顏色。 LAB 是一個可以在Photoshop 等軟件中訪問的顏色空間，如果您希望屏幕上的顏色與例如印在T 恤上的顏色相同，則建議使用它。

資源

• lab() (MDN)
• 使用RGB、HSL、HWB、LAB 和LCH 的現代CSS 顏色的指南（Michelle Barker）

LCH 就像一個更廣泛色域的hsl()

還記得我說過HSL 是“人性化”的，因為它比RGB 更容易理解嗎？更改色相、飽和度和亮度很有邏輯意義。 lch() 類似於此，我們有亮度、彩度和色相。回到我和Eric Portis 的談話：

LCH 更像HSL：一個極坐標空間。 H = 色相= 一個圓。因此，進行數學運算以選擇互補色（或您追求的任何變換）變得微不足道（只需添加180——或任何其他值！）

我想您會選擇LCH，只是因為您喜歡它的語法，或者因為它使您嘗試執行的一些複雜程序化操作更容易——並且您知道它可以免費表達50% 以上的顏色。

我們在這裡也獲得了感知上的統一性。 Lea Verou 似乎很興奮亮度實際上會有意義：

在HSL 中，亮度毫無意義。顏色可以具有相同的亮度值，但感知亮度卻大相徑庭。 […] 使用LCH，任何具有相同亮度的顏色在感知上都同樣明亮，任何具有相同彩度的顏色在感知上都同樣飽和。

新模型的另一個好處是，我們可以擺脫CSS 顏色漸變中的“灰色死區”。我認為由於這種感知統一性，兩種豐富的顏色不會變得古怪並在非豐富區域自行漸變。

這是一個小小的個人預測：我會說lch() 可能會成為設計師的最愛。很快就會有很多新的顏色選擇，而且總是選擇不同的顏色太困難和奇怪了。 LCH 似乎在心理上最有效。

資源

• lch() (MDN)
• CSS 中的LCH 顏色：什麼、為什麼以及如何？ （Lea Verou）

“確定”

LAB 及其朋友看起來如此新穎，因為它對CSS 來說是新的……但LAB 是在1940 年代發明的。在與Adam Argyle 的談話中，他使用了一個令人難忘的短語：所有顏色空間都有一個阿喀琉斯之踵。也就是說，他們有點不擅長的事情。對於sRGB 來說，是灰色死區問題以及有限的色域。 LAB 很好，但它肯定有其自身的弱點。例如，LAB 中的藍色到白色的漸變會相當笨拙地穿過紫色區域。

2020 年12 月，Björn Ottosson 說：“嘿，一個新的顏色空間剛剛出現”，現在OKLAB 出現了。顯然，CSS 決策者認為該顏色空間的價值足夠高，因此oklab() 和oklch() 已經規範化。我想我們應該關心，因為它們通常更好，但不要引用我說的話。

為什麼Display P3 使用color() 函數而其他函數不使用？

我真的不知道。我認為CSS color() 函數比較新，這就是Safari 最初將其放入其中的方式。我不知道Display P3 是否會獲得其專用的函數，或者我們是否都應該開始使用CSS color()，或者是什麼。

 /* 這是使用Display P3 的方法*/
color(display-p3 1 0.08 0);

/* 但這不起作用*/
color(oklch 42.1% 0.192 328.6);

/* 你必須這樣做?‍♀️ */
oklch(42.1% 0.192 328.6);

/* 但你可以在漸變中使用顏色空間... */
background-image: linear-gradient(
    to right
    in oklch,
    lch(50% 100 100),
    lch(50% 100 250)
  );

相對顏色語法非常有用。

有一種非常酷的功能叫做“相對顏色語法”，您可以基本上解構CSS 顏色，同時將其移動到另一種格式。假設您擁有（顯然）最著名的CSS HEX 顏色，霧狗，並且您想將其轉換為HSL：

 body {
  background: hsl(from #f06d06 hsl);
}

也許這並不立即有用，但是，嘿，現在我們可以向它添加alpha 了！實際上沒有其他方法可以將alpha 應用於現有的HEX 顏色，所以這非常重要：

 body {
  background: hsl(from #f06d06 hsl / 0.5);
}

但我也可以修改它。假設我想在添加不透明度之前稍微飽和霧狗，因為較低的不透明度會自然地使其變暗，我想抵消這一點。我可以在那裡隱含的變量上使用calc()：

 body {
  background: hsl(from #f06d06 h calc(s 20%) l / 0.5);
}

這太酷了。我相信我們會看到一些令人驚嘆的事情由此而來。它當然不限於HSL。我只是使用HSL，因為我現在覺得它很舒服。如果我想，我可以從命名顏色紅色開始，並在LCH 中修改它：

 body {
  background: lch(from red l calc(c 15) h / 0.25);
}

當與自定義屬性一起自由組合時，這些內容將非常有用。

不再有專門用於alpha 的特殊函數了。

需要明確的是：CSS 顏色函數中alpha 值前面沒有逗號——而是一個正斜杠：

 /* 舊的！ */
rgb(255, 0, 0);
rgba(255, 0, 0, 0.5);

/* 新的！ */
rgb(255 0 0);
rgb(255 0 0 / 0.5);
hsl(0deg 40% 40%)
hsl(0deg 40% 40% / 90%) /* 可以是百分比而不是0.9 或其他值*/

/* 新的顏色內容只有單個基本函數，沒有alpha 次要函數*/
lab(49% 39 80)
lab(49% 39 80 / 0.25)

/* Display P3，使用顏色函數，基本上與正斜杠的工作方式相同*/
color(display-p3 1 0.08 0 / 0.25);

你甚至可以定義你自己的CSS 顏色空間。

但我真的無法考慮這個問題。這讓我震驚，對不起。

以上是4個新CSS顏色功能的預覽的詳細內容。更多資訊請關注PHP中文網其他相關文章！