我有機會編輯了CSS-Tricks Almanac的許多新顏色條目。我們已經(jīng)發(fā)布了一些有關途徑的信息，包括有關顏色功能的完整指南：

• 顏色（）
• HSL（）
• 實驗室（）
• lch（）
• oklab（）
• 俄克利（）
• RGB（）

我必須承認：我對CSS的顏色不了解很多（我仍然使用了RGB（），這顯然不再是Cool People所做的），因此這是一種有趣的學習經(jīng)歷。我在嘗試跟上所有這些新信息時注意到的一件事是，色彩表的詞彙表佔多長時間，尤其是“顏色”概念。有“顏色空間”，“彩色模型”，“顏色範圍”，基本上是“顏色”的東西。

它們都是有些相關的，當您在CSS中使用顏色時，尤其是最近發(fā)貨的新顏色功能，例如Contrast-Color（）和color-mix（）時，它可能會令人困惑。因此，我想在第一次聽到每個概念時都能做到我希望擁有的詞彙表，並且任何人都可以在忘記哪種特定的“顏色”的事情時檢查一下。

作為免責聲明，我不會在這篇文章中解釋顏色，或者俱體說明顏色繁殖。對於像我這樣的凡人來說，這可能是不可能的。取而代之的是，我想為您提供足夠大的圖片，以了解CSS中顏色背後的一些技術，以便您使用likeLab（）oroklch（）的功能感到自信，同時也了解使它們與眾不同的是什麼。

什麼是顏色？

讓我們先放慢腳步。為了理解顏色的所有內(nèi)容，我們首先需要了解所有內(nèi)容的顏色。

雖然考慮物體是某種顏色很有用的（注意紅色的汽車或剪裁白色的電纜?。伾皇俏矬w的物理特性，甚至不是有形的東西。是的，我們可以將光描述為顏色¹的主要原因，但是直到可見光進入我們的眼睛，我們的大腦才能理解顏色。正如Byelle Stone所說：

光波在世界上存在，但是顏色發(fā)生在光波與眼睛，大腦和思想之間的相互作用中。

即使顏色不是物理上的東西，我們?nèi)匀幌ＭM可能可靠地複制它，尤其是在數(shù)字時代。如果我們拍了一張美麗的百合花（例如我的桌子上的一束），然後在屏幕上顯示它，我們希望在圖像和現(xiàn)實中看到相同的顏色。但是，這裡的“現(xiàn)實”是一個誤導性的術語，因為顏色的現(xiàn)實再次取決於觀眾。為了解決這個問題，我們需要了解光波長（可以測量和可複制的東西）如何在觀眾中產(chǎn)生不同的顏色響應（這不是那麼可測量）。

幸運的是，這項任務已經(jīng)由國際照明委員會（CIE，法國名稱）進行。我希望我能介紹實驗的細節(jié)，但是我們還沒有進入我們的第一個顏色。重要的是，從這些測量值中，CIE能夠?qū)⑺锌梢姷念伾成涞狡胀ㄈ耍ㄔ趯嶒炛校┮怨獠ㄩL，並僅用三個值描述它們。

最初，這三個主要值對應於實驗中使用的紅色，綠色和藍色波長，它們構成了CIERGB顏色空間，但研究人員注意到某些顏色需要負波長²才能表示可見的顏色。為了避免這種情況，在原始的CIERGB上進行了一系列轉(zhuǎn)換，所得的顏色空間稱為Ciexyz。

這個新的顏色空間還具有三個值，x和z代表顏色的色彩，而y表示其亮度。由於它具有三個軸，因此可以形成3D形狀，但是如果我們將其切成薄片，以使其亮度相同，那麼在您可能以前可能看到的圖形中，我們會獲得給定亮度的所有可見顏色。

這被稱為XY色度圖，使人眼可見所有可見的顏色（基於CIE 1931實驗中的平均觀眾）。形狀內(nèi)部的顏色被認為是真實的，而外部的顏色被認為是虛構的。

顏色空間

最後解釋的目的是到達ciexyzcolor spaceconcept，但是“色彩空間”到底是什麼？為什麼Ciexyz的色彩空間如此重要？

Ciexyz顏色空間是從普通人眼可見的所有顏色的映射到3D坐標系，因此我們只需要三個值來定義顏色。然後，可以將顏色空間視為顏色的一般映射，而無需包含每個可見顏色，並且通常也通過三個值來定義。

RGB顏色空間

最著名的顏色空間是RGB顏色空間（請注意複數(shù)）。您可能會從名稱中猜出，在這裡，我們只需要紅色，綠色和藍色的量即可描述一種顏色。為了描述RGB色彩空間，我們只需要定義其“最紅”，“最綠色”和“最藍”值³ 。如果我們使用從0到1的坐標來定義RGB顏色空間中的顏色，則：

• （1，0，0）表示最紅色的顏色。
• （0，1，0）表示最綠色的顏色。
• （0，0，1）表示最藍的顏色。

但是，“最紅”，“最藍”和“最綠色”只是顏色的任意描述。使顏色成為“最藍”的原因取決於每個人。例如，您認為最藍的顏色中有哪種顏色？

您可以猜到，諸如“ Bluest”之類的東西是令人震驚的描述。幸運的是，我們只需要回頭看看Ciexyz的色彩空間即可 - 非常有用！在這裡，我們可以定義我們認為最紅色，最綠和最藍色的顏色，就像XY色度圖內(nèi)的坐標一樣。這就是創(chuàng)建RGB色彩空間的全部，以及為什麼有這麼多的！

在CSS中，最常用的色彩空間是標準RGB（SRGB）顏色空間，正如您在上一張圖像中看到的那樣，它會留下很多顏色。但是，在CSS中，我們可以通過TheColor（）功能，例如Asdisplay-P3，Prophoto-RGB，AndRec2020使用現(xiàn)代RGB顏色空間。

請注意，先知RGB的色彩空間是如何擺脫可見顏色的。沒關係。外面的顏色被夾?。凰鼈儾皇切碌幕蚩床灰姷念伾?/p>

在CSS中，除SRGB外，我們還有兩個顏色空間：Cielab色彩空間和俄克拉邦顏色空間。幸運的是，一旦我們了解了Ciexyz的色彩空間，那麼這兩個應該更容易理解。接下來讓我們深入研究。

Cielab和俄克拉啤酒顏色空間

正如我們之前所看到的，SRGB色彩空間缺乏普通人眼可見的許多顏色。而且，隨著現(xiàn)代屏幕在顯示更多顏色方面變得更好，CSS需要採用更新的顏色空間來充分利用這些新的顯示器。這不是SRGB的唯一問題 - 它也缺乏感知統(tǒng)一性，這意味著顏色的色彩變化也會改變其感知的輕度。例如，Adam Argyle的ThisDemo：

Cie Cielab於1976年創(chuàng)建的Ciexyz，也源自Ciexyz，還涵蓋了人眼可見的所有顏色。它與三個坐標合作：lfor感知輕度，在紅綠色的量和b*的顏色中的黃藍色量。

它比SRGB具有更好的感知均勻性，但它仍然並不完全統(tǒng)一，尤其是在涉及藍色的梯度中。例如，在以下白色到藍色梯度中，Cielab向紫色轉(zhuǎn)移。

作為最終的進步，Bj?rnOthossonCame與俄克拉邦的顏色空間相處，該空間還可以使人眼可見所有顏色，同時保持更好的感知均勻性。俄克拉荷馬州還使用Threel*a*b*坐標。多虧了所有這些改進，這是我最近嘗試使用的顏色空間。

顏色模型

當我了解這些概念時，了解顏色空間後我最大的挑戰(zhàn)並沒有使它們與顏色模型和顏色範圍混淆。這兩個概念雖然與顏色空間互補且密切相關，但並不相同，因此在學習顏色時，它們是一個常見的陷阱。

顏色模型是指顏色通過數(shù)字的數(shù)學描述，通常涉及三個數(shù)字，但是在我們將它們與顏色空間配對之前，這些值不會給我們確切的顏色。例如，您知道在RGB顏色模型中，我們通過三個值來定義顏色：紅色，綠色和藍色。但是，直到我們將其匹配到RGB顏色空間（例如SRGB訪問Display-p3）時，我們才有顏色。從這個意義上講，顏色空間可以具有多種顏色模型，例如使用RGB，HSL和HWB的SRGB。同時，可以在幾個顏色空間中使用顏色模型。

我發(fā)現(xiàn)了許多文章和教程，其中“顏色空間”和“彩色模型”可互換使用。有些地方是它們對顏色空間和模型的定義與此處提供的定義不同。例如，Chrome'shigh定義CSS COLILEDERES將CSS的RGB和HSL定義為不同的顏色空間，而Mdn'scolor Space Entrydoes將RGB和HSL定義為SRGB顏色空間的一部分。

就個人而言，在CSS中，我發(fā)現(xiàn)更容易理解RGB，HSL和HWB作為訪問SRGB顏色空間的不同模型。

顏色域

顏色範圍更簡單地解釋。您可能已經(jīng)註意到我們是如何談論的顏色空間比另一種顏色更多的，但是說它的顏色“更寬”範圍是正確的，因為顏色範圍是顏色空間中可用的顏色。但是，顏色域不僅受顏色空間邊界的限制，而且還受物理限制的限制。例如，較舊的屏幕可能會減少顏色範圍，因為它無法在給定的顏色空間中顯示每種顏色。在這種情況下，無法表示顏色（由於物理限製或在顏色空間本身之外），據(jù)說它是“範圍之外的”。

顏色功能

在CSS中，唯一可用的顏色空間用於SRGB。如今，我們可以通過各自的顏色功能與許多現(xiàn)代顏色空間合作。作為快速參考，CSS中的每個顏色空間都使用以下功能：

• SRGB：我們可以使用ol'十六進制符號（命名顏色）和thergb（），rgba（），hsl（），hsla（），hsla（）andhwb（）函數(shù)在SRGB中工作。
• Cielab：在這裡，我們有用於極地坐標的笛卡爾坐標和載坐標（）的Thelab（）。
• 俄克拉荷馬州：類似於Cielab，我們的笛卡爾坐標andoklab（）andoklch（）用於極性坐標。
• 通過thecolor（）和顏色 - 粘合（）。在這三個顏色空間之外，我們可以使用thecolor（）和顏色 - 粘合（）功能使用更多顏色。具體而言，我們可以使用RGB顏色空間：RGB線性，Display-P3，A98-RGB，Prophoto-RGB，REC2020和XYZ顏色空間：XYZ，XYZ-D50，ORXYZ-D65。

tl; dr

1. 顏色空間是可用顏色和坐標系之間的映射。在CSS中，我們有三個主要的顏色空間：SRGB，Cielab和Oklab，但可以通過TheColor（）函數(shù)訪問更多空間。
2. 顏色模型用數(shù)量的顏色定義顏色，但是在我們將它們與顏色空間配對之前，它們不會為我們提供有關實際顏色的信息。例如，RGB模型在分配RGB顏色空間之前並不意味著任何意義。
3. 在大多數(shù)情況下，我們想談論一個顏色空間所具有多少顏色，因此我們將術語“顏色域”用於任務。但是，顏色域也與相機/顯示器的物理限制有關。顏色可能是不及格的，這意味著它不能在給定的顏色空間中表示。
4. 在CSS中，我們可以通過顏色功能訪問所有這些顏色空間，其中有很多。
5. Ciexyz的顏色空間對於定義其他顏色空間，描述其範圍並在它們之間進行轉(zhuǎn)換非常有用。

參考

• XYZ，RGB，ICC，XYY和TRC（Elle Stone）的完全無痛的程序員指南（Elle Stone）
• 彩色空間（Bartosz Ciechanowski）
• CIE XYZ和XYY顏色空間（Douglas A. Kerr）
• 從個人項目到行業(yè)標準（Bj?rnOttosson）
• 高清CSS彩色指南（Adam Argyle）
• 顏色空間：從頭開始解釋（視頻技術解釋）
• 彩色空間（MDN）
• 是什麼使色彩空間表現(xiàn)得很好？ （Elle Stone）

腳註

¹光是顏色的主要原因，但是顏色可以由光線以外的其他東西創(chuàng)造。例如，摩擦閉合的眼睛會機械刺激視網(wǎng)膜，從而在陳述磷光的情況下產(chǎn)生顏色。 ??

²如果負面的燈光也使您撓頭，以及有關如何創(chuàng)建Ciexyz顏色空間的更多信息，我強烈推薦Douglas A. Kerr Cie Xyz和Xyy Color Spaces Paper。 ??

³我們還需要定義最暗的深色（“黑色”）和最淺的淺色（“白色”）。但是，forwell-behavedColor空間，這兩個可以從最紅色，藍色和最綠色的顏色中抽像出來。 ??

以上是在CSS中塗上所有內(nèi)容的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！