阅读(13.8k) 书签赞(7) 我要纠错

CSS 颜色

2018-10-31 14:25 更新

CSS 颜色

使用CSS时，您可以指定不同方式范围内的颜色。

我们可以使用预定义的颜色名称。或者我们可以为每个红色，绿色和蓝色组件使用十进制或十六进制值。

十进制值由逗号分隔，十六进制值为通常以＃为前缀，如 #ffffff ，表示白色。

下表具有一些预定义的颜色名称及其十进制和十六进制等效值。

颜色名称	十六进制	十进制
black	#000000	0,0,0
green	#008000	0,128,0
silver	#C0C0C0	192,192,192
lime	#00FF00	0,255,0
gray	#808080	128,128,128
olive	#808000	128,128,0
white	#FFFFFF	255,255,255
yellow	#FFFF00	255,255,0
maroon	#800000	128,0,0
navy	#000080	0,0,128
red	#FF0000	255,0,0
blue	#0000FF	0,0,255
purple	#800080	128,0,128
teal	#008080	0,128,128
aqua	#00FFFF	0,255,255

这些被称为基本颜色名称。

下表显示了可以使用的扩展灰度阴影。

颜色名称	十六进制	十进制
darkgray	#a9a9a9	169,169,169
darkslategray	#2f4f4f	47,79,79
dimgray	#696969	105,105,105
gray	#808080	128,128,128
lightgray	#d3d3d3	211,211,211
lightslategray	#778899	119,136,153
slategray	#708090	112,128,144

RGB值简写

对红色，绿色和蓝色分量使用十六进制值。每对都是十六进制符号，范围为00 - FF。

十六进制值通常以＃作为前缀，如#ffffff，表示白色。 “纯”蓝色将被写入＃0000FF，“纯”红色被写入＃FF0000。

#RGB 是上述六位数符号的较短形式。在此格式中，每个数字都被复制以获得等效的六位数值，例如＃F7C变为＃FF77CC。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
body {
    background-color: yellow;
}

div#one {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(128, 128, 128);
    margin: 5px;
    float: left;
    background-color: #000;
}
        </style>
    </head>
    <body>
        <div id="one"></div>
    </body>
</html>

颜色函数

颜色名称和简单的十六进制值不是您可以指定颜色的唯一方法。

有许多函数允许您选择颜色。

rgb（r，g，b）使用RGB模型指定颜色。
示例：rgb（112，128，144）
rgba（r，g，b，a）使用RGB模型指定颜色，添加了alpha值以指定不透明度。值为0是完全透明的; 值为1是完全不透明的。
示例：rgba（112，128，144，0.4）
hsl（h，s，l）使用色相，饱和度和亮度（HSL）模型指定颜色。
示例：hsl（120,100％，22％）
hsla（h，s，l，a）使用alpha值来指定不透明度。
示例：hsla（120,100％，22％，0.4）

rgb(rrr.rr％，ggg.gg％，bbb.bb％)使用0％到100％范围内的RGB值，允许十进制值（例如75.5％）。因此，黑色的值将是rgb（0％，0％，0％），而蓝色将是rgb（0％，0％，100％）。

在 rgb(rrr，ggg，bbb)中，接受的值范围是0-255。范围是十六进制的00-FF的十进制等效值。在此格式中，绿色将为rgb（0,255,0），白色将表示为rgb（255,255,255）。

下表列出了颜色名称，十六进制颜色值和rgb颜色值。

颜色	HEXCOLOR	RGB颜色
Black	#000000	rgb(0,0,0)
Red	#FF0000	rgb(255,0,0)
Green	#00FF00	rgb(0,255,0)
Blue	#0000FF	rgb(0,0,255)
Yellow	#FFFF00	rgb(255,255,0)
Cyan	#00FFFF	rgb(0,255,255)
Magenta	#FF00FF	rgb(255,0,255)
Gray	#C0C0C0	rgb(192,192,192)
White	#FFFFFF	rgb(255,255,255)

以下代码显示如何使用色彩函数。

<!DOCTYPE HTML> 
<html> 
<body> 
    <p style="background-color:#C0C0C0"> 
    Color set by using hex value 
    </p> 
    <p style="background-color:rgb(192,192,192)"> 
    Color set by using rgb value 
    </p> 
    <p style="background-color:gray"> 
    Color set by using color name 
    </p> 
</body> 
</html>

在上面的代码中，我们使用各种形式的颜色值来设置段落的背景颜色。

CSS3中的扩展颜色关键字

名称	十六进制	RGB
aliceblue	#f0f8ff	240，248，255
antiquewhite	#faebd7	250，235，215
aqua	#00ffff	0，255，255
aquamarine	#7fffd4	127，255，212
azure	#f0ffff	240，255，255
beige	#f5f5dc	245，245，220
bisque	#ffe4c4	255，228，196
black	#000000	0，0，0
blanchedalmond	#ffebcd	255，235，205
blue	#0000ff	0，0，255
blueviolet	#8a2be2	138，43，226
brown	#a52a2a	165，42，42
burlywood	#deb887	222，184，135
cadetblue	#5f9ea0	95，158，160
chartreuse	#7fff00	127，255，0
chocolate	#d2691e	210，105，30
coral	#ff7f50	255，127，80
cornflowerblue	#6495ed	100，149，237
cornsilk	#fff8dc	255，248，220
crimson	#dc143c	220，20，60
cyan	#00ffff	0，255，255
darkblue	#00008b	0，0，139
darkcyan	#008b8b	0，139，139
darkgoldenrod	#b8860b	184，134，11
darkgray	#a9a9a9	169，169，169
darkgreen	#006400	0，100，0
darkgrey	#a9a9a9	169，169，169
darkkhaki	#bdb76b	189，183，107
darkmagenta	#8b008b	139，0，139
darkolivegreen	#556b2f	85，107，47
darkorange	#ff8c00	255，140，0
darkorchid	#9932cc	153，50，204
darkred	#8b0000	139，0，0
darksalmon	#e9967a	233，150，122
darkseagreen	#8fbc8f	143，188，143
darkslateblue	#483d8b	72，61，139
darkslategray	#2f4f4f	47，79，79
darkslategrey	#2f4f4f	47，79，79
darkturquoise	#00ced1	0，206，209
darkviolet	#9400d3	148，0，211
deeppink	#ff1493	255，20，147
deepskyblue	#00bfff	0，191，255
dimgray	#696969	105，105，105
dimgrey	#696969	105，105，105
dodgerblue	#1e90ff	30，144，255
firebrick	#b22222	178，34，34
floralwhite	#fffaf0	255，250，240
forestgreen	#228b22	34，139，34
fuchsia	#ff00ff	255，0，255
gainsboro	#dcdcdc	220，220，220
ghostwhite	#f8f8ff	248，248，255
gold	#ffd700	255，215，0
goldenrod	#daa520	218，165，32
gray	#808080	128，128，128
green	#008000	0，128，0
greenyellow	#adff2f	173，255，47
grey	#808080	128，128，128
honeydew	#f0fff0	240，255，240
hotpink	#ff69b4	255，105，180
indianred	#cd5c5c	205，92，92
indigo	#4b0082	75，0，130
ivory	#fffff0	255，255，240
khaki	#f0e68c	240，230，140
lavender	#e6e6fa	230，230，250
lavenderblush	#fff0f5	255，240，245
lawngreen	#7cfc00	124，252，0
lemonchiffon	#fffacd	255，250，205
lightblue	#add8e6	173，216，230
lightcoral	#f08080	240，128，128
lightcyan	#e0ffff	224，255，255
lightgoldenrodyellow	#fafad2	250，250，210
lightgray	#d3d3d3	211，211，211
lightgreen	#90ee90	144，238，144
lightgrey	#d3d3d3	211，211，211
lightpink	#ffb6c1	255，182，193
lightsalmon	#ffa07a	255，160，122
lightseagreen	#20b2aa	32，178，170
lightskyblue	#87cefa	135，206，250
lightslategray	#778899	119，136，153
lightslategrey	#778899	119，136，153
lightsteelblue	#b0c4de	176，196，222
lightyellow	#ffffe0	255，255，224
lime	#00ff00	0，255，0
limegreen	#32cd32	50，205，50
linen	#faf0e6	250，240，230
magenta	#ff00ff	255，0，255
maroon	#800000	128，0，0
mediumaquamarine	#66cdaa	102，205，170
mediumblue	#0000cd	0，0，205
mediumorchid	#ba55d3	186，85，211
mediumpurple	#9370db	147，112，219
mediumseagreen	#3cb371	60，179，113
mediumslateblue	#7b68ee	123，104，238
mediumspringgreen	#00fa9a	0，250，154
mediumturquoise	#48d1cc	72，209，204
mediumvioletred	#c71585	199，21，133
midnightblue	#191970	25，25，112
mintcream	#f5fffa	245，255，250
mistyrose	#ffe4e1	255，228，225
moccasin	#ffe4b5	255，228，181
navajowhite	#ffdead	255，222，173
navy	#000080	0，0，128
oldlace	#fdf5e6	253，245，230
olive	#808000	128，128，0
olivedrab	#6b8e23	107，142，35
orange	#ffa500	255，165，0
orangered	#ff4500	255，69，0
orchid	#da70d6	218，112，214
palegoldenrod	#eee8aa	238，232，170
palegreen	#98fb98	152，251，152
paleturquoise	#afeeee	175，238，238
palevioletred	#db7093	219，112，147
papayawhip	#ffefd5	255，239，213
peachpuff	#ffdab9	255，218，185
peru	#cd853f	205，133，63
pink	#ffc0cb	255，192，203
plum	#dda0dd	221，160，221
powderblue	#b0e0e6	176，224，230
purple	#800080	128，0，128
red	#ff0000	255，0，0
rosybrown	#bc8f8f	188，143，143
royalblue	#4169e1	65，105，225
saddlebrown	#8b4513	139，69，19
salmon	#fa8072	250，128，114
sandybrown	#f4a460	244，164，96
seagreen	#2e8b57	46，139，87
seashell	#fff5ee	255，245，238
sienna	#a0522d	160，82，45
silver	#c0c0c0	192，192，192
skyblue	#87ceeb	135，206，235
slateblue	#6a5acd	106，90，205
slategray	#708090	112，128，144
slategrey	#708090	112，128，144
snow	#fffafa	255，250，250
springgreen	#00ff7f	0，255，127
steelblue	#4682b4	70，130，180
tan	#d2b48c	210，180，140
teal	#008080	0，128，128
thistle	#d8bfd8	216，191，216
tomato	#ff6347	255，99，71
turquoise	#40e0d0	64，224，208
violet	#ee82ee	238，130，238
wheat	#f5deb3	245，222，179
white	#ffffff	255，255，255
whitesmoke	#f5f5f5	245，245，245
yellow	#ffff00	255，255，0
yellowgreen	#9acd32	154，205，50

例子

以下代码显示如何使用颜色名称及其相应的RGB值和十六进制等效值。


<!DOCTYPE HTML>
<html>
<head>
<title>Named colors in CSS</title>
<style type="text/css">
table {
  border-spacing: 2em 1em;
  margin:25px auto;
}
caption {
  font-family:Tahoma, Geneva, sans-serif;
  font-weight:bold;
  font-size:20px;
}
td {
  border: #000 solid 1px;
  text-align:center;
  padding:10px;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#FFF;
  width:7em;
  white-space: pre;
}
#aqua {
  background-color:aqua;
}
#black {
  background-color:black;
}
#blue {
  background-color:blue;
}
#fuchsia {
  background-color:fuchsia;
}
#gray {
  background-color:gray;
}
#green {
  background-color:green;
}
#lime {
  background-color:lime;
}
#maroon {
  background-color:maroon;
}
#navy {
  background-color:navy;
}
#olive {
  background-color:olive;
}
#purple {
  background-color:purple;
}
#red {
  background-color:red;
}
#silver {
  background-color:silver;
}
#teal {
  background-color:teal;
}
#white {
  background-color:white;
}
#yellow {
  background-color:yellow;
}
#aqua, #fuchsia, #lime, #red, #silver, #white, #yellow {
  color:black;
}
</style>
</head>

<body>
<table>
    <caption>
    Basic Color Keywords
    </caption>
    <tr>
        <td id="aqua">aqua
#00FFFF
0, 255, 255</td>
        <td id="black">black
#000000
0, 0, 0</td>
        <td id="blue">blue
#0000FF
0, 0, 255</td>
        <td id="fuchsia">fuchsia
#FF00FF
255, 0, 255</td>
    </tr>
    <tr>
        <td id="gray">gray
#808080
128, 128, 128</td>
        <td id="green">green
#008000
0, 128, 0</td>
        <td id="lime">lime
#00FF00
0, 255, 0</td>
        <td id="maroon">maroon
#800000
128, 0, 0</td>
    </tr>
    <tr>
        <td id="navy">navy
#000080
0, 0, 128</td>
        <td id="olive">olive
#808000
128, 128, 0</td>
        <td id="purple">purple
#800080
128, 0, 128</td>
        <td id="red">red
#FF0000
255, 0, 0</td>
    </tr>
    <tr>
        <td id="silver">silver
#C0C0C0
192, 192, 192</td>
        <td id="teal">teal
#008080
0, 128, 128</td>
        <td id="white">white
#FFFFFF
255, 255, 255</td>
        <td id="yellow">yellow
#FFFF00
255, 255, 0</td>
    </tr>
</table>
</body>
</html>