This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。
The web would be a pretty dull place without a splash of color.
网络将是一个相当沉闷的地方，不会出现色彩飞溅。
There are a number of different properties that take a color value and there are four different color syntaxes in CSS and that’s what we’ll be focusing on in this video. Those formats are color keywords, hex, RGB and HSL.
有许多采用颜色值的不同属性，CSS中有四种不同的颜色语法，这就是我们将在本视频中重点介绍的内容。 这些格式是颜色关键字，十六进制，RGB和HSL。
.box-white { color: white; color: #fff; color: #ffffff; color: rgb(255,255,255); color: rgba(255,255,255,1); color: hsl(0,0%,100%,1); color: hsla(0,0%,100%,1); } .box-black { color: black; color: #000; color: #000000; color: rgb(0,0,0); color: rgba(0,0,0,1); color: hsl(0,0%,0%,1); color: hsla(0,0%,0%,1); }Let’s take a look at each of them in turn.
让我们依次看一下它们。
There are 147 named colors in CSS3.
CSS3中有147种命名颜色。
There are actually only 140 different colors as 7 of them are duplicates just with different spellings of gray.
实际上只有140种不同的颜色，因为其中7种是重复的，只是具有不同的灰色拼写。
Here they are as colors, and here they are as a list of keywords.
它们在这里是颜色，在这里是关键字列表。
I personally find this list pretty useless – there are lots to choose from, but it’s hard to remember what they all look like.
我个人认为该列表毫无用处-有很多可供选择，但很难记住它们的外观。
What is palevioletred? How pale? How violet? How red?
什么是palevioletred ？ 多么苍白 紫罗兰色 怎么红
What is gainsboro?
什么是gainsboro ？
How about burlywood or goldenrod?
如何burlywood或goldenrod ？
These aren’t that useful, but fortunately there are more options.
这些不是那么有用，但是幸运的是还有更多的选择。
In CSS, colors are defined in the standard Red Green Blue color space or sRGB where colors are defined through 3 channels: Red, Green, and Blue.
在CSS中，颜色是在标准的Red Green Blue颜色空间或sRGB中定义的，其中颜色是通过3个通道(红色，绿色和蓝色)定义的。
One way of defining color in CSS is using the RGB syntax. Here the values range from 0 to 255 for each of the three components. In this case specifying 255 for each of the components, gives us the color white.
在CSS中定义颜色的一种方法是使用RGB语法。 在此，对于三个组件中的每个组件，该值的范围从0到255。 在这种情况下，为每个组件指定255，就为我们提供了白色。
.box { color: rgb(255, 255, 255); /* white */ color: rgba(255, 255, 255, 0.5); /* semi-transparent white */ }We can also make semi-transparent colors with RGBA. Here, a fourth value, known as Alpha, determines the opacity of a color. This value is a decimal ranging from 0 to 1 where 0 is completely transparent, and 1 is completely opaque.
我们还可以使用RGBA制作半透明的颜色。 在这里，第四个值称为Alpha，它确定颜色的不透明度。 该值是一个从0到1的十进制数，其中0完全透明，而1完全不透明。
The transparent keyword is represented as rgba(0,0,0,0).
transparent关键字表示为rgba(0,0,0,0) 。
.box { color: transparent; color: rgba(0, 0, 0, 0); /* transparent */ }Probably the color format I use most often is hex. Hex is short for hexadecimal which is a base 16 numeral system. Most people are more familiar with decimal – or base 10 – like the metric system.
我最常使用的颜色格式可能是十六进制。 十六进制是十六进制的缩写，它是一个以16为基数的系统。 像公制系统一样，大多数人对十进制或基数10更为熟悉。
A hex color is broken down into three couplets that specify the red, green and blue components of a color. The values of the couplets are in base 16 and range from 00 to FF. You can think of 00 as no color and FF as full color. FF is actually the decimal number 255 in base 16.
十六进制颜色分为三个对联，分别指定颜色的红色，绿色和蓝色分量。 对联的值以16为底，范围从00到FF。 你可以把00作为无彩色和FF 全彩。 FF实际上是以16为基的十进制数字255。
In this case we have full red, full green and full blue which combine to make white.
在这种情况下，我们将全红，全绿和全蓝结合起来，得到白色。
In this second example we have no red, full green and no blue which gives us green.
在第二个示例中，我们没有红色，全绿色和没有蓝色的绿色。
When both values in each of three couplets are the same, the hex value can be abbreviated to a short-hand 3 digit format.
当三个对联中的两个值都相同时，十六进制值可以缩写为简写的3位数字格式。
.box { color: #00ff00; /* green */ color: #0f0; /* green in shorthand */ }HSL stands for Hue, Saturation and Lightness.
HSL代表色相，饱和度和亮度。
Hue is specified in degrees from 0 to 360 – and corresponds to a position around the color wheel. 0 degrees represents red and then colors blend through oranges, yellows, greens, blues, purples, pinks and back to red again at 360 degrees.
色相的指定范围是0到360 –对应于色轮周围的位置。 0度表示红色，然后颜色通过橙色，黄色，绿色，蓝色，紫色，粉红色混合，然后在360度再次变回红色。
Saturation determines how vivid a color is from 0% – monochrome – to 100% – vivid.
饱和度确定颜色从0％(单色)到100％(鲜艳)的鲜艳程度。
Lightness is also set as a percentage and determines the overall amount of luminance.
亮度也设置为百分比，并确定总体亮度。
HSL has the corresponding HSLA version which allows for alpha transparency.
HSL具有对应的HSLA版本，该版本允许alpha透明。
.box { color: hsl(0, 0%, 100%); /* white */ color: hsla(0, 0%, 100%, 0.5); /* semi-transparent white */ }So, how do we use these colors?
那么，我们如何使用这些颜色呢？
The color property only effects text – so it allows us to set the text color of an element.
color属性仅影响文本-因此它允许我们设置元素的文本颜色。
But there are lots of other properties that accept a color. background-color, for example, or color stops in a gradient. We can also set border-color or the color component of box-shadow or text-shadow. We can even change the fill color of an SVG path or polygon.
但是，还有许多其他接受颜色的属性。 例如background-color或color以渐变形式停止。 我们还可以设置border-color或box-shadow或text-shadow的颜色分量。 我们甚至可以更改SVG路径或多边形的fill颜色。
.box { background-color: #000; background-image:linear-gradient(to right, #000, #fff); border-color: #000; box-shadow: 0 0 10px #000; } .text { text-shadow: 0 0 10px #000; } .svg path { fill: #000; }There is one last color keyword that has a unique if not entirely useful purpose. currentColor is a special keyword that links the value of the color property to other properties that accept a color value like border-color, box-shadow and text-shadow. Let’s have a look at a quick demo.
最后一个颜色关键字具有唯一的目的，即使不是完全有用的目的。 currentColor是一个特殊的关键字，它将color属性的值链接到其他接受颜色值的属性，例如border-color ， box-shadow和text-shadow 。 让我们看一下快速演示。
We can create a box with a border and a drop shadow as follows and pass in the color values as a keyword, hex, rgb or hsl. If instead of a color value, we use currentColor, the color of the border and drop shadow is black – which is the default value for the color property.
我们可以创建一个带有边框和阴影的框，如下所示，并将颜色值作为关键字，十六进制，rgb或hsl传递。 如果使用currentColor而不是颜色值，则边框和阴影的颜色为黑色–这是color属性的默认值。
If we now set the color to hotpink, this will be used in place of currentColor instead. This allows us to remove the color value from the border and box-shadow properties. Which maybe saves you a few keystrokes.
如果现在将颜色设置为hotpink，它将代替currentColor使用。 这使我们可以从border和box-shadow属性中删除颜色值。 这也许可以节省您一些按键操作。
.box { color: hotpink; padding: 50px; border: 10px solid; /* border-color is hotpink */ box-shadow: 0 0 100px; /* shadow color is hotpink */ }Watch out for our Quick Tip article coming soon!
请留意即将发布的“快速提示”文章！
翻译自: https://www.sitepoint.com/atoz-css-screencast-color/
相关资源：jdk-8u281-windows-x64.exe