css颜色_CSS颜色
css颜色
By default an HTML page is rendered by web browsers quite sadly in terms of the colors used.
默认情况下，就使用的颜色而言，Web浏览器呈现HTML页面非常可悲。
We have a white background, black color, and blue links. That’s it.
我们有白色背景，黑色和蓝色链接。 而已。
Luckily CSS gives us the ability to add colors to our designs.
幸运的是，CSS使我们能够在设计中添加颜色。
We have these properties:
我们具有以下属性：
colorcolorbackground-colorbackground-colorborder-colorborder-color
All of them accept a color value, which can be in different forms.
它们都接受一个可以采用不同形式的颜色值 。
命名的颜色 (Named colors)
First, we have CSS keywords that define colors. CSS started with 16, but today there is a huge number of colors names:
首先，我们有定义颜色CSS关键字。 CSS从16开始，但是今天有很多颜色名称：
alicebluealiceblueantiquewhiteantiquewhiteaquaaquaaquamarineaquamarineazureazurebeigebeigebisquebisqueblackblackblanchedalmondblanchedalmondbluebluebluevioletbluevioletbrownbrownburlywoodburlywoodcadetbluecadetbluechartreusechartreusechocolatechocolatecoralcoralcornflowerbluecornflowerbluecornsilkcornsilkcrimsoncrimsoncyancyandarkbluedarkbluedarkcyandarkcyandarkgoldenroddarkgoldenroddarkgraydarkgraydarkgreendarkgreendarkgreydarkgreydarkkhakidarkkhakidarkmagentadarkmagentadarkolivegreendarkolivegreendarkorangedarkorangedarkorchiddarkorchiddarkreddarkreddarksalmondarksalmondarkseagreendarkseagreendarkslatebluedarkslatebluedarkslategraydarkslategraydarkslategreydarkslategreydarkturquoisedarkturquoisedarkvioletdarkvioletdeeppinkdeeppinkdeepskybluedeepskybluedimgraydimgraydimgreydimgreydodgerbluedodgerbluefirebrickfirebrickfloralwhitefloralwhiteforestgreenforestgreenfuchsiafuchsiagainsborogainsboroghostwhiteghostwhitegoldgoldgoldenrodgoldenrodgraygraygreengreengreenyellowgreenyellowgreygreyhoneydewhoneydewhotpinkhotpinkindianredindianredindigoindigoivoryivorykhakikhakilavenderlavenderlavenderblushlavenderblushlawngreenlawngreenlemonchiffonlemonchiffonlightbluelightbluelightcorallightcorallightcyanlightcyanlightgoldenrodyellowlightgoldenrodyellowlightgraylightgraylightgreenlightgreenlightgreylightgreylightpinklightpinklightsalmonlightsalmonlightseagreenlightseagreenlightskybluelightskybluelightslategraylightslategraylightslategreylightslategreylightsteelbluelightsteelbluelightyellowlightyellowlimelimelimegreenlimegreenlinenlinenmagentamagentamaroonmaroonmediumaquamarinemediumaquamarinemediumbluemediumbluemediumorchidmediumorchidmediumpurplemediumpurplemediumseagreenmediumseagreenmediumslatebluemediumslatebluemediumspringgreenmediumspringgreenmediumturquoisemediumturquoisemediumvioletredmediumvioletredmidnightbluemidnightbluemintcreammintcreammistyrosemistyrosemoccasinmoccasinnavajowhitenavajowhitenavynavyoldlaceoldlaceoliveoliveolivedrabolivedraborangeorangeorangeredorangeredorchidorchidpalegoldenrodpalegoldenrodpalegreenpalegreenpaleturquoisepaleturquoisepalevioletredpalevioletredpapayawhippapayawhippeachpuffpeachpuffperuperupinkpinkplumplumpowderbluepowderbluepurplepurplerebeccapurplerebeccapurpleredredrosybrownrosybrownroyalblueroyalbluesaddlebrownsaddlebrownsalmonsalmonsandybrownsandybrownseagreenseagreenseashellseashellsiennasiennasilversilverskyblueskyblueslateblueslateblueslategrayslategrayslategreyslategreysnowsnowspringgreenspringgreensteelbluesteelbluetantantealtealthistlethistletomatotomatoturquoiseturquoisevioletvioletwheatwheatwhitewhitewhitesmokewhitesmokeyellowyellowyellowgreenyellowgreen
plus tranparent, and currentColor which points to the color property, for example useful to make the border-color inherit it.
加上tranparent和currentColor ，它指向color属性，例如，有助于使border-color继承它。
They are defined in the CSS Color Module, Level 4. They are case insensitive.
它们在CSS颜色模块第4级中定义。 它们不区分大小写。
Wikipedia has a nice table which lets you pick the perfect color by its name.
Wikipedia有一个漂亮的表格 ，您可以通过它的名称选择理想的颜色。
Named colors are not the only option.
命名的颜色不是唯一的选择。
RGB和RGBa (RGB and RGBa)
You can use the rgb() function to calculate a color from its RGB notation, which sets the color based on its red-green-blue parts. From 0 to 255:
您可以使用rgb()函数根据其RGB表示法计算颜色，该RGB表示法根据其红绿蓝部分设置颜色。 从0到255：
p {
color: rgb(255, 255, 255); /* white */
background-color: rgb(0, 0, 0); /* black */
}rgba() lets you add the alpha channel to enter a transparent part. That can be a number from 0 to 1:
rgba()允许您添加Alpha通道以输入透明零件。 可以是0到1之间的数字：
p {
background-color: rgba(0, 0, 0, 0.5);
}十六进制表示法 (Hexadecimal notation)
Another option is to express the RGB parts of the colors in the hexadecimal notation, which is composed by 3 blocks.
另一种选择是以十六进制表示法表示颜色的RGB部分，该十六进制表示法由3个块组成。
Black, which is rgb(0,0,0) is expressed as #000000 or #000 (we can shortcut the 2 numbers to 1 if they are equal).
黑色，即rgb(0,0,0)表示为#000000或#000 (如果相等，我们可以将2个数字缩短为1)。
White, rgb(255,255,255) can be expressed as #ffffff or #fff.
白色rgb(255,255,255)可以表示为#ffffff或#fff 。
The hexadecimal notation lets express a number from 0 to 255 in just 2 digits, since they can go from 0 to “15” (f).
十六进制表示法可以用2位数字表示从0到255的数字，因为它们可以从0到“ 15”(f)。
We can add the alpha channel by adding 1 or 2 more digits at the end, for example #00000033. Not all browsers support the shortened notation, so use all 6 digits to express the RGB part.
我们可以通过在末尾再添加1或2个数字来添加alpha通道，例如#00000033 。 并非所有浏览器都支持缩写符号，因此请使用所有6位数字表示RGB部分。
HSL和HSLa (HSL and HSLa)
This is a more recent addition to CSS.
这是CSS的最新版本。
HSL = Hue Saturation Lightness.
HSL =色相饱和度亮度。
In this notation, black is hsl(0, 0%, 0%) and white is hsl(0, 0%, 100%).
在这种表示法中，黑色是hsl(0, 0%, 0%) ，白色是hsl(0, 0%, 100%) 。
If you are more familiar with HSL than RGB because of your past knowledge, you can definitely use that.
如果您由于过去的知识而对HSL的熟悉程度超过了RGB，那么您可以肯定地使用它。
You also have hsla() which adds the alpha channel to the mix, again a number from 0 to 1: hsl(0, 0%, 0%, 0.5)
您还可以使用hsla()将Alpha通道添加到混音中，它也是从0到1的数字： hsl(0, 0%, 0%, 0.5)
css颜色