垦荒学园

简体中文

English

简体中文

English

切换主题

CSS 颜色 ​

颜色是 CSS 中最基本也是最重要的属性之一。CSS 提供了多种方式来定义和使用颜色，使网页设计更加丰富多彩。

颜色表示方法 ​

1. 颜色名称（Color Names） ​

CSS 支持 140+ 个预定义的颜色名称。

语法：

css
color: colorname;

示例：

html
<!DOCTYPE html>
<html>
<head>
    <style>
        .red { color: red; }
        .blue { color: blue; }
        .green { color: green; }
        .orange { color: orange; }
        .purple { color: purple; }
        .pink { color: pink; }
        .brown { color: brown; }
        .gray { color: gray; }
    </style>
</head>
<body>
    <p class="red">红色文本</p>
    <p class="blue">蓝色文本</p>
    <p class="green">绿色文本</p>
</body>
</html>

常用颜色名称：

  • 基础颜色：red, blue, green, yellow, orange, purple, pink, brown
  • 黑白灰：black, white, gray, silver, darkgray, lightgray
  • 特殊颜色：transparent（透明）, currentColor（当前颜色）

2. 十六进制颜色（Hexadecimal） ​

使用 # 后跟 6 位或 3 位十六进制数表示颜色。

语法：

css
/* 6 位格式 */
color: #RRGGBB;

/* 3 位格式（简写） */
color: #RGB;

/* 8 位格式（带透明度） */
color: #RRGGBBAA;

示例：

html
<!DOCTYPE html>
<html>
<head>
    <style>
        .hex-full { color: #FF5733; }      /* 橙红色 */
        .hex-short { color: #F53; }        /* 等同于 #FF5533 */
        .hex-alpha { color: #FF573380; }   /* 50% 透明度的橙红色 */
        
        .bg-hex {
            background-color: #3498db;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p class="hex-full">完整十六进制颜色</p>
    <p class="hex-short">简写十六进制颜色</p>
    <p class="hex-alpha">带透明度的十六进制颜色</p>
    <div class="bg-hex">蓝色背景</div>
</body>
</html>

十六进制对照：

  • #000000 = 黑色
  • #FFFFFF = 白色
  • #FF0000 = 红色
  • #00FF00 = 绿色
  • #0000FF = 蓝色
  • #FFFF00 = 黄色
  • #FF00FF = 品红色
  • #00FFFF = 青色

3. RGB 颜色 ​

使用红（Red）、绿（Green）、蓝（Blue）三原色的值来定义颜色。

语法：

css
color: rgb(red, green, blue);
/* 每个值范围：0-255 */

示例：

html
<!DOCTYPE html>
<html>
<head>
    <style>
        .rgb-red { color: rgb(255, 0, 0); }
        .rgb-green { color: rgb(0, 255, 0); }
        .rgb-blue { color: rgb(0, 0, 255); }
        .rgb-custom { color: rgb(52, 152, 219); }
        
        .rgb-box {
            background-color: rgb(46, 204, 113);
            color: white;
            padding: 15px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <p class="rgb-red">RGB 红色</p>
    <p class="rgb-green">RGB 绿色</p>
    <p class="rgb-blue">RGB 蓝色</p>
    <p class="rgb-custom">自定义 RGB 颜色</p>
    <div class="rgb-box">RGB 背景色</div>
</body>
</html>

4. RGBA 颜色（带透明度） ​

RGBA 在 RGB 基础上增加了 Alpha 通道（透明度）。

语法：

css
color: rgba(red, green, blue, alpha);
/* alpha 范围：0.0（完全透明）到 1.0（完全不透明） */

示例：

html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        
        .rgba-box {
            width: 200px;
            height: 100px;
            margin: 10px;
            padding: 20px;
            color: white;
            font-weight: bold;
        }
        
        .alpha-100 { background-color: rgba(231, 76, 60, 1.0); }
        .alpha-75 { background-color: rgba(231, 76, 60, 0.75); }
        .alpha-50 { background-color: rgba(231, 76, 60, 0.5); }
        .alpha-25 { background-color: rgba(231, 76, 60, 0.25); }
    </style>
</head>
<body>
    <div class="rgba-box alpha-100">透明度 100%</div>
    <div class="rgba-box alpha-75">透明度 75%</div>
    <div class="rgba-box alpha-50">透明度 50%</div>
    <div class="rgba-box alpha-25">透明度 25%</div>
</body>
</html>

5. HSL 颜色 ​

HSL 代表色相（Hue）、饱和度（Saturation）、亮度（Lightness）。

语法：

css
color: hsl(hue, saturation%, lightness%);
  • Hue（色相）：0-360 度的色轮角度
    • 0 或 360 = 红色
    • 120 = 绿色
    • 240 = 蓝色
  • Saturation（饱和度）：0%-100%
    • 0% = 灰色
    • 100% = 完全饱和
  • Lightness（亮度）：0%-100%
    • 0% = 黑色
    • 50% = 正常
    • 100% = 白色

示例：

html
<!DOCTYPE html>
<html>
<head>
    <style>
        .hsl-demo {
            padding: 20px;
            margin: 10px;
            color: white;
            font-weight: bold;
        }
        
        /* 不同色相 */
        .hue-0 { background-color: hsl(0, 100%, 50%); }     /* 红色 */
        .hue-120 { background-color: hsl(120, 100%, 50%); } /* 绿色 */
        .hue-240 { background-color: hsl(240, 100%, 50%); } /* 蓝色 */
        
        /* 不同饱和度 */
        .sat-100 { background-color: hsl(200, 100%, 50%); }
        .sat-50 { background-color: hsl(200, 50%, 50%); }
        .sat-0 { background-color: hsl(200, 0%, 50%); }
        
        /* 不同亮度 */
        .light-75 { background-color: hsl(200, 100%, 75%); }
        .light-50 { background-color: hsl(200, 100%, 50%); }
        .light-25 { background-color: hsl(200, 100%, 25%); }
    </style>
</head>
<body>
    <h3>不同色相</h3>
    <div class="hsl-demo hue-0">色相 0° - 红色</div>
    <div class="hsl-demo hue-120">色相 120° - 绿色</div>
    <div class="hsl-demo hue-240">色相 240° - 蓝色</div>
    
    <h3>不同饱和度</h3>
    <div class="hsl-demo sat-100">饱和度 100%</div>
    <div class="hsl-demo sat-50">饱和度 50%</div>
    <div class="hsl-demo sat-0">饱和度 0%</div>
    
    <h3>不同亮度</h3>
    <div class="hsl-demo light-75">亮度 75%</div>
    <div class="hsl-demo light-50">亮度 50%</div>
    <div class="hsl-demo light-25">亮度 25%</div>
</body>
</html>

6. HSLA 颜色（带透明度） ​

HSLA 在 HSL 基础上增加了 Alpha 通道。

语法：

css
color: hsla(hue, saturation%, lightness%, alpha);

示例：

css
.hsla-example {
    background-color: hsla(200, 100%, 50%, 0.5);
}

颜色属性 ​

color 属性 ​

设置文本颜色。

css
p {
    color: #333;
}

h1 {
    color: rgb(52, 152, 219);
}

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

background-color 属性 ​

设置背景颜色。

css
body {
    background-color: #f5f5f5;
}

.card {
    background-color: white;
}

.alert {
    background-color: rgba(255, 0, 0, 0.1);
}

border-color 属性 ​

设置边框颜色。

css
.box {
    border: 2px solid #3498db;
}

.warning {
    border-color: orange;
}

颜色对比表 ​

表示方法示例优点缺点
颜色名称red易读易记选择有限
十六进制#FF5733广泛支持，简洁不直观
RGBrgb(255, 87, 51)直观，易于理解代码较长
RGBArgba(255, 87, 51, 0.5)支持透明度代码较长
HSLhsl(9, 100%, 60%)易于调整色相/饱和度/亮度不够直观
HSLAhsla(9, 100%, 60%, 0.5)支持透明度，易于调整代码最长

实用颜色示例 ​

常用配色方案 ​

html
<!DOCTYPE html>
<html>
<head>
    <style>
        .color-palette {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }
        
        .color-box {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            border-radius: 8px;
        }
        
        /* 蓝色系 */
        .blue-1 { background-color: #3498db; }
        .blue-2 { background-color: #2980b9; }
        .blue-3 { background-color: #1abc9c; }
        
        /* 红色系 */
        .red-1 { background-color: #e74c3c; }
        .red-2 { background-color: #c0392b; }
        .red-3 { background-color: #e67e22; }
        
        /* 绿色系 */
        .green-1 { background-color: #2ecc71; }
        .green-2 { background-color: #27ae60; }
        .green-3 { background-color: #16a085; }
        
        /* 灰色系 */
        .gray-1 { background-color: #ecf0f1; color: #333; }
        .gray-2 { background-color: #bdc3c7; color: #333; }
        .gray-3 { background-color: #95a5a6; }
        .gray-4 { background-color: #7f8c8d; }
        .gray-5 { background-color: #34495e; }
    </style>
</head>
<body>
    <h3>蓝色系</h3>
    <div class="color-palette">
        <div class="color-box blue-1">#3498db</div>
        <div class="color-box blue-2">#2980b9</div>
        <div class="color-box blue-3">#1abc9c</div>
    </div>
    
    <h3>红色系</h3>
    <div class="color-palette">
        <div class="color-box red-1">#e74c3c</div>
        <div class="color-box red-2">#c0392b</div>
        <div class="color-box red-3">#e67e22</div>
    </div>
    
    <h3>绿色系</h3>
    <div class="color-palette">
        <div class="color-box green-1">#2ecc71</div>
        <div class="color-box green-2">#27ae60</div>
        <div class="color-box green-3">#16a085</div>
    </div>
    
    <h3>灰色系</h3>
    <div class="color-palette">
        <div class="color-box gray-1">#ecf0f1</div>
        <div class="color-box gray-2">#bdc3c7</div>
        <div class="color-box gray-3">#95a5a6</div>
        <div class="color-box gray-4">#7f8c8d</div>
        <div class="color-box gray-5">#34495e</div>
    </div>
</body>
</html>

渐变色背景 ​

css
.gradient-linear {
    background: linear-gradient(to right, #3498db, #2ecc71);
}

.gradient-radial {
    background: radial-gradient(circle, #e74c3c, #c0392b);
}

.gradient-multi {
    background: linear-gradient(45deg, 
        #3498db 0%, 
        #9b59b6 50%, 
        #e74c3c 100%
    );
}

特殊颜色值 ​

transparent（透明） ​

css
.transparent-bg {
    background-color: transparent;
}

.transparent-border {
    border: 2px solid transparent;
}

currentColor（当前颜色） ​

继承当前元素的 color 属性值。

css
.icon {
    color: #3498db;
    border: 2px solid currentColor; /* 边框颜色与文本颜色相同 */
}

.button {
    color: white;
    background-color: #e74c3c;
    box-shadow: 0 4px 0 currentColor; /* 阴影使用文本颜色 */
}

inherit（继承） ​

继承父元素的颜色。

css
.child {
    color: inherit; /* 继承父元素的颜色 */
}

CSS 变量与颜色 ​

使用 CSS 变量定义颜色主题。

html
<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            /* 定义颜色变量 */
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --text-color: #333;
            --bg-color: #f5f5f5;
        }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .alert {
            background-color: var(--warning-color);
            color: white;
            padding: 15px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <button class="btn-primary">主要按钮</button>
    <button class="btn-danger">危险按钮</button>
    <div class="alert">警告信息</div>
</body>
</html>

颜色可访问性 ​

对比度 ​

确保文本和背景之间有足够的对比度，以提高可读性。

WCAG 标准：

  • 正常文本：至少 4.5:1
  • 大文本（18pt 或 14pt 粗体）：至少 3:1
css
/* 良好的对比度 */
.good-contrast {
    color: #333;
    background-color: #fff;
}

/* 不良的对比度 */
.poor-contrast {
    color: #ccc;
    background-color: #fff;
}

色盲友好设计 ​

避免仅依赖颜色传达信息。

css
/* 不仅使用颜色，还使用图标和文本 */
.success {
    color: #2ecc71;
}

.success::before {
    content: "✓ ";
}

.error {
    color: #e74c3c;
}

.error::before {
    content: "✗ ";
}

实际应用示例 ​

完整的配色方案 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配色方案示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #3498db;
            --primary-dark: #2980b9;
            --secondary: #2ecc71;
            --danger: #e74c3c;
            --warning: #f39c12;
            --info: #1abc9c;
            --light: #ecf0f1;
            --dark: #34495e;
            --text: #2c3e50;
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: var(--light);
            color: var(--text);
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            color: var(--primary);
            margin-bottom: 30px;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-secondary {
            background-color: var(--secondary);
            color: white;
        }
        
        .btn-danger {
            background-color: var(--danger);
            color: white;
        }
        
        .btn-warning {
            background-color: var(--warning);
            color: white;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .alert {
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        
        .alert-info {
            background-color: rgba(26, 188, 156, 0.1);
            border-left: 4px solid var(--info);
            color: var(--dark);
        }
        
        .alert-warning {
            background-color: rgba(243, 156, 18, 0.1);
            border-left: 4px solid var(--warning);
            color: var(--dark);
        }
        
        .alert-danger {
            background-color: rgba(231, 76, 60, 0.1);
            border-left: 4px solid var(--danger);
            color: var(--dark);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS 颜色应用示例</h1>
        
        <div class="card">
            <h2>按钮样式</h2>
            <div class="button-group">
                <button class="btn btn-primary">主要按钮</button>
                <button class="btn btn-secondary">次要按钮</button>
                <button class="btn btn-danger">危险按钮</button>
                <button class="btn btn-warning">警告按钮</button>
            </div>
        </div>
        
        <div class="card">
            <h2>提示信息</h2>
            <div class="alert alert-info">
                这是一条信息提示
            </div>
            <div class="alert alert-warning">
                这是一条警告提示
            </div>
            <div class="alert alert-danger">
                这是一条错误提示
            </div>
        </div>
    </div>
</body>
</html>

最佳实践 ​

  1. 使用 CSS 变量：便于维护和主题切换
  2. 保持一致性：在整个项目中使用统一的配色方案
  3. 考虑可访问性：确保足够的颜色对比度
  4. 使用语义化命名：如 --primary-color 而不是 --blue
  5. 测试不同设备：确保颜色在不同屏幕上显示一致
  6. 避免过度使用颜色：保持简洁和专业

颜色工具推荐 ​

  • Adobe Color：创建和探索配色方案
  • Coolors：快速生成配色方案
  • Color Hunt：浏览流行的配色方案
  • WebAIM Contrast Checker：检查颜色对比度
  • Paletton：创建和谐的配色方案

总结 ​

CSS 提供了多种灵活的颜色表示方法，每种方法都有其适用场景：

  • 颜色名称：适合快速原型和简单项目
  • 十六进制：最常用，简洁高效
  • RGB/RGBA：直观，支持透明度
  • HSL/HSLA：易于调整，适合动态主题

选择合适的颜色表示方法，结合 CSS 变量和良好的设计原则，可以创建美观且易于维护的网页样式。