CSS顏色

了解如何在CSS中使用顏色

默認情況下，就使用的顏色而言，Web瀏覽器呈現的HTML頁面非常可悲。

我們有白色背景，黑色和藍色鏈接。而已。

幸運的是，CSS使我們能夠在設計中添加顏色。

我們具有以下屬性：

color
background-color
border-color

他們所有人都接受顏色值，可以採用不同的形式。

命名的顏色

首先，我們有定義顏色的CSS關鍵字。 CSS從16開始，但是今天有很多顏色名稱：

aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkgrey
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dimgrey
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
grey
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgray
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightslategrey
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
rebeccapurple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
slategrey
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

加tranparent，和currentColor指向color屬性，例如對於使border-color繼承它。

它們在CSS Color Module, Level 4。它們不區分大小寫。

維基百科有一個漂亮的桌子這樣您就可以根據其名稱選擇理想的顏色。

命名的顏色不是唯一的選擇。

RGB和RGBa

您可以使用rgb()函數根據其RGB表示法計算顏色，該表示法根據其紅，綠，藍部分設置顏色。從0到255：

p {
  color: rgb(255, 255, 255); /* white */
	background-color: rgb(0, 0, 0); /* black */
}

rgba()使您可以添加Alpha通道以輸入透明零件。可以是0到1之間的數字：

p {
	background-color: rgba(0, 0, 0, 0.5);
}

十六進製表示法

另一種選擇是以十六進製表示法表示顏色的RGB部分，該十六進製表示法由3個塊組成。

黑色，這是rgb(0,0,0)表示為#000000或者#000（如果相等，我們可以將2個數字捷徑為1）。

白色的，rgb(255,255,255)可以表示為#ffffff或者#fff。

十六進製表示法可以用2位數字表示0到255之間的數字，因為它們可以從0到“ 15”（f）。

我們可以通過在末尾再添加1或2個數字來添加alpha通道#00000033。並非所有瀏覽器都支持縮寫符號，因此請使用所有6位數字表示RGB部分。

HSL和HSLa

這是CSS的最新版本。

HSL =色相飽和度亮度。

在此表示法中，黑色是hsl(0, 0%, 0%)白色是hsl(0, 0%, 100%)。

如果您由於過去的知識而對HSL的了解比對RGB的了解更深，那麼可以肯定地使用它。

你也有hsla()它將Alpha通道添加到混音中，還是從0到1的數字：hsl(0, 0%, 0%, 0.5)