color 颜色属性

基本语法

color: 颜色值;
background-color: 颜色值;

颜色值的表示方法

1. 颜色名称

color: red;
color: blue;
color: green;
color: yellow;

2. 十六进制(推荐)

/* 标准格式: #RRGGBB */
color: #ff0000;    /* 红色 */
color: #00ff00;    /* 绿色 */
color: #0000ff;    /* 蓝色 */

/* 简写格式: 三组两两相同 */
color: #f00;       /* #ff0000 的简写 */
color: #0f0;       /* #00ff00 的简写 */
color: #00f;       /* #0000ff 的简写 */

/* 其他示例 */
color: #000;       /* 黑色 #000000 */
color: #fff;       /* 白色 #ffffff */
color: #ccc;       /* 灰色 #cccccc */
color: #ffccdd;    /* 浅粉色 */

3. RGB

/* 语法: rgb(红, 绿, 蓝) */
/* 每个数值范围: 0-255 */

color: rgb(255, 0, 0);      /* 红色 */
color: rgb(0, 255, 0);      /* 绿色 */
color: rgb(0, 0, 255);      /* 蓝色 */
color: rgb(86, 33, 33);     /* 暗红色 */
color: rgb(0, 0, 0);        /* 黑色 */
color: rgb(255, 255, 255);  /* 白色 */

4. RGBA(推荐用于透明度)

/* 语法: rgba(红, 绿, 蓝, 透明度) */
/* 透明度范围: 0-1, 越接近0越透明 */

color: rgba(255, 0, 0, 1);      /* 不透明红色 */
color: rgba(255, 0, 0, 0.5);    /* 半透明红色 */
color: rgba(255, 0, 0, 0.1);    /* 几乎完全透明 */
color: rgba(255, 0, 0, 0);      /* 完全透明 */

background-color: rgba(21, 21, 34, 0.5);  /* 半透明背景 */

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>color 颜色属性</title>
  <style>
    /* 十六进制 */
    .color16 {
      color: #ffccdd;
      /* 简写: 三组两两相同 */
      color: #000000;  /* 可写成 #000 */
      color: #ffffff;  /* 可写成 #fff */
    }

    /* RGB */
    .rgbcolor {
      color: rgb(86, 33, 33);
    }

    /* RGBA 透明处理 */
    .bgcolor {
      background-color: rgba(21, 21, 34, 0.5);
      color: white;
    }
  </style>
</head>
<body>
  <div class="color16">十六进制颜色</div>
  <div class="rgbcolor">RGB颜色</div>
  <div class="bgcolor">半透明背景</div>
</body>
</html>

常用颜色值对照表

颜色	英文名称	十六进制	RGB
黑色	black	#000000	rgb(0,0,0)
白色	white	#ffffff	rgb(255,255,255)
红色	red	#ff0000	rgb(255,0,0)
绿色	green	#008000	rgb(0,128,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)
橙色	orange	#ffa500	rgb(255,165,0)
紫色	purple	#800080	rgb(128,0,128)
灰色	gray	#808080	rgb(128,128,128)

实际应用

场景1: 文字颜色

.title {
  color: #333;        /* 深灰色 */
}

.highlight {
  color: #ff0000;    /* 红色强调 */
}

.muted {
  color: #999;        /* 浅灰色,次要文字 */
}

场景2: 背景颜色(带透明度)

.overlay {
  background-color: rgba(0, 0, 0, 0.5);  /* 半透明黑色遮罩 */
}

.modal-bg {
  background-color: rgba(255, 255, 255, 0.9);  /* 半透明白色背景 */
}

场景3: 渐变背景

.gradient-bg {
  background: linear-gradient(to right, #ff0000, #0000ff);
}

颜色选择器

使用浏览器开发者工具的颜色选择器:

打开开发者工具(F12)
选择 Elements 标签
在 Styles 面板中点击颜色值
使用颜色选择器选择颜色

学习要点

推荐方式: 十六进制(#000) 和 RGBA
简写规则: 三组两两相同可以简写(#ff0000 → #f00)
透明度: 使用 rgba() 实现半透明效果
范围: RGB 每个数值 0-255,透明度 0-1
工具: 使用浏览器颜色选择器

css css学习