css顏色：css中顏色的不同定義方式有哪些

小編給大家分享一下css顏色：css中顏色的不同定義方式有哪些，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

顏色廣泛用于CSS，無論是文本顏色，背景顏色，漸變，陰影，邊框......都需要定義顏色的方法，每種顏色的定義方法都各有利弊。本篇文章就來給大家分享一下css中顏色的不同定義方式。

color屬性定義文本的顏色很簡(jiǎn)單，更重要的是顏色的定義可以用的不同類型的顏色單位。

顏色名稱

CSS提供了由一百四十多種顏色名稱，從最基本顏色都一些更豐富的顏色可以說是豐富多彩。

body{ color: black;}
a{ color: orange;}

上述例子是用具體的顏色名稱來定義的，但是因?yàn)轭伾Q很難記住，并且可能你想要非常特定的顏色，所以顏色的名稱可能就不太好用了，下面我們就來看看其他的用于定義顏色的方式

RGB

電腦顯示器，電視，手機(jī)都使用RGB顏色模型來顯示顏色。基本上，每種顏色都由紅色，綠色和藍(lán)色組合定義。紅色，綠色或藍(lán)色有256個(gè)可能的值。由于計(jì)算機(jī)從0（零）開始計(jì)數(shù)，因此最大值為255。

考慮到顏色是紅色，綠色和藍(lán)色組合的結(jié)果，并且因?yàn)檫@3種顏色中的每一種都具有256種可能的值，所以256 * 256 * 256 = 16,777,216可以使用顏色。

由于RGB模型與物理渲染顏色的方式直接相關(guān)，因此它已成為CSS顏色單元。

例如，你可以定義紅色為219紅色，78為綠色，68為藍(lán)色：

a{ color: rgb(219, 78, 68);}

黑色不是紅色，綠色或藍(lán)色：

body{ color: rgb(0, 0, 0);}

在光譜的另一邊，白色是每個(gè)紅色，綠色和藍(lán)色的全部量：

body{ color: rgb(255, 255, 255);}

RGBA

rgba色彩單元是rgb，這是我們添加的α值（范圍從0到1，在十進(jìn)制值），它定義了顏色透明度是什么：

body{ color: rgba(0, 0, 0, 0.8);}

略帶透明的黑色。

顏色透明的目的是與背景混合，因此根據(jù)上下文看起來略有不同。它對(duì)背景顏色特別有用。

HSL和HSLA

HSL是另一種定義顏色的方法。把它想象成一個(gè)色輪。

您可以用一下方法定義：而不是將顏色組合為紅色，綠色和藍(lán)色。

色調(diào)值范圍從0到360，限定其為特定顏色。

飽和度是百分比，范圍從0％到100％，定義了你想要的顏色的深淺。

亮度是百分比，范圍從0％到100％，定義了你想要的顏色亮度。

同樣，你可以在HSL中以這種方式定義：

a{ color: hsl(4, 68%, 56%);}

4表示紅色 68%表示紅色非常突出 56%表示它在黑色和白色之間

hsl顏色單元比rgb更容易理解，因?yàn)樵擃A(yù)期的結(jié)果清晰。您基本上可以在3個(gè)單獨(dú)的步驟中定義顏色，并且可以使用每個(gè)值來渲染您想要的顏色。如果你想要一個(gè)黃色陰影，你可以從像這樣的值開始hsl(50, 68%, 56%)，并改變飽和度和亮度值來找到你正在尋找的特定陰影。

我認(rèn)為hsl對(duì)于人來說可讀性更高，而rgb更像是計(jì)算機(jī)可讀的。

hsla和hsl是一樣，只增加了能夠定義透明度度α值：

body{ color: hsla(4, 68%, 56%, 0.5);}

透明的紅色。

十六進(jìn)制

CSS中的顏色也可以用十六進(jìn)制值定義，比如#db4e44。

要了解十六進(jìn)制值是什么，讓我們看看二進(jìn)制和十進(jìn)制如何工作：

將0-9數(shù)字和AF字母視為符號(hào)。

人類使用十進(jìn)制。我們有10個(gè)符號(hào)來形成數(shù)字。

在十六進(jìn)制中，我們有16個(gè)符號(hào)來形成數(shù)字。因?yàn)?-9不夠符號(hào)，我們也使用A到F。它從零開始。所以：

4十六進(jìn)制的數(shù)字是4

12十六進(jìn)制的數(shù)字是C

16以十六進(jìn)制表示的數(shù)字是10因?yàn)樵谟猛攴?hào)（最后一個(gè)符號(hào)F）之后，在左邊添加第二個(gè)符號(hào)并增加（0變?yōu)?）而右邊的符號(hào)從（F到0）開始

我必須記住這個(gè)嗎？

一點(diǎn)也不！這里提供十六進(jìn)制值如何工作的解釋。要記住的最重要的事情是有16個(gè)十六進(jìn)制符號(hào)。

就像RGB一樣，十六進(jìn)制顏色值是紅色，綠色和藍(lán)色的組合，它們中的每一個(gè)都表示為十六進(jìn)制值，如DB紅色，4E綠色和44藍(lán)色。

因?yàn)榧t色，綠色或藍(lán)色只能有2個(gè)符號(hào)，它們的可能值是16 * 16 = 256，它反映了RGB顏色單位！

為什么不使用RGB呢？

通常，在選擇顏色時(shí)，不要直接編寫它們。您可以使用顏色選擇器，也可以從Photoshop復(fù)制/粘貼它，或者在某處選擇調(diào)色板。

十六進(jìn)制值更容易復(fù)制和粘貼，因?yàn)樗鼈冎话?個(gè)字符。

粘貼單個(gè)字段比3個(gè)單獨(dú)的字段更容易。

在CSS中，您只需要在哈希前面添加十六進(jìn)制顏色值#。

選擇哪一個(gè)？

如果您不打算使用任何透明顏色，請(qǐng)堅(jiān)持使用十六進(jìn)制值，因?yàn)樗鼈兏菀讖?fù)制/粘貼，并且不會(huì)在代碼中占用太多空間。

如果您想要一些透明度，請(qǐng)將顏色從十六進(jìn)制轉(zhuǎn)換為rgba，然后使用rgba顏色單位。

如果您想直接在瀏覽器中使用顏色，可以使用hsl。

看完了這篇文章，相信你對(duì)css顏色：css中顏色的不同定義方式有哪些有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！