开发学习网CSS - 颜色
原创CSS - 颜色
CSS使用颜色值来指定颜色。通常，这些值用于设置元素的前景（即文本）或元素的背景颜色。它们也可用于影响边框和其他装饰效果的颜色。
您可以使用各种格式指定颜色值。下表列出了所有可能的格式：
| 格式 | 语法 | 描述 | 示例 |
|---|---|---|---|
| 关键字 | <属性>: <颜色名> | CSS有一组预定义的颜色名称，您可以直接使用。 | red, blue, green, yellow, black, white等 |
| 十六进制代码 | #RRGGBB | 以哈希符号(#)开头，后跟十六位十六进制数字。 | #FF0000 - 红色 |
| 短十六进制代码 | #RGB | 十六进制格式的简短版本，其中每个RGB组件由单个数字表示，值被复制。 | #F00 - 红色 |
| RGB | rgb(红,绿,蓝) | 可以使用rgb()函数定义颜色，该函数接受三个代表红、绿、蓝值的参数。 | rgb(0, 0, 255) - 蓝色 |
| RGBA | rgba() | 类似于RGB，但增加了一个alpha（透明度）参数。0（完全透明）和1（完全不透明） | rgba(0,0,255,0.5) - 半透明蓝色 |
| HSL | hsl() | 可以使用hsl()函数定义颜色，代表色相（0到360度）、饱和度（%）和亮度（%）。 | hsl(120, 100%, 50%) - 纯绿色 |
| HSLA | hsla() | 类似于HSL，但增加了一个alpha（透明度）参数。 | hsl(120, 100%, 50%, 0.5) - 半透明绿色 |
| currentcolor关键字 | currentcolor | 它指的是元素的color属性的值。 | color: red; /* 红色文本颜色 */ border: 10px solid currentcolor; /* 红色边框颜色 */ |
| 系统颜色 | 根据操作系统或浏览器 | CSS允许使用由用户操作系统或浏览器定义的系统颜色。 | ButtonText, Window, WindowText |
以下各节将更详细地解释这些格式：
CSS颜色 - 关键字
CSS支持将颜色名称直接传递给background-color和color属性。CSS支持140种标准颜色名称。
下表列出了一些示例：
| 颜色 | 颜色名称 |
|---|---|
| Black | |
| Red | |
| Blue | |
| Green | |
| Aquamarine |
示例：
<html>
<head>
<style>
#colorkeyword{
background-color: aqua;
padding: 10px;
}
</style>
</head>
<body>
<h3>颜色关键字示例</h3>
<p>由于传递的关键字是aqua，背景将显示为青色。</p>
<div id="colorkeyword">
此div元素具有基于传递的颜色关键字的彩色背景，即aqua。
</div>
</body>
</html>
CSS颜色 - 十六进制代码
十六进制是颜色的6位表示。前两位数字(RR)代表红色值，接下来的两位是绿色值(GG)，最后是蓝色值(BB)。
十六进制值可以从任何图形软件中获取，如Adobe Photoshop、Jasc Paintshop Pro，甚至使用高级画笔。
每个十六进制代码前面都有一个英镑或哈希符号'#'。以下是十六进制表示法的示例。
注意：要指定十六进制代码，可以使用大写或小写字母。
| 颜色 | 颜色十六进制代码 |
|---|---|
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #C0C0C0 | |
| #FFFFFF |
示例：
<html>
<head>
<style>
#hexcode {
background-color: #00ff00;
padding: 10px;
}
</style>
</head>
<body>
<h3>十六进制代码示例</h3>
<p>由于十六进制代码是#00ff00，背景将显示为绿色。</p>
<div id="hexcode">
此div元素具有绿色背景。
</div>
</body>
</html>
CSS颜色 - 短十六进制代码
这是六位表示法的简短形式。在此格式中，每个数字被复制以获得等效的六位值。例如：#6A7变为#66AA77。
十六进制值可以从任何图形软件中获取，如Adobe Photoshop、Jasc Paintshop Pro，甚至使用高级画笔。
每个短十六进制代码前面都有一个英镑或哈希符号'#'。以下是短十六进制表示法的示例。
注意：要指定十六进制代码，可以使用大写或小写字母。
| 颜色 | 短十六进制代码 |
|---|---|
| #000 | |
| #F00 | |
| #0F0 | |
| #00F | |
| #FF0 | |
| #0FF | |
| #F0F | |
| #FFF |
示例：
<html>
<head>
<style>
#shorthex {
background-color: #00f;
padding: 10px;
}
</style>
</head>
<body>
<h3>短十六进制代码示例</h3>
<p>由于短十六进制代码是#00f，背景将显示为蓝色。</p>
<div id="shorthex">
此div元素具有蓝色背景。
</div>
</body>
</html>
CSS颜色 - RGB值
- 此颜色值使用rgb( )属性指定。
- 它接受三个值，分别代表红色、绿色和蓝色。
- 值可以是0到255之间的整数或百分比。
注意：并非所有浏览器都支持颜色的rgb()属性，因此不建议使用它。
以下是使用RGB值显示一些颜色的示例。
| 颜色 | 颜色RGB |
|---|---|
| rgb(0,0,0) | |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,255,0) | |
| rgb(0,255,255) | |
| rgb(255,0,255) | |
| rgb(192,192,192) | |
| rgb(255,255,255) |
示例：
<html>
<head>
<style>
#rgbvalue {
background-color: rgb(255,0,255);
padding: 10px;
}
</style>
</head>
<body>
<h3>RGB示例</h3>
<p>由于设置了rgb(255,0,255)，背景将相应显示。</p>
<div id="rgbvalue">
此div元素具有基于rgb值的彩色背景。
</div>
</body>
</html>
CSS颜色 - RGBA值
- 此颜色值使用rgba( )属性指定。
- 它接受四个值，分别代表红色、绿色、蓝色和最后一个alpha（透明度）值。
- alpha值可以是0到1之间的任何值。
注意：并非所有浏览器都支持颜色的rgba()属性，因此不建议使用。
以下是使用RGBA值显示一些颜色的示例。
| 颜色 | 颜色RGBA |
|---|---|
| rgba(0,0,0,0) | |
| rgba(255,0,0,0.2) | |
| rgba(0,255,0,0.3) | |
| rgba(0,0,255,0.5) | |
| rgba(255,255,0,0.7) | |
| rgba(0,255,255,0.1) | |
| rgba(255,0,255,1) | |
| rgba(192,192,192,0.4) | |
| rgba(255,255,255,1) |
示例：
<html>
<head>
<style>
#rgbavalue {
background-color: rgba(255,0,255,0.2);
padding: 10px;
}
</style>
</head>
<body>
<h3>RGBA示例</h3>
<p>由于设置了rgba(255,0,255,0.2)，背景将显示透明度为0.2。</p>
<div id="rgbavalue">
此div元素具有基于rgba值的彩色背景。
</div>
</body>
</html>
CSS颜色 - HSL值
- 此颜色值使用hsl()函数指定。
- HSL代表色相、饱和度和亮度。
- 色相以度数表示（0-360），饱和度和亮度以百分比表示（0%-100%）。
以下是使用HSL属性显示一些颜色的示例。
| 颜色 | 颜色HSL |
|---|---|
| hsl(0,0%,50%) | |
| hsl(255,80%,70%) | |
| hsl(290,100%,60%) | |
| hsl(360,70%,20%) | |
| hsl(89,80%,67%) |
示例：
<html>
<head>
<style>
#hslvalue {
background-color: hsl(355,70%,50%);
padding: 10px;
}
</style>
</head>
<body>
<h3>HSL示例</h3>
<p>由于设置了hsl(355,70,50%)，背景将根据传递的hsl值显示。</p>
<div id="hslvalue">
此div元素具有基于hsl值hsl(355,70%,50%)的彩色背景。
</div>
</body>
</html>
CSS颜色 - HSLA值
- 此颜色值使用hsl()函数指定。
- HSLA代表色相、饱和度、亮度和alpha。
- 它接受四个值，第一个是色相，第二个是饱和度，第三个是亮度，第四个是alpha（透明度）值。
- 色相以度数表示（0-360），饱和度和亮度以百分比表示（0%-100%），alpha值可以在0和1之间。
以下是使用HSLA属性显示一些颜色的示例。
| 颜色 | 颜色HSLA |
|---|---|
| hsla(0,0%,50%,0.5) | |
| hsla(255,80%,70%,1) | |
| hsla(290,100%,60%,0.2) | |
| hsla(360,70%,20%,0.4) | |
| hsla(89,80%,67%,0.9) |
示例：
<html>
<head>
<style>
#hslavalue {
background-color: hsla(355,70%,50%,0.4);
padding: 10px;
}
</style>
</head>
<body>
<h3>HSLA示例</h3>
<p>由于设置了hsla(355,70%,50%,0.4)，背景将根据传递的hsla值显示，具有高透明度。</p>
<div id="hslavalue">
此div元素具有基于hsl值hsla(355,70%,50%,0.4)的彩色背景。
</div>
</body>
</html>
CSS颜色 - currentcolor关键字
currentcolor关键字表示元素的color属性的值。它可以传递给任何其他样式属性，使用关键字currentcolor。
示例：
<html>
<head>
<style>
#currcolor {
color: red;
border: 5px solid currentcolor;
}
</style>
</head>
<body>
<h2>currentcolor关键字</h2>
<p>在color属性设置为红色后，currentcolor关键字用于边框，边框也将显示为红色。</p>
<div id="currcolor">
此div元素具有红色文本颜色和红色边框。
</div>
</body>
</html>
CSS颜色 - 构建颜色代码
您可以使用我们的颜色代码构建器构建数百万种颜色代码。查看HTML颜色代码构建器。
要使用此工具，您需要一个启用了Java的浏览器。
CSS颜色 - 浏览器安全颜色
以下是216种被认为是最安全和计算机独立颜色的列表。这些颜色从十六进制代码000000到FFFFFF不等。这些颜色可以安全使用，因为它们确保所有计算机在运行256色调色板时都能正确显示颜色：
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
CSS颜色 - 相关属性
与颜色相关的所有属性列在下表中：
| 属性 | 描述 |
|---|---|
| opacity | 设置元素的透明度级别。 |
| hue | 表示元素的色相角度。 |
| color | 设置元素文本和文本装饰的前景。 |
| background-color | 设置背景颜色。 |
| border-color | 设置元素边框的颜色。 |
| box-shadow | 在元素周围添加阴影效果。 |
| outline-color | 设置元素周围轮廓的颜色。 |
| text-shadow | 为元素的文本添加阴影。 |
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
上一篇：
HTML - 表格 下一篇：
HTML表格标题和说明
相关文章
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)