2024年4月22日发(作者：)

7-29-19-css 常用颜色值

在 CSS 中，你可以使用各种不同的颜色值来设置元素的文本颜

色、背景颜色和边框颜色等。以下是一些常用的颜色值的示例：

颜色关键词：CSS 提供了一些命名的颜色关键词，如 "red"（红

色）、"blue"（蓝色）、"green"（绿色）、"yellow"（黄色）等。

color: red;

background-color: lightblue;

border: 2px solid green;

十六进制颜色值：你可以使用十六进制表示法来定义颜色。它通

常由一个井号（#）后跟六个十六进制数字组成，代表红色、绿色和

蓝色（RGB）的组合。例如，"#FF0000" 表示纯红色，"#00FF00" 表

示纯绿色，"#0000FF" 表示纯蓝色。

color: #FF0000; /* 红色 */

background-color: #00FF00; /* 绿色 */

border: 2px solid #0000FF; /* 蓝色 */

RGB 函数：你可以使用 rgb() 函数来定义颜色，它接受红色、

绿色和蓝色的值，每个值的范围在 0 到 255 之间。

color: rgb(255, 0, 0); /* 红色 */

background-color: rgb(0, 255, 0); /* 绿色 */

1 / 2

border: 2px solid rgb(0, 0, 255); /* 蓝色 */

RGBA 函数：类似于 rgb()，你可以使用 rgba() 函数来定义颜

色，不同之处在于它还接受一个表示不透明度的值，范围在 0 到 1

之间。这允许你定义半透明颜色。

color: rgba(255, 0, 0, 0.5); /* 半透明红色 */

background-color: rgba(0, 255, 0, 0.7); /* 半透明绿色 */

HSL 函数：HSL（色相、饱和度、亮度）颜色表示法允许你基于

色相、饱和度和亮度的值来定义颜色。

color: hsl(0, 100%, 50%); /* 红色 */

background-color: hsl(120, 100%, 50%); /* 绿色 */

这些示例只是一部分常用的颜色值，你可以根据需要选择合适的

颜色值来设计和样式化你的网页。在实际开发中，通常会根据品牌、

用户体验和设计需求来选择颜色。

2 / 2