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)

免費下載我的CSS手冊


更多CSS教程: