小編給大家分享一下css顏色：css中顏色的不同定義方式有哪些，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
顏色廣泛用于CSS，無(wú)論是文本顏色，背景顏色，漸變，陰影，邊框......都需要定義顏色的方法，每種顏色的定義方法都各有利弊。本篇文章就來(lái)給大家分享一下css中顏色的不同定義方式。
color屬性定義文本的顏色很簡(jiǎn)單，更重要的是顏色的定義可以用的不同類型的顏色單位。
顏色名稱
CSS提供了由一百四十多種顏色名稱，從最基本顏色都一些更豐富的顏色可以說(shuō)是豐富多彩。
重慶分公司
重慶分公司
body{ color: black;}
a{ color: orange;}上述例子是用具體的顏色名稱來(lái)定義的，但是因?yàn)轭伾Q很難記住，并且可能你想要非常特定的顏色，所以顏色的名稱可能就不太好用了，下面我們就來(lái)看看其他的用于定義顏色的方式
RGB
電腦顯示器，電視，手機(jī)都使用RGB顏色模型來(lái)顯示顏色。基本上，每種顏色都由紅色，綠色和藍(lán)色組合定義。紅色，綠色或藍(lán)色有256個(gè)可能的值。由于計(jì)算機(jī)從0（零）開(kāi)始計(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ù)上下文看起來(lái)略有不同。它對(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è)值來(lái)渲染您想要的顏色。如果你想要一個(gè)黃色陰影，你可以從像這樣的值開(kāi)始hsl(50, 68%, 56%)，并改變飽和度和亮度值來(lái)找到你正在尋找的特定陰影。
我認(rèn)為hsl對(duì)于人來(lái)說(shuō)可讀性更高，而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)制如何工作：
| 二進(jìn)制 | 0 | 1 | ||||||||||||||
| 十進(jìn)制 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ||||||
| 十六進(jìn)制 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
將0-9數(shù)字和AF字母視為符號(hào)。
人類使用十進(jìn)制。我們有10個(gè)符號(hào)來(lái)形成數(shù)字。
在十六進(jìn)制中，我們有16個(gè)符號(hào)來(lái)形成數(shù)字。因?yàn)?-9不夠符號(hào)，我們也使用A到F。它從零開(kāi)始。所以：
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）開(kāi)始
我必須記住這個(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í)，不要直接編寫(xiě)它們。您可以使用顏色選擇器，也可以從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)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！
