CSS颜色

颜色是CSS设计中非常重要的一部分，它可以用来增强视觉效果、传达信息和提升用户体验。CSS提供了多种颜色表示方法，让开发者可以精确地控制元素的颜色。

CSS颜色的表示方法

CSS支持多种颜色表示方法，包括：

  1. 命名颜色
  2. 十六进制颜色
  3. RGB颜色
  4. RGBA颜色（带透明度）
  5. HSL颜色
  6. HSLA颜色（带透明度）
  7. 颜色函数

1. 命名颜色

CSS定义了一系列预定义的颜色名称，可以直接使用。这些颜色名称包括基本颜色和扩展颜色。

基本命名颜色

css 
/* 基本颜色名称 */
.red {
  color: red;
}

.green {
  color: green;
}

.blue {
  color: blue;
}

.yellow {
  color: yellow;
}

.black {
  color: black;
}

.white {
  color: white;
}

.gray {
  color: gray;
}

.silver {
  color: silver;
}

.maroon {
  color: maroon;
}

.purple {
  color: purple;
}

.teal {
  color: teal;
}

.navy {
  color: navy;
}

扩展命名颜色

CSS还支持更多的扩展颜色名称，如：

css 
/* 扩展颜色名称 */
.aqua {
  color: aqua;
}

.lime {
  color: lime;
}

.fuchsia {
  color: fuchsia;
}

.olive {
  color: olive;
}

.Orange {
  color: orange;
}

.lightblue {
  color: lightblue;
}

.pink {
  color: pink;
}

.gold {
  color: gold;
}

.brown {
  color: brown;
}

.cyan {
  color: cyan;
}

2. 十六进制颜色

十六进制颜色是最常用的颜色表示方法之一，使用#符号后跟6个十六进制数字（0-9, A-F）。

基本语法

css 
/* 十六进制颜色表示 */
.primary {
  color: #ff0000;  /* 红色 */
}

.secondary {
  color: #00ff00;  /* 绿色 */
}

.tertiary {
  color: #0000ff;  /* 蓝色 */
}

简写形式

当十六进制颜色的每两个数字相同时，可以使用简写形式（3个数字）。

css 
/* 简写形式（等价于#ff0000） */
.red {
  color: #f00;
}

/* 简写形式（等价于#00ff00） */
.green {
  color: #0f0;
}

/* 简写形式（等价于#0000ff） */
.blue {
  color: #00f;
}

/* 简写形式（等价于#ffffff） */
.white {
  color: #fff;
}

/* 简写形式（等价于#000000） */
.black {
  color: #000;
}

3. RGB颜色

RGB颜色使用rgb()函数表示，参数分别为红、绿、蓝三个通道的值，范围为0-255。

基本语法

css 
/* RGB颜色表示 */
.red {
  color: rgb(255, 0, 0);  /* 红色 */
}

.green {
  color: rgb(0, 255, 0);  /* 绿色 */
}

.blue {
  color: rgb(0, 0, 255);  /* 蓝色 */
}

.yellow {
  color: rgb(255, 255, 0);  /* 黄色 */
}

.purple {
  color: rgb(128, 0, 128);  /* 紫色 */
}

.gray {
  color: rgb(128, 128, 128);  /* 灰色 */
}

4. RGBA颜色

RGBA颜色是RGB颜色的扩展，增加了一个透明度（alpha）通道，使用rgba()函数表示。透明度值范围为0（完全透明）到1（完全不透明）。

基本语法

css 
/* RGBA颜色表示 */
.semi-transparent-red {
  color: rgba(255, 0, 0, 0.5);  /* 半透明红色 */
}

.semi-transparent-blue {
  background-color: rgba(0, 0, 255, 0.3);  /* 30%不透明度的蓝色背景 */
}

.overlay {
  background-color: rgba(0, 0, 0, 0.8);  /* 80%不透明度的黑色遮罩 */
}

5. HSL颜色

HSL颜色使用色相（Hue）、饱和度（Saturation）和亮度（Lightness）三个值来表示颜色，使用hsl()函数表示。

  • 色相（H）：范围为0-360度，代表颜色的基本属性（如红色为0度，绿色为120度，蓝色为240度）
  • 饱和度（S）：范围为0%-100%，表示颜色的鲜艳程度（0%为灰色，100%为纯色）
  • 亮度（L）：范围为0%-100%，表示颜色的明暗程度（0%为黑色，50%为正常亮度，100%为白色）

基本语法

css 
/* HSL颜色表示 */
.red {
  color: hsl(0, 100%, 50%);  /* 红色 */
}

.green {
  color: hsl(120, 100%, 50%);  /* 绿色 */
}

.blue {
  color: hsl(240, 100%, 50%);  /* 蓝色 */
}

.yellow {
  color: hsl(60, 100%, 50%);  /* 黄色 */
}

.purple {
  color: hsl(270, 100%, 50%);  /* 紫色 */
}

.light-blue {
  color: hsl(210, 100%, 75%);  /* 浅蓝色（亮度更高） */
}

.dark-red {
  color: hsl(0, 100%, 25%);  /* 深红色（亮度更低） */
}

.gray {
  color: hsl(0, 0%, 50%);  /* 灰色（饱和度为0%） */
}

6. HSLA颜色

HSLA颜色是HSL颜色的扩展，增加了一个透明度（alpha）通道，使用hsla()函数表示。透明度值范围为0（完全透明）到1（完全不透明）。

基本语法

css 
/* HSLA颜色表示 */
.semi-transparent-green {
  color: hsla(120, 100%, 50%, 0.5);  /* 半透明绿色 */
}

.semi-transparent-yellow {
  background-color: hsla(60, 100%, 50%, 0.3);  /* 30%不透明度的黄色背景 */
}

.overlay {
  background-color: hsla(0, 0%, 0%, 0.7);  /* 70%不透明度的黑色遮罩 */
}

7. 颜色函数

CSS还提供了一些颜色函数，可以用来动态生成颜色：

rgb()和rgba()函数

css 
/* 使用rgb()函数 */
.color1 {
  color: rgb(255, 0, 0);
}

/* 使用rgba()函数 */
.color2 {
  color: rgba(255, 0, 0, 0.5);
}

hsl()和hsla()函数

css 
/* 使用hsl()函数 */
.color3 {
  color: hsl(120, 100%, 50%);
}

/* 使用hsla()函数 */
.color4 {
  color: hsla(120, 100%, 50%, 0.5);
}

currentColor关键字

currentColor关键字表示当前元素的文本颜色，可以在其他颜色属性中使用。

css 
.button {
  color: blue;
  border: 2px solid currentColor;  /* 边框颜色与文本颜色相同 */
  background-color: transparent;
}

.button:hover {
  color: red;  /* 文本颜色变为红色，边框颜色也会随之改变 */
}

CSS变量

可以使用CSS变量来存储和重用颜色值。

css 
/* 定义颜色变量 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --background-color: #f4f4f4;
}

/* 使用颜色变量 */
body {
  color: var(--text-color);
  background-color: var(--background-color);
}

.button {
  background-color: var(--primary-color);
  color: white;
}

.button.secondary {
  background-color: var(--secondary-color);
}

CSS颜色的应用

颜色可以应用于CSS的多种属性，包括：

文本颜色

css 
.text {
  color: #333;
}

.heading {
  color: #2c3e50;
}

.link {
  color: #3498db;
}

.link:hover {
  color: #2980b9;
}

背景颜色

css 
body {
  background-color: #f4f4f4;
}

.container {
  background-color: white;
}

.highlight {
  background-color: #ffffcc;
}

边框颜色

css 
.border {
  border: 1px solid #ddd;
}

.error {
  border: 2px solid #e74c3c;
}

.success {
  border: 2px solid #2ecc71;
}

其他颜色属性

css 
/* 文本阴影颜色 */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 盒阴影颜色 */
.box-shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 渐变颜色 */
.gradient {
  background: linear-gradient(to right, #3498db, #2ecc71);
}

颜色选择的最佳实践

1. 考虑可访问性

确保文本颜色与背景颜色有足够的对比度，以提高可读性，特别是对于视力障碍用户。

css 
/* 好的对比度 - 黑色文本在白色背景上 */
body {
  color: #000000;
  background-color: #ffffff;
}

/* 好的对比度 - 白色文本在深色背景上 */
.dark-theme {
  color: #ffffff;
  background-color: #2c3e50;
}

/* 不好的对比度 - 浅色文本在浅色背景上 */
.poor-contrast {
  color: #cccccc;
  background-color: #f0f0f0;
}

2. 保持一致性

在整个网站中使用一致的颜色方案，建立品牌识别和用户信任。

css 
/* 一致的颜色方案 */
:root {
  --brand-primary: #3498db;
  --brand-secondary: #2ecc71;
  --brand-accent: #e74c3c;
  --text-primary: #333333;
  --text-secondary: #7f8c8d;
  --background-light: #ffffff;
  --background-dark: #f4f4f4;
}

3. 使用颜色传达信息

利用颜色来传达特定的信息，如红色表示错误，绿色表示成功，黄色表示警告等。

css 
/* 使用颜色传达信息 */
.error {
  color: #e74c3c;
}

.success {
  color: #2ecc71;
}

.warning {
  color: #f39c12;
}

.info {
  color: #3498db;
}

4. 考虑不同设备的显示效果

不同设备的屏幕可能会显示不同的颜色效果，尽量使用标准的颜色表示方法，以确保颜色在不同设备上的一致性。

5. 使用颜色工具

可以使用各种颜色工具来帮助选择和调整颜色，如：

颜色值的转换

不同的颜色表示方法之间可以相互转换：

十六进制转RGB

text 
#FF0000 → rgb(255, 0, 0)
#00FF00 → rgb(0, 255, 0)
#0000FF → rgb(0, 0, 255)
#800080 → rgb(128, 0, 128)
#CCCCCC → rgb(204, 204, 204)

RGB转十六进制

text 
rgb(255, 0, 0) → #FF0000
rgb(0, 255, 0) → #00FF00
rgb(0, 0, 255) → #0000FF
rgb(128, 128, 128) → #808080
rgb(255, 255, 0) → #FFFF00

RGB转HSL

text 
rgb(255, 0, 0) → hsl(0, 100%, 50%)
rgb(0, 255, 0) → hsl(120, 100%, 50%)
rgb(0, 0, 255) → hsl(240, 100%, 50%)
rgb(128, 128, 128) → hsl(0, 0%, 50%)

总结

CSS提供了多种颜色表示方法，让开发者可以精确地控制元素的颜色：

  • 命名颜色：简单易用，但颜色种类有限
  • 十六进制颜色：最常用的颜色表示方法，支持1600万种颜色
  • RGB颜色：基于红、绿、蓝三原色的颜色表示
  • RGBA颜色：支持透明度的RGB颜色
  • HSL颜色：基于色相、饱和度和亮度的颜色表示，便于调整颜色
  • HSLA颜色：支持透明度的HSL颜色

选择合适的颜色表示方法取决于具体的需求和个人偏好。在实际开发中，通常会结合使用多种颜色表示方法，并遵循颜色选择的最佳实践，以创建美观、可访问和一致的设计。

继续学习CSS选择器，深入了解CSS选择器的使用方法。

最后更新：2026-02-07