CSS顏色設(shè)置方法HEX、RGB、HSL的簡單對比

本篇內(nèi)容主要講解“CSS顏色設(shè)置方法HEX、RGB、HSL的簡單對比”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS顏色設(shè)置方法HEX、RGB、HSL的簡單對比”吧!

創(chuàng)新互聯(lián)公司堅(jiān)信：善待客戶，將會成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨嚒Ｎ覀儚牟缓鲇瞥踉L客戶，我們用心做好本職工作，不忘初心，方得始終。十載網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、H5開發(fā)、網(wǎng)站制作、品牌網(wǎng)站制作、成都小程序開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

顏色方法的定義

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

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

800080

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

HEX 和 RGB 的區(qū)別

RGB或 Red/Green/Blue（即紅/綠/藍(lán)）也被用于在 CSS 中定義顏色，是另一種廣受歡迎的方法。RGB 配色方案是一種三通道格式，其中 r、g、b 三色的數(shù)值是 0 到 255 之間的整數(shù)。以下是 RGB 顏色的示例：

rgb(128, 0, 128)復(fù)制代碼

上述 RGB 顏色代碼的實(shí)現(xiàn)與上文中 HEX 顏色一致。你可能想知道，明明十六進(jìn)制顏色代碼更容易記住和輸入，為什么我們還要使用 RGB 呢？

嗯，每種顏色方法都有自己的好處。RGB 的美妙之處在于它允許你為顏色添加不透明度。

這就是 RGBA的強(qiáng)處了。在 CSS3 中，RGB 配色方案新增了一個(gè)額外的 alpha通道，以指示顏色的不透明度。

譯者注：其實(shí)嘛，Hex 也支持，比如說 50% 黑色就是 #00000088，最后兩位數(shù)為十六進(jìn)制的透明度，范圍也是 00 到 FF。

新人，HSL！

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

hsl(300, 100%, 25.1%)

如你所見，第一個(gè)參數(shù)用于定義色相，它是實(shí)際純色的值，例如紅色、黃色、綠色、藍(lán)色、洋紅色等。色相是一個(gè)顏色輪，取值為 0 到 360 的度數(shù)。這里 0 和 360 度代表紅色，120 度代表綠色，240 度代表藍(lán)色。

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

這些顏色可以是暗淡的，也可以是鮮艷的。顏色越少，它變成灰色的陰影就越多。飽和度指代混合色中存在多少顏色，它能控制顏色的鮮艷或暗淡程度。

如你所見，當(dāng)飽和度值沿線從 100% 變?yōu)?0% 時(shí)，顏色會從純色調(diào)變?yōu)榘瞪{(diào)。

此外，還有第三個(gè)參數(shù)代表亮度。這玩意也是一個(gè)百分比值，數(shù)值范圍也是 0% 到 100%，用于描述顏色中黑色或白色的占比。

這類似于水彩在繪畫中的使用。如果你想讓顏色更亮，你可以添加白色，如果你想讓顏色更深，你可以添加黑色。因此，100% 的亮度表示完全的白色，50% 表示實(shí)際色調(diào)顏色，0% 表示純黑色。

HSLA與 RGBA 類似，是 HSL 的擴(kuò)展。第四個(gè)通道表示顏色的不透明度，與 RGBA 和 Hex-alpha 并無二致。不透明度以十進(jìn)制值指定，就像在 RGBA 中一樣，其中 1 表示完全不透明，0 表示完全透明，中間的所有取值都是部分不透明的。

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

---

你可能已經(jīng)在 CSS 中設(shè)置顏色屬性時(shí)使用過所有或部分的這些顏色方法。Hex 是我個(gè)人的最愛，但是他們之間究竟有什么區(qū)別，各自又有著怎樣的優(yōu)勢？話不多說，一起來了解一下吧！

在 CSS 中指定顏色的最佳方法是什么？

如果你習(xí)慣了 HTML，你可能更習(xí)慣使用 Hex 顏色值，因?yàn)?Hex 顏色值在 HTML 中被大量使用。但如果你學(xué)過設(shè)計(jì)，你可能會使用 RGB 表示法，因?yàn)樗谴蠖鄶?shù)設(shè)計(jì)軟件（如 Photoshop、Corel 和 Illustrator）中最常用的格式。

我的建議是，如果你是一名純粹的開發(fā)人員并且只想完成你的項(xiàng)目，請繼續(xù)使用你最熟悉的顏色方式。

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

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

讓我們從十六進(jìn)制表示法開始。由于其簡短的符號，十六進(jìn)制非常有吸引力。許多開發(fā)人員發(fā)現(xiàn)，與 RGB 和 HSL 相比，Hex 值非常易于閱讀，而且更容易復(fù)制到他們喜歡的文本編輯器中。

RGB 在較舊版本的 Internet Explorer（9 及更早版本）中廣為人知并受支持。

HSL 旨在讓人類更容易理解！

RGB 和 Hex 等格式的機(jī)器可讀性比人類可讀性強(qiáng)。相反，HSL 旨在讓人類更好地理解。HSL 是一種更新且自然的顏色處理方式。

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

如果我告訴你網(wǎng)頁標(biāo)題需要是 #578557 或 rgb(87, 133, 87)，你能猜出是什么顏色嗎？ 不，除非你是電腦。但是，與此同時(shí)，如果我給你 HSL 中的顏色：hsl(120, 21%, 43%)？現(xiàn)在猜測有點(diǎn)容易了吧？ Hue 值為 120°，表示它是純綠色。接下來，它的飽和度為 61%，表明它距離暗灰色（一種非常不飽和的綠色）還有 21%。最后，亮度 43% 意味著顏色從純色到較暗的一面有 7%。

好的，假設(shè)你想讓按鈕顏色在懸停時(shí)更亮，單擊時(shí)更暗。使用 HSL 輕而易舉 —— 只需要增加和減少亮度值，僅此而已，是不是非常吃驚??！但是在不使用工具或設(shè)計(jì)師的幫助下用十六進(jìn)制或 RGB 來做到這一點(diǎn)是不可能的。

HSL 是一種模仿現(xiàn)實(shí)世界的直觀顏色符號。

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

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

好的，現(xiàn)在把你的手握在離表面幾英寸的地方。你手的影子讓表面變暗了一點(diǎn)，對吧？在不改變顏色本身的情況下，我們是無法使用 RGB 或十六進(jìn)制表示法表示這種顏色變化的。但是在 HSL 中，我們僅僅需要稍微調(diào)整亮度值，然后就 大功告成了！我們根本不需要對原始顏色進(jìn)行任何更改，是不是真的很酷？

	Hex	RGB	HSL
原值	#4f2017	rgb(79, 32, 23)	hsl(195, 53.3%, 79%)
新值	#2F819D	rgb(47, 129, 157)	hsl(195, 53.3%, 50%)

如你所見，Hex 和 RGB 值已經(jīng)被改到面目全非了，而對于 HSL，只有一個(gè)值發(fā)生了變化。毫無疑問，在構(gòu)建配色方案時(shí)，HSL 是最有用的。以底色為基礎(chǔ)，根據(jù)需要調(diào)整飽和度和亮度，就是這樣！有了 HSL，建立一個(gè)配色方案，簡直就是小菜一碟。

最后，這一切都取決于個(gè)人喜好！

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

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

• 和其他兩種顏色相比 Hex 有不支持透明度的限制（譯者注：Hex 是支持的……）

• 不使用特定工具來調(diào)整 RGBA 顏色是很很困難的

• 舊瀏覽器不支持 HSLA

• 如果你所服務(wù)的瀏覽器支持 HSLA 那就忽略這條吧！你可以選擇使用任何格式！

在選擇在項(xiàng)目中設(shè)置 CSS 顏色屬性的最佳方法時(shí)，你可以考慮以下因素。

1、使用與開發(fā)團(tuán)隊(duì)其他成員相同的格式來提高可維護(hù)性。

2、如果你已經(jīng)熟悉 RGB 格式，請使用它。

3、如果你的目標(biāo)訪問者使用嚴(yán)重過時(shí)的瀏覽器訪問你的網(wǎng)站，請使用 Hex，或者使用如下后備代碼：

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

4、如果以上三點(diǎn)還是沒能讓你決定使用哪一種，請使用 HSLA。HSLA 允許你像 RGBA 一樣使用透明度，而且更具備可訪問性。

有哪些替代方案？

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

• 使用顏色名稱：所有現(xiàn)代瀏覽器都支持 140 個(gè)標(biāo)準(zhǔn) CSS 顏色名稱。顏色名稱是代表特定顏色的關(guān)鍵字，如 coral。

• currentcolor 關(guān)鍵字：如果需要引用一個(gè)元素的顏色，可以使用這個(gè)關(guān)鍵字。

• HWB 值：HWB 代表色相、白度、黑度。雖然目前 HTML 不支持它，但它被建議作為 CSS4 的新標(biāo)準(zhǔn)。

• CMYK 值：CMYK 是青色、洋紅色、黃色和黑色的組合。盡管計(jì)算機(jī)屏幕使用 RGB 值來顯示顏色，但打印機(jī)通常使用 CMYK 顏色值來顯示顏色。與 HWB 類似，CMYK 在 HTML 中尚不支持，不過也是被建議作為 CSS4 中的新標(biāo)準(zhǔn)。

最后

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

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

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

• 偏好

• 可維護(hù)性

• 性能與效果

到此，相信大家對“CSS顏色設(shè)置方法HEX、RGB、HSL的簡單對比”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文題目：CSS顏色設(shè)置方法HEX、RGB、HSL的簡單對比
轉(zhuǎn)載來源：http://bm7419.com/article34/igohpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、App開發(fā)、服務(wù)器托管、、搜索引擎優(yōu)化、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)