CSS 颜色

学习 CSS 颜色的表示方法、CSS 颜色属性以及实际应用示例，掌握如何在 CSS 中使用颜色。

CSS 颜色概述

颜色在 CSS 中是一个重要的视觉元素，它可以通过多种方式表示。CSS 支持多种颜色表示方法，包括颜色名称、十六进制值、RGB、RGBA、HSL 和 HSLA 等。

CSS 颜色表示方法

1. 颜色名称

CSS 定义了一组预定义的颜色名称，如 red、blue、green 等。

/* 使用颜色名称 */
.element {
    color: red;
    background-color: blue;
    border-color: green;
}

2. 十六进制颜色值

十六进制颜色值是最常用的颜色表示方法，由 # 后跟 6 个十六进制数字组成，分别表示红、绿、蓝三个通道的强度。

格式	描述	示例
#RRGGBB	6 位十六进制值	#FF0000（红色）
#RGB	3 位十六进制值（简写形式）	#F00（红色）

/* 使用十六进制颜色值 */
.element {
    color: #FF0000; /* 红色 */
    background-color: #0000FF; /* 蓝色 */
    border-color: #00FF00; /* 绿色 */
}

/* 使用简写形式 */
.element {
    color: #F00; /* 红色 */
    background-color: #00F; /* 蓝色 */
    border-color: #0F0; /* 绿色 */
}

3. RGB 颜色

RGB 颜色通过指定红、绿、蓝三个通道的强度来表示颜色，每个通道的值范围是 0-255。

格式	描述	示例
rgb(red, green, blue)	每个参数是 0-255 之间的整数	rgb(255, 0, 0)（红色）

/* 使用 RGB 颜色 */
.element {
    color: rgb(255, 0, 0); /* 红色 */
    background-color: rgb(0, 0, 255); /* 蓝色 */
    border-color: rgb(0, 255, 0); /* 绿色 */
}

4. RGBA 颜色

RGBA 颜色在 RGB 的基础上增加了一个 alpha 通道，表示颜色的透明度，alpha 值范围是 0-1。

格式	描述	示例
rgba(red, green, blue, alpha)	前三个参数是 0-255 之间的整数，alpha 是 0-1 之间的小数	rgba(255, 0, 0, 0.5)（半透明红色）

/* 使用 RGBA 颜色 */
.element {
    color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
    background-color: rgba(0, 0, 255, 0.7); /* 70% 不透明的蓝色 */
    border-color: rgba(0, 255, 0, 0.3); /* 30% 不透明的绿色 */
}

5. HSL 颜色

HSL 颜色通过色相（Hue）、饱和度（Saturation）和亮度（Lightness）来表示颜色。

参数	描述	范围
Hue	色相，颜色的基本属性	0-360 度，0 是红色，120 是绿色，240 是蓝色
Saturation	饱和度，颜色的纯度	0-100%，0% 是灰色，100% 是完全饱和的颜色
Lightness	亮度，颜色的明暗程度	0-100%，0% 是黑色，50% 是正常颜色，100% 是白色

/* 使用 HSL 颜色 */
.element {
    color: hsl(0, 100%, 50%); /* 红色 */
    background-color: hsl(240, 100%, 50%); /* 蓝色 */
    border-color: hsl(120, 100%, 50%); /* 绿色 */
}

6. HSLA 颜色

HSLA 颜色在 HSL 的基础上增加了一个 alpha 通道，表示颜色的透明度，alpha 值范围是 0-1。

/* 使用 HSLA 颜色 */
.element {
    color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
    background-color: hsla(240, 100%, 50%, 0.7); /* 70% 不透明的蓝色 */
    border-color: hsla(120, 100%, 50%, 0.3); /* 30% 不透明的绿色 */
}

CSS 颜色属性

1. color

设置文本的颜色。

/* 设置文本颜色 */
.element {
    color: red;
}

/* 使用不同的颜色表示方法 */
.text1 {
    color: #FF0000;
}

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

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

2. background-color

设置元素的背景颜色。

/* 设置背景颜色 */
.element {
    background-color: blue;
}

/* 使用不同的颜色表示方法 */
.bg1 {
    background-color: #0000FF;
}

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

.bg3 {
    background-color: hsl(240, 100%, 50%);
}

3. border-color

设置元素的边框颜色。

/* 设置边框颜色 */
.element {
    border: 2px solid green;
}

/* 分别设置四个边框的颜色 */
.element {
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

/* 使用简写属性 */
.element {
    border-color: red green blue yellow;
}

4. outline-color

设置元素轮廓的颜色。

/* 设置轮廓颜色 */
.element {
    outline: 2px solid red;
}

/* 单独设置轮廓颜色 */
.element {
    outline-color: blue;
}

5. text-decoration-color

设置文本装饰的颜色，如下划线、上划线和删除线的颜色。

/* 设置文本装饰颜色 */
.element {
    text-decoration: underline;
    text-decoration-color: red;
}

/* 简写形式 */
.element {
    text-decoration: underline red;
}

6. text-emphasis-color

设置文本强调标记的颜色。

/* 设置文本强调颜色 */
.element {
    text-emphasis: dot;
    text-emphasis-color: blue;
}

/* 简写形式 */
.element {
    text-emphasis: dot blue;
}

7. caret-color

设置输入框中光标的颜色。

/* 设置光标颜色 */
input {
    caret-color: red;
}

textarea {
    caret-color: blue;
}

8. scrollbar-color

设置滚动条的颜色，包括滚动条轨道和滑块的颜色。

/* 设置滚动条颜色 */
.element {
    scrollbar-color: blue red;
    /* 第一个值是滑块颜色，第二个值是轨道颜色 */
}

/* 仅在支持的浏览器中生效 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

CSS 颜色函数

1. rgb() 和 rgba()

创建 RGB 或 RGBA 颜色。

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

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

2. hsl() 和 hsla()

创建 HSL 或 HSLA 颜色。

/* 使用 hsl() 函数 */
.element {
    color: hsl(0, 100%, 50%);
}

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

3. color()

使用指定的颜色空间创建颜色。

/* 使用 color() 函数 */
.element {
    color: color(srgb 1 0 0); /* 红色 */
    background-color: color(display-p3 0 0 1); /* 蓝色 */
}

4. lab()

使用 LAB 颜色空间创建颜色。

/* 使用 lab() 函数 */
.element {
    color: lab(50% 0 0); /* 灰色 */
    background-color: lab(75% 20 -30); /* 特定的 LAB 颜色 */
}

5. lch()

使用 LCH 颜色空间创建颜色。

/* 使用 lch() 函数 */
.element {
    color: lch(50% 0 0); /* 灰色 */
    background-color: lch(75% 50 270); /* 特定的 LCH 颜色 */
}

6. hwb()

使用色相（Hue）、白度（Whiteness）和黑度（Blackness）创建颜色。

/* 使用 hwb() 函数 */
.element {
    color: hwb(0 0% 0%); /* 红色 */
    background-color: hwb(240 0% 0%); /* 蓝色 */
    border-color: hwb(120 0% 0%); /* 绿色 */
}

CSS 颜色实际应用示例

示例 1：基本颜色应用

<div class="color-example">
    <h2>颜色示例</h2>
    <p class="text-red">红色文本</p>
    <p class="text-blue">蓝色文本</p>
    <p class="text-green">绿色文本</p>
</div>

<style>
.color-example {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 4px;
}

.text-red {
    color: #FF0000;
}

.text-blue {
    color: #0000FF;
}

.text-green {
    color: #00FF00;
}
</style>

示例 2：透明度应用

<div class="opacity-example">
    <div class="box box1">不透明红色</div>
    <div class="box box2">半透明红色</div>
    <div class="box box3">透明红色</div>
</div>

<style>
.opacity-example {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: white;
}

.box1 {
    background-color: rgba(255, 0, 0, 1); /* 完全不透明 */
}

.box2 {
    background-color: rgba(255, 0, 0, 0.5); /* 半透明 */
}

.box3 {
    background-color: rgba(255, 0, 0, 0.1); /* 几乎透明 */
    color: black;
}
</style>

示例 3：HSL 颜色应用

<div class="hsl-example">
    <div class="hsl-box hsl1">红色</div>
    <div class="hsl-box hsl2">橙色</div>
    <div class="hsl-box hsl3">黄色</div>
    <div class="hsl-box hsl4">绿色</div>
    <div class="hsl-box hsl5">蓝色</div>
    <div class="hsl-box hsl6">紫色</div>
</div>

<style>
.hsl-example {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
}

.hsl-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}

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

.hsl2 {
    background-color: hsl(30, 100%, 50%);
}

.hsl3 {
    background-color: hsl(60, 100%, 50%);
}

.hsl4 {
    background-color: hsl(120, 100%, 50%);
}

.hsl5 {
    background-color: hsl(240, 100%, 50%);
}

.hsl6 {
    background-color: hsl(280, 100%, 50%);
}
</style>

示例 4：渐变色应用

<div class="gradient-example">
    <div class="gradient-box gradient1">线性渐变</div>
    <div class="gradient-box gradient2">径向渐变</div>
    <div class="gradient-box gradient3">角度渐变</div>
</div>

<style>
.gradient-example {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.gradient-box {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}

.gradient1 {
    background: linear-gradient(red, blue);
}

.gradient2 {
    background: radial-gradient(circle, red, blue);
}

.gradient3 {
    background: linear-gradient(45deg, red, blue);
}
</style>

CSS 颜色使用技巧

选择合适的颜色表示方法：根据需要选择合适的颜色表示方法，如十六进制值适合固定颜色，RGB/RGBA 适合需要透明度的颜色，HSL/HSLA 适合需要调整色相、饱和度和亮度的颜色。
使用语义化的颜色变量：使用 CSS 变量定义颜色，可以提高代码的可维护性和一致性。
考虑颜色对比度：确保文本和背景之间有足够的对比度，以提高可读性。
使用颜色工具：使用颜色选择器、颜色调和工具等辅助工具来选择和管理颜色。
考虑浏览器兼容性：一些新的颜色函数（如 lab()、lch()、hwb() 等）可能不被所有浏览器支持，需要考虑兼容性。
使用渐变色增强视觉效果：渐变色可以创建丰富的视觉效果，增强用户体验。
建立颜色系统：为项目建立一套完整的颜色系统，包括主色、辅色、中性色等，确保整个项目的颜色一致性。

CSS 颜色总结

CSS 支持多种颜色表示方法，包括颜色名称、十六进制值、RGB、RGBA、HSL 和 HSLA 等。
颜色属性包括 color、background-color、border-color、outline-color 等。
CSS 提供了多种颜色函数，如 rgb()、rgba()、hsl()、hsla()、lab()、lch()、hwb() 等。
选择合适的颜色表示方法和使用技巧可以创建美观、一致、可维护的颜色方案。
考虑颜色对比度、浏览器兼容性和建立颜色系统等因素，可以提高项目的质量和用户体验。