菜鸟教程
教程 css tutorial

颜色表示法

CSS 支持多种颜色表示方式，用于设置文字颜色、背景色、边框色等。

1. 十六进制（Hex）

以 # 开头，后跟 3 或 6 位十六进制数：

css 
color: #ff0000; /* 红色 */
color: #0f0; /* 绿色，简写 */

2. RGB

用 rgb() 函数表示红、绿、蓝三色，范围 0-255：

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

3. RGBA

RGBA 在 RGB 基础上增加透明度（alpha），范围 0-1：

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

4. HSL

用色相、饱和度、亮度表示颜色：

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

5. HSLA

在 HSL 上增加透明度：

css 
color: hsla(0, 100%, 50%, 0.5);

6. 颜色名称

CSS 支持多种标准颜色名称：

css 
color: red;
color: blue;
color: green;

7. 代码演示

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>颜色表示法示例</title>
<style>
.hex {
color: #ff0000;
}


.hex-short {
  color: #0f0;
}

.rgb {
  color: rgb(255, 0, 0);
}

.rgba {
  color: rgba(255, 0, 0, 0.5);
}

.hsl {
  color: hsl(0, 100%, 50%);
}

.hsla {
  color: hsla(0, 100%, 50%, 0.5);
}

.name {
  color: blue;
}



</style>
</head>


<body>
<p class="hex">十六进制 #ff0000 红色</p>
<p class="hex-short">简写十六进制 #0f0 绿色</p>
<p class="rgb">RGB rgb(255, 0, 0) 红色</p>
<p class="rgba">RGBA rgba(255, 0, 0, 0.5) 半透明红色</p>
<p class="hsl">HSL hsl(0, 100%, 50%) 红色</p>
<p class="hsla">HSLA hsla(0, 100%, 50%, 0.5) 半透明红色</p>
<p class="name">颜色名称 blue 蓝色</p>
</body>


</html>

相关内容