CSS颜色的基础知识介绍

97 阅读3分钟

在默认情况下,网络浏览器对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颜色模块的第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部分,它由三个区块组成。

黑色,即rgb(0,0,0) ,可表示为#000000#000 (如果这两个数字相等,我们可以把它们简化为1)。

白色,rgb(255,255,255) ,可以表示为#ffffff#fff

十六进制符号可以用2位数字表示0到255,因为它们可以从0到 "15"(f)。

我们可以通过在末尾增加1或2位数字来增加阿尔法通道,例如:#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)