CSS-颜色参考

CSS中的颜色有多种表示方法，有颜色名、十六进制、RGB值、HSL值等等。本文将对这些颜色表示方法进行讲解，并提供常见的颜色名称及其对应的十六进制表示。

颜色名称

在CSS中，可以直接使用颜色名称来设置颜色。以下是常见的颜色名称及其对应的十六进制值。

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

示例代码：

body {
  background-color: silver;
  color: black;
}

十六进制表示法

使用十六进制表示法可以精确地指定颜色。十六进制表示法的格式为#RRGGBB，其中RR表示红色的值，GG表示绿色的值，BB表示蓝色的值。每个值的范围为00到FF，共256个取值。以下是一些常见颜色的十六进制表示法。

| 颜色 | 十六进制值 | | --- | --- | | 白色 | #FFFFFF | | 黑色 | #000000 | | 红色 | #FF0000 | | 绿色 | #00FF00 | | 蓝色 | #0000FF | | 粉色 | #FF00FF | | 青色 | #00FFFF | | 黄色 | #FFFF00 | | 灰色 | #808080 | | 橙色 | #FFA500 |

示例代码：

a:hover {
  color: #FF00FF;
}

RGB表示法

RGB表示法是指使用红、绿、蓝三个颜色通道的数值来描述颜色。CSS中的RGB颜色值由三个用逗号分隔的数字组成，分别表示红、绿、蓝的颜色值，每个值的范围为0到255。以下是一些常见颜色的RGB表示法。

| 颜色 | RGB表示法 | | --- | --- | | 白色 | rgb(255, 255, 255) | | 黑色 | rgb(0, 0, 0) | | 红色 | rgb(255, 0, 0) | | 绿色 | rgb(0, 255, 0) | | 蓝色 | rgb(0, 0, 255) | | 粉色 | rgb(255, 0, 255) | | 青色 | rgb(0, 255, 255) | | 黄色 | rgb(255, 255, 0) | | 灰色 | rgb(128, 128, 128) | | 橙色 | rgb(255, 165, 0) |

示例代码：

p {
  color: rgb(255, 165, 0);
}

HSL表示法

HSL表示法是指使用色相、饱和度和亮度三个参数来描述颜色。CSS中的HSL颜色值由三个用逗号分隔的数字或者百分比值组成，分别表示色相、饱和度和亮度。以下是一些常见颜色的HSL表示法。

| 颜色 | HSL表示法 | | --- | --- | | 白色 | hsl(0, 0%, 100%) | | 黑色 | hsl(0, 0%, 0%) | | 红色 | hsl(0, 100%, 50%) | | 绿色 | hsl(120, 100%, 50%) | | 蓝色 | hsl(240, 100%, 50%) | | 粉色 | hsl(300, 100%, 50%) | | 青色 | hsl(180, 100%, 50%) | | 黄色 | hsl(60, 100%, 50%) | | 灰色 | hsl(0, 0%, 50%) | | 橙色 | hsl(39, 100%, 50%) |

示例代码：

h1 {
  color: hsl(39, 100%, 50%);
}

总结：以上是CSS中常用的颜色表示方法及其对应的颜色名称、十六进制值、RGB值和HSL值。程序员们可根据需求选择不同的表示方法，灵活运用颜色来设计界面。