色與單位

背景色

背景色寫法：background-color:顏色;

 background-color:顏色;

為窗口設(shè)置背景色:

 body {
       background-color: chartreuse;
     }

效果：

文翻譯自 Color Formats in CSS，作者：Joshwcomeau。 略有刪改

CSS 中的顏色格式可以采用不同的表示方式，包括常用的十六進(jìn)制、RGB、RGBA、HSL 和 HSLA 等格式。十六進(jìn)制是最常用的格式，使用 6 個(gè)十六進(jìn)制數(shù)字來(lái)表示顏色，例如 #FF0000 表示紅色；RGB 格式使用紅、綠、藍(lán)三個(gè)顏色通道的數(shù)值來(lái)表示顏色，例如 rgb(255,0,0) 也表示紅色；RGBA 格式在 RGB 的基礎(chǔ)上增加了一個(gè)透明度通道，用于控制顏色的不透明度；HSL 格式利用色相、飽和度和亮度三個(gè)參數(shù)來(lái)表示顏色，例如 hsl(0,100%,50%) 表示紅色；而 HSLA 格式則在 HSL 的基礎(chǔ)上增加了一個(gè)透明度通道。選擇和使用這些不同的顏色格式時(shí)，需要考慮實(shí)際需求并進(jìn)行決策。

對(duì)于不同的顏色格式，它們之間存在一些重要的區(qū)別。本文將帶您深入了解這些選項(xiàng)，包括它們的工作原理、如何解析它們以及如何靈活應(yīng)用，以下是原文翻譯。

CSS有很多不同的顏色格式：hex codes，rgb（），hsl（），lch（），等等！

我們應(yīng)該用哪一個(gè)？這似乎是一個(gè)無(wú)關(guān)緊要的決定，但它們之間卻有一些非常重要的區(qū)別。而且，老實(shí)說(shuō)我認(rèn)為我們大多數(shù)人都在優(yōu)先考慮使用錯(cuò)誤的方式。

在本教程中，我將帶您瀏覽不同的選項(xiàng)。我們將看到它們是如何工作的，以及我們?nèi)绾卫盟鼈優(yōu)槲覀兏玫姆?wù)。后面我將向您展示現(xiàn)代CSS如何讓我們?cè)谶x擇正確的顏色格式時(shí)進(jìn)行動(dòng)態(tài)調(diào)整。

命名式顏色名

這并不是一個(gè)真正的顏色格式，但它是一個(gè)很好的開始！

HTML有140種命名顏色。這些是特殊的關(guān)鍵字值，如dodgerblue、hotpink和tomato。

開發(fā)人員Anthony Lieuallen創(chuàng)建了這個(gè)簡(jiǎn)潔的演示，在一個(gè)圓圈中顯示了所有140種命名的Web顏色：

由Anthony Lieuallen創(chuàng)作，MIT許可

當(dāng)你需要一個(gè)占位符顏色時(shí)，命名式顏色名是很好的。例如，如果您正在構(gòu)建原型并需要臨時(shí)值，或者如果您正在編寫教育內(nèi)容。在可讀性方面，沒有什么比color: red更好。

這可能是不言而喻的，實(shí)際開發(fā)中140種顏色是不夠的，通常不會(huì)使用命名的顏色在生產(chǎn)環(huán)境中。

看看這兩種命名的顏色：

“darkgray”實(shí)際上是比“gray”更淺的顏色？ 這是因?yàn)?40種命名的Web顏色來(lái)自不同的地方，包括HTML4規(guī)范，X11 Unix窗口系統(tǒng)等。這是一個(gè)不同調(diào)色板的大雜燴，沒有一個(gè)好的規(guī)范約束。

RGB

這是我們的第一個(gè)“真實(shí)的”顏色格式。以下是我們?nèi)绾问褂盟?/span>

color: rgb(255 0 0);

對(duì)應(yīng)顯示的樣式如下：

像大多數(shù)顏色格式一樣，rgb是一個(gè)縮寫。它代表綠色藍(lán)。

在我們今天要學(xué)習(xí)的所有顏色格式中，rgb是最不抽象的。你的電腦/手機(jī)顯示屏實(shí)際上只是數(shù)百萬(wàn)個(gè)微小的紅色、綠色和藍(lán)色LED的集合，它們被組裝成像素。因此，rgb顏色格式允許我們直接調(diào)整這些燈光的亮度。

每個(gè)值（紅色、綠色、藍(lán)色）被稱為通道。每個(gè)通道從0到255。通過(guò)將這些通道以不同的量混合，我們可以創(chuàng)造超過(guò)1600萬(wàn)種不同的顏色。

RGB顏色的巧妙之處在于它是基于光的物理學(xué)。我們可以混合紅色、綠色和藍(lán)色光來(lái)創(chuàng)造任何顏色。把它們調(diào)到255，我們得到白色。把它們都設(shè)為0，剩下黑色。

rgb color格式還允許我們?yōu)閍lpha通道指定第四個(gè)可選值，以控制透明度：

background: rgb(255 0 0 / 0.5);

以上代碼設(shè)置了紅色50%的透明度，最終的樣式的如下：

Alpha通道的范圍從0（完全不可見）到1（完全不透明）。介于兩者之間的任何東西都會(huì)產(chǎn)生半透明的顏色。

十六進(jìn)制顏色

這可能是網(wǎng)絡(luò)上最常用的顏色格式。它看起來(lái)像這樣：

color: #FF0000;

它的工作原理如下：6位十六進(jìn)制碼包含三個(gè)2位值，每個(gè)通道一個(gè)值（紅/綠色/藍(lán)）。它不使用10位十進(jìn)制系統(tǒng)，而是使用16位十六進(jìn)制系統(tǒng)。

以下圖示可以更加了解十六進(jìn)制代碼的工作原理（原文可拖動(dòng)滑塊實(shí)時(shí)更新顏色）：

基本上，十六進(jìn)制代碼與RGB值相同。在這兩種情況下，我們都為紅色、綠色和藍(lán)色提供了一個(gè)值。 background: #FFFF0080; 在十進(jìn)制系統(tǒng)中，一個(gè)兩位數(shù)的值可以包含100個(gè)可能的值（10 × 10）。如果是十六進(jìn)制，則總數(shù)為256（16 × 16）。因此，它實(shí)際上就像rgb()一樣，我們?yōu)槊總€(gè)R/G/B通道指定一個(gè)介于0和255之間的值。

還有個(gè)有趣的事實(shí)如果我們想包含一個(gè)alpha通道，我們可以傳遞一個(gè)八位十六進(jìn)制代碼：

background: #FFFF0080;

代碼效果圖：

在本例中，我們指定80作為alpha通道，相當(dāng)于十進(jìn)制系統(tǒng)中的128。因此，這個(gè)盒子是50%不透明的。

8位十六進(jìn)制代碼在現(xiàn)代瀏覽器中得到了廣泛應(yīng)用，全球支持率達(dá)到96％，IE瀏覽器不支持。

HSL

到目前為止，我們看到的兩種顏色格式都是基于相同基本思想的不同“包裝器”：傳遞紅/綠色/藍(lán)通道的特定值。

但這并不是思考顏色的唯一方式！讓我們來(lái)看看一個(gè)完全不同的顏色格式：HSL。

讓我們從顏色選擇器開始：

這個(gè)顏色選擇器可能感覺更熟悉。它類似于圖形設(shè)計(jì)軟件中使用的圖形設(shè)計(jì)軟件，如Figma或Photoshop。

此顏色格式采用3種不同的值：

• H 色相：這是我們要用的顏色，有效值的范圍是0到360。我們以度為單位指定它，因?yàn)榭潭仁菆A形的（0度和360度表示相同的紅色色相）。
• S 飽和度：有效值的范圍為0%到100%。在0%時(shí)，顏色中沒有色，完全是灰度級(jí)的。在100%，顏色盡可能鮮艷。
• L 亮度：顏色有多淺/多深？有效值的范圍為0%到100%。在0%時(shí)，顏色是漆黑的。在100%時(shí)，顏色為純白色。

這往往是一個(gè)非常直觀的方式來(lái)思考顏色。我們沒有直接控制R/G/B光值，而是轉(zhuǎn)向了更高層次的抽象，這與人類通常對(duì)顏色的看法更接近。

css中使用hsl：

background: hsl(0deg 100% 50% / 0.5);

現(xiàn)代色彩格式

所以，我們到目前為止看到的所有顏色格式都已經(jīng)存在了很多很多年。HSL甚至早在Internet Explorer 9（2011年發(fā)布）中就支持了！

最近我們?cè)贑SS中得到了一些新的顏色格式。它們很有吸引力。讓我們談?wù)勊麄儭?/span>

Display P3

這篇文章是關(guān)于顏色格式，我們用來(lái)指定顏色的語(yǔ)法。到目前為止，我們看到的所有真彩色格式 rgb()、十六進(jìn)制代碼和hsl() 都是由“標(biāo)準(zhǔn)RGB顏色空間”（通常縮寫為sRGB）所約束的。

sRGB中有數(shù)百萬(wàn)種可能的顏色，但它并沒有接近捕捉人眼能夠看到的全部顏色范圍。

請(qǐng)看下面兩個(gè)紅色方塊：

左邊的顏色是rgb(255 0 0)。它是sRGB顏色空間中最紅的紅色。然而，在右邊，我使用的是P3顏色空間。更紅了！（這兩個(gè)方塊看起來(lái)很有可能是一樣的。如果是這樣，這可能意味著您的顯示器或?yàn)g覽器不支持寬色域顏色格式）

P3擴(kuò)展了標(biāo)準(zhǔn)的sRGB色彩空間，使我們能夠獲得更明亮，更鮮艷的色彩。如下圖所示：

不幸的是，在CSS中，顏色空間與顏色格式相關(guān)聯(lián)。如果我選擇使用rgb()語(yǔ)法（或十六進(jìn)制代碼，或hsl()），我只能在sRGB顏色空間中指定顏色。

因此，如果我們想使用P3顏色，我們需要使用不同的顏色格式。語(yǔ)法如下：

.box {
  background: color(display-p3 1 0 0);
}

color()函數(shù)接受一個(gè)顏色空間，然后是一組R/G/B值。它使用0到1的十進(jìn)制值，而不是從0到255。但目前只有主流的瀏覽器對(duì)color()函數(shù)支持。

LCH

我們使用HSL顏色格式創(chuàng)建以下兩種顏色：

正如我們所看到的，這兩種顏色都具有相同的50%的“亮度”值。但它們感覺不一樣輕，黃色的感覺比藍(lán)色的輕多了！

HSL顏色格式是在數(shù)學(xué)/物理之后建模的。它沒有考慮到人類的感知。而且，事實(shí)證明，人類并不能非常準(zhǔn)確地感知顏色！

LCH是一種顏色格式，旨在對(duì)人類感知一致。兩種顏色具有同等的“亮度”值應(yīng)該感覺同樣輕！

例如，在LCH中，黃色和藍(lán)色在55%亮度下的樣子：

LCH代表“亮度 色度 色調(diào)”。“色度”或多或少是“飽和度”的同義詞。它在概念上與HSL非常相似，但有兩個(gè)很大的區(qū)別：

• 如上所述，它優(yōu)先考慮人類感知，因此具有相同“亮度”值的兩種顏色將感覺同樣亮。
• 它不受任何特定顏色空間的約束。

與我們看到的其他顏色格式不同，LCH不綁定到sRGB。它甚至沒有綁定到P3！它通過(guò)不具有色度上限來(lái)實(shí)現(xiàn)這一點(diǎn)。

在HSL中，飽和度范圍從0%（無(wú)飽和）到100%（完全飽和）。這是可能的，因?yàn)槲覀冎牢覀冋務(wù)摰氖莝RGB顏色空間，一個(gè)有限的顏色調(diào)色板。

但是LCH并沒有鏈接到特定的顏色空間，所以我們不知道飽和度上限在哪里。它不是靜態(tài)的：隨著顯示技術(shù)的不斷改進(jìn)，我們可以預(yù)期顯示器將達(dá)到越來(lái)越寬的色域。LCH將自動(dòng)能夠通過(guò)調(diào)高色度來(lái)參考這些擴(kuò)展的顏色。

background: lch(50% 120 20);

瀏覽器支持情況：

選擇正確的顏色格式

文章的主要內(nèi)容已經(jīng)結(jié)束了，我們看到了許多不同的顏色格式。那么應(yīng)該在工作中真正使用哪一個(gè)呢？

我建議使用HSL。至少在LCH獲得廣泛的瀏覽器支持之前。

我知道很多開發(fā)者喜歡使用十六進(jìn)制代碼。它們簡(jiǎn)潔，易于在設(shè)計(jì)軟件和我們的代碼之間復(fù)制/粘貼，并且通用。但這些好處也伴隨著一些相當(dāng)大的權(quán)衡。

即使你對(duì)十六進(jìn)制符號(hào)很熟悉，它仍然很難直觀破譯。問：#0F52B7是什么顏色？#F3E248怎么樣？

HSL的奇妙之處在于它是直觀的。它與我們對(duì)顏色的看法密切相關(guān)。通過(guò)一些練習(xí)，當(dāng)您看到hsl()值時(shí)，您將能夠立即描繪任何顏色。

這意味著我們可以很容易地調(diào)整值，在運(yùn)行中。我甚至不需要打開一個(gè)顏色選擇器。如果我希望我的顏色稍微暗一點(diǎn)，我可以減少亮度百分比。如果我想讓它更生動(dòng)和激烈，我可以調(diào)高飽和度。

當(dāng)我們將HSL與現(xiàn)代CSS特性相結(jié)合時(shí)，它會(huì)變得更加強(qiáng)大。

最后

有興趣的可以看看原文，可以在線體驗(yàn)不同顏色格式是如何工作的。看完本文如果覺得有用，記得點(diǎn)個(gè)贊支持，收藏起來(lái)說(shuō)不定哪天就用上啦～

專注前端開發(fā)，分享前端相關(guān)技術(shù)干貨，公眾號(hào)：南城大前端（ID: nanchengfe）