[[417775]]

如題，在你平常開(kāi)發(fā)中，你設(shè)置css顏色的方式有哪些?

作為一名前端開(kāi)發(fā)，比如你寫業(yè)務(wù)組件的時(shí)候，可能會(huì)涉及到css顏色屬性的設(shè)置，那你更偏向于哪種呢。

編者導(dǎo)語(yǔ)

顏色在網(wǎng)頁(yè)中起著至關(guān)重要的作用。在 CSS 中，我們使用 RGB、Hex 和 HSL 等方法來(lái)定義顏色。在本文中，我討論了用于在 CSS 中設(shè)置顏色屬性的主要三種方法、它們的區(qū)別、它們的優(yōu)缺點(diǎn)，以及可用于在 CSS 中定義顏色屬性的其他替代方法。

比如常見(jiàn)的設(shè)置顏色方式有以下幾種：

Hex: #ADD8E6;  
RGB: rgb(173, 216, 230);  
HSL: hsl(195, 53.3%, 79%); 

好奇的我，隨便打開(kāi)一個(gè)顏色轉(zhuǎn)化的網(wǎng)站:

顏色轉(zhuǎn)化器

從我們最常見(jiàn)的十六進(jìn)制顏色值到Hex，RGB，HSL，HSV，再到CMYK等方法，哪些是你比較熟悉的呢。

當(dāng)然小編我最熟悉的自然是十六進(jìn)制，想起實(shí)習(xí)的時(shí)候，切圖的時(shí)候，用得最多的就是這個(gè)顏色表示法。

本著探索的原則，我們就挑選幾個(gè)常見(jiàn)的顏色表示法，來(lái)看看他們的區(qū)別。

[[417776]]

HEX vs RGB vs HSL

HEX

十六進(jìn)制顏色值是設(shè)置 CSS 顏色屬性最流行的方法之一，尤其是在開(kāi)發(fā)人員中。幾乎所有瀏覽器都支持它。

我們可以在十六進(jìn)制顏色代碼中定義紫色，如下所示：

#800080 

這里的顏色以#RRGGBB 格式指定，其中RR(紅色)、GG(綠色)和BB(藍(lán)色)是00 和FF 之間的十六進(jìn)制整數(shù)，表示顏色的強(qiáng)度。

RGB

RGB or Red/Green/Blue 是另一種在CSS中用來(lái)定義顏色屬性的很受歡迎的方法。RGB顏色方案是一種三通道格式，包含紅、綠、藍(lán)的數(shù)量，是0到255之間的整數(shù)。以下是一個(gè)RGB顏色的例子:

rgb(128, 0, 128) 

這是我們使用上面的十六進(jìn)制顏色代碼指定的相同顏色的 RGB 代碼。他們的效果是一樣的。

有些時(shí)候，十六進(jìn)制顏色代碼更容易記住和輸入，那為什么還會(huì)有RGB表示法呢?

可能其中一個(gè)原因就是：RGB 的美妙之處在于它允許您為顏色添加不透明度。

這就是RGBA出現(xiàn)的地方。在 CSS 3 中，RGB 配色方案中添加了一個(gè)額外的通道，稱為alpha以指示顏色的不透明度。

HSL

HSL代表色相飽和度和亮度，是另一種在 CSS 中聲明顏色的方式。紫色的 HSL 顏色值可以指定如下：

hsl(300, 100%, 25.1%) 

如您所見(jiàn)，第一個(gè)參數(shù)用于定義Hue，它是實(shí)際純色的值，例如紅色、黃色、綠色、藍(lán)色、洋紅色等，如色輪所示。

值以度為單位，從 0 到 360。這里 0 和 360 度代表紅色，120 度代表綠色，240 度代表藍(lán)色。

與 RGB 不同，在 HSL 中，顏色的飽和度和亮度都可以改變。

這些顏色可以是暗淡的，也可以是生動(dòng)的。顏色越少，它變成灰色的陰影就越多。飽和度是混合物中存在多少顏色，它 控制顏色的鮮艷或暗淡程度。

比如我們從下面的網(wǎng)站來(lái)看看效果：

演示1

如您所見(jiàn)，當(dāng) Saturation 值沿線從 100% 變?yōu)?0% 時(shí)，顏色會(huì)從純色調(diào)變?yōu)榘瞪{(diào)。

此外，第三個(gè)參數(shù)Lightness也是一個(gè)百分比值，從 0% 到 100%，它描述了顏色中存在多少黑色或白色。

演示2

這類似于水彩在繪畫中的使用。如果你想讓顏色更亮，你可以添加白色，如果你想讓顏色更深，你可以添加黑色。

因此，100% Lightness 表示完全白色，50% 表示實(shí)際色調(diào)，0% 表示純黑色。

類似于RGBA，HSLA是HSL 的擴(kuò)展，它執(zhí)行名為alpha 的第四個(gè)通道來(lái)表示顏色的不透明度。不透明度以十進(jìn)制值指定，就像在 RGBA 中一樣，其中 1 表示完全不透明，0 表示完全透明，中間的所有內(nèi)容都是部分不透明的。

然而，雖然大多數(shù)瀏覽器支持 RGB 和 Hex 顏色代碼，但 HSL 顏色主要在基于 HTML5 的瀏覽器中支持。

其他方式

除了上面提到的方法，還有一些其他方法可以用來(lái)在 CSS 中設(shè)置顏色屬性。

• 使用顏色名稱：所有現(xiàn)代瀏覽器都支持 140 個(gè)標(biāo)準(zhǔn)的 CSS 顏色名稱。顏色名稱是代表特定顏色的關(guān)鍵字，如coral.
• currentcolor關(guān)鍵字：如果需要引用元素的顏色，可以使用這個(gè)關(guān)鍵字。
• HWB 值： HWB 代表色相、白度、黑度。雖然目前 HTML 不支持它，但建議將其作為 CSS4 的新標(biāo)準(zhǔn)。
• CMYK 值：CMYK 是青色、洋紅色、黃色和黑色的組合。盡管計(jì)算機(jī)屏幕使用 RGB 值來(lái)顯示顏色，但打印機(jī)通常使用 CMYK 顏色值來(lái)顯示顏色。與 HWB 類似，CMYK 在 HTML 中尚不支持，但建議作為 CSS4 中的新標(biāo)準(zhǔn)。

如何選擇

在 CSS 中指定顏色的最佳方法是什么?你使用的是哪種方式呢?

如果您習(xí)慣于 HTML，您可能更喜歡使用 Hex 顏色值，因?yàn)樗?HTML 中被大量使用。

但是，如果您具有設(shè)計(jì)背景，則可能會(huì)使用 RGB 表示法，因?yàn)樗谴蠖鄶?shù)設(shè)計(jì)軟件(如 Photoshop、Corel 和 Illustrator)中最常用的格式。

但是，如果您是一名純粹的開(kāi)發(fā)人員并且只想完成您的項(xiàng)目，那怎么讓自己高效完成切圖呢?

肯定是使用您最熟悉的顏色表示法，因?yàn)闉g覽器并不真正關(guān)心您使用的是哪種顏色格式，即使不同方法之間存在細(xì)微的性能變化，但性能差異可以忽略不計(jì)。

其他因素

除此之外，如果您擔(dān)心可用性、決策對(duì)開(kāi)發(fā)人員的影響等，讓我們看看哪種方法最適合您的情況。

讓我們從十六進(jìn)制表示法開(kāi)始：

Hex 因其簡(jiǎn)短而簡(jiǎn)單的符號(hào)而非常有吸引力。許多開(kāi)發(fā)人員發(fā)現(xiàn)，與 RGB 和 HSL 相比，Hex 值非常易于閱讀并且更容易復(fù)制到他們喜歡的文本編輯器中。

但是，Hex 可能并不適用于所有情況。特別是當(dāng)您需要更改顏色的不透明度級(jí)別時(shí)，您可能必須考慮其他兩種方法之一。他們兩個(gè)都有自己的優(yōu)點(diǎn)和缺點(diǎn):

在為顏色設(shè)置動(dòng)畫時(shí)，RGB 和 HSL 比 Hex 更可取，并且當(dāng)您想要處理顏色的不透明度時(shí)，它們的 alpha 值附加通道會(huì)派上用場(chǎng)。

除此之外，RGB 在較舊版本的 Internet Explorer(9 及更早版本)中廣為人知并受支持。

HSL 有哪些特點(diǎn)呢：

可能它的出現(xiàn)，其中一個(gè)原因就是讓人理解。HSL 是一種更新且自發(fā)的顏色處理方式。

與在 Hex 和 RGBA 中你必須使用一些數(shù)字來(lái)獲得你想要的顏色不同，在 HSL 中，我們可以使用 Hue 定義顏色并使用第二和第三個(gè)參數(shù)百分比來(lái)獲得你需要的飽和度和亮度級(jí)別.

如果我告訴您網(wǎng)頁(yè)標(biāo)題需要是#578557或rgb(87, 133, 87)，您能猜出顏色是什么嗎?

不，除非你是電腦。但是，與此同時(shí)，如果我給你在HSL顏色：hsl(120, 21%, 43%)?現(xiàn)在猜測(cè)有點(diǎn)容易了吧?Hue 值為 120°，表示它是純綠色。接下來(lái)，它的飽和度為 61%，表明它距離暗灰色(一種非常不飽和的綠色)還有**" 21個(gè)度"。那么明度 43% 意味著顏色從純色到較暗的一面有"7個(gè)度"**。

從某種程度來(lái)看，HSL 是一種模仿現(xiàn)實(shí)世界的直觀顏色符號(hào)。

例如，讓我們考慮一張淺藍(lán)色紙。它的三種格式的顏色值是：

Hex: #ADD8E6; 
RGB: rgb(173, 216, 230); 
HSL: hsl(195, 53.3%, 79%); 

但是你突然需要對(duì)顏色變化時(shí)，比如變暗，你該如何操作呢?

OLD VALUES                    NEW VALUES  
Hex: #4f2017 ------------------> #2F819D; 
RGB: rgb(79, 32, 23) ----------> rgb(47, 129, 157); 
HSL: hsl(195, 53.3%, 79%) -----> hsl(195, 53.3%, 50%); 

從數(shù)據(jù)中可以看到，Hex 和 RGB 值已經(jīng)完全改變，而在 HSL 中，只有一個(gè)方面發(fā)生了變化。毫無(wú)疑問(wèn)，在構(gòu)建配色方案時(shí)，HSL 是最有用的。從基色開(kāi)始，根據(jù)需要調(diào)整飽和度和亮度，就是這樣子設(shè)置一下即可!

小結(jié)

現(xiàn)在你可能認(rèn)為 HSL 是最好的顏色表示法。但是，舊版本的 Internet Explorer 不支持 HSL。同樣，每種顏色符號(hào)都有其優(yōu)點(diǎn)和缺點(diǎn)。問(wèn)題是，這并不重要。

最重要的是盡可能保持您在項(xiàng)目中使用的類型的一致性，因?yàn)樗兄谔岣呱a(chǎn)力。

雖然Hex有不支持透明度和RGBA的限制，但是不使用特定工具來(lái)調(diào)整顏色是很有挑戰(zhàn)性的，而且舊瀏覽器不支持HSLA;如果提供，則不是特例;你可以使用任何格式。在選擇在項(xiàng)目中設(shè)置 CSS 顏色屬性的最佳方法時(shí)，您可以考慮以下因素:

• 使用與開(kāi)發(fā)團(tuán)隊(duì)的其他成員相同的格式來(lái)簡(jiǎn)化可維護(hù)性。
• 如果您已經(jīng)熟悉該格式，請(qǐng)使用 RGB。
• 如果您的目標(biāo)訪問(wèn)者使用嚴(yán)重過(guò)時(shí)的瀏覽器來(lái)查看您的網(wǎng)站或使用如下后備代碼，請(qǐng)使用 Hex：

p {  
    color: #FF0000; 
    color: hsla(0, 100%, 50%, 1); 
} 

• 如果前三點(diǎn)沒(méi)有讓您轉(zhuǎn)向任何其他方向，請(qǐng)使用 HSLA。HSLA 允許您像 RGBA 一樣具有透明度，以一種人類可以訪問(wèn)的方式。

盡管 HSLA 由于其人類可讀性而比其他兩種方法略有優(yōu)勢(shì)，但如果不是針對(duì)特定情況，則無(wú)關(guān)緊要。你可以使用任何你覺(jué)得舒服的方式。

看看不同的優(yōu)點(diǎn)和缺點(diǎn)，每種方法都優(yōu)于其他方法，總而言之，決定使用哪種方式在 CSS 中設(shè)置顏色屬性應(yīng)取決于以下三個(gè)因素：

• 可維護(hù)性
• 偏愛(ài)
• 表現(xiàn)如何

那么，你更喜歡用什么來(lái)設(shè)置 CSS 中的顏色?十六進(jìn)制、RGBA、HSLA 或其他什么?