CSS3颜色表示 - 颜色函数
1. 核心知识点讲解
1.1 颜色函数基本概念
CSS3提供了多种颜色函数，用于表示和操作颜色。这些函数可以分为以下几类：
基本颜色函数：用于直接表示颜色
rgb()：通过红、绿、蓝三个通道的值表示颜色rgba()：通过红、绿、蓝三个通道的值和透明度表示颜色hsl()：通过色相、饱和度、亮度表示颜色hsla()：通过色相、饱和度、亮度和透明度表示颜色
CSS Color Level 4颜色函数：提供更先进的颜色表示方法
hwb()：通过色相、白度、黑度表示颜色lab()：通过CIELAB颜色空间表示颜色lch()：通过CIELCH颜色空间表示颜色oklab()：通过OKLAB颜色空间表示颜色oklch()：通过OKLCH颜色空间表示颜色
颜色操作函数：用于操作和转换颜色
color-mix()：混合两种颜色color-contrast()：计算颜色的对比度light-dark()：根据背景亮度选择颜色
1.2 基本颜色函数
1.2.1 rgb() 和 rgba() 函数
语法：
rgb(red, green, blue)：其中 red、green、blue 是 0-255 之间的整数rgb(red%, green%, blue%)：其中 red、green、blue 是 0%-100% 之间的百分比rgba(red, green, blue, alpha)：添加了 alpha 通道，取值 0-1
示例：
color: rgb(255, 0, 0); /* 纯红色 */
color: rgb(100%, 0%, 0%); /* 纯红色 */
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */1.2.2 hsl() 和 hsla() 函数
语法：
hsl(hue, saturation, lightness)：hue 是 0-360 的角度，saturation 和 lightness 是 0%-100% 的百分比hsla(hue, saturation, lightness, alpha)：添加了 alpha 通道，取值 0-1
示例：
color: hsl(0, 100%, 50%); /* 纯红色 */
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */1.3 CSS Color Level 4 颜色函数
1.3.1 hwb() 函数
语法：
hwb(hue, whiteness, blackness)：hue 是 0-360 的角度，whiteness 和 blackness 是 0%-100% 的百分比hwb(hue, whiteness, blackness, alpha)：添加了 alpha 通道，取值 0-1
示例：
color: hwb(0, 0%, 0%); /* 纯红色 */
color: hwb(0, 0%, 0%, 0.5); /* 半透明红色 */1.3.2 lab() 和 lch() 函数
语法：
lab(lightness, a, b)：lightness 是 0%-100% 的百分比，a 和 b 是 -125 到 125 之间的值lab(lightness, a, b, alpha)：添加了 alpha 通道，取值 0-1lch(lightness, chroma, hue)：lightness 是 0%-100% 的百分比，chroma 是 0-133 的值，hue 是 0-360 的角度lch(lightness, chroma, hue, alpha)：添加了 alpha 通道，取值 0-1
示例：
color: lab(54.29%, 80.81, 69.88); /* 近似纯红色 */
color: lch(54.29%, 106.83, 40.85); /* 近似纯红色 */1.3.3 oklab() 和 oklch() 函数
语法：
oklab(lightness, a, b)：lightness 是 0-1 之间的值，a 和 b 是 -0.4 到 0.4 之间的值oklab(lightness, a, b, alpha)：添加了 alpha 通道，取值 0-1oklch(lightness, chroma, hue)：lightness 是 0-1 之间的值，chroma 是 0-0.4 之间的值，hue 是 0-360 的角度oklch(lightness, chroma, hue, alpha)：添加了 alpha 通道，取值 0-1
示例：
color: oklab(0.6279, 0.2588, 0.1339); /* 近似纯红色 */
color: oklch(0.6279, 0.2910, 25.1548); /* 近似纯红色 */1.4 颜色操作函数
1.4.1 color-mix() 函数
语法：
color-mix(in <color-space>, <color1> <percentage>?, <color2> <percentage>?)：在指定的颜色空间中混合两种颜色
示例：
color: color-mix(in srgb, red 20%, blue 80%); /* 混合20%红色和80%蓝色 */
color: color-mix(in lch, yellow, blue); /* 混合黄色和蓝色，各50% */1.4.2 color-contrast() 函数
语法：
color-contrast(<color> vs <color-list>)：计算给定颜色与颜色列表中颜色的对比度，返回对比度最高的颜色color-contrast(<color>)：使用默认的颜色列表（black, white, transparent）
示例：
color: color-contrast(#3498db); /* 计算#3498db与默认颜色的对比度，返回对比度最高的颜色 */
color: color-contrast(#3498db vs white, black, gray); /* 计算与指定颜色列表的对比度 */1.4.3 light-dark() 函数
语法：
light-dark(<light-color>, <dark-color>)：根据背景亮度自动选择浅色或深色
示例：
color: light-dark(#333, #fff); /* 背景亮时使用#333，背景暗时使用#fff */2. 实用案例分析
2.1 案例一：使用基本颜色函数
场景说明：使用基本颜色函数设置元素的颜色和透明度
代码实现：
<!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>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.color-box {
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
border-radius: 8px;
text-align: center;
line-height: 150px;
color: white;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 使用rgb()函数 */
.rgb-red {
background-color: rgb(255, 0, 0);
}
.rgb-green {
background-color: rgb(0, 255, 0);
}
.rgb-blue {
background-color: rgb(0, 0, 255);
}
/* 使用rgba()函数 */
.rgba-red {
background-color: rgba(255, 0, 0, 0.5);
}
.rgba-green {
background-color: rgba(0, 255, 0, 0.5);
}
.rgba-blue {
background-color: rgba(0, 0, 255, 0.5);
}
/* 使用hsl()函数 */
.hsl-red {
background-color: hsl(0, 100%, 50%);
}
.hsl-green {
background-color: hsl(120, 100%, 50%);
}
.hsl-blue {
background-color: hsl(240, 100%, 50%);
}
/* 使用hsla()函数 */
.hsla-red {
background-color: hsla(0, 100%, 50%, 0.5);
}
.hsla-green {
background-color: hsla(120, 100%, 50%, 0.5);
}
.hsla-blue {
background-color: hsla(240, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<h1>基本颜色函数示例</h1>
<h2>rgb() 函数</h2>
<div class="color-box rgb-red">rgb(255, 0, 0)</div>
<div class="color-box rgb-green">rgb(0, 255, 0)</div>
<div class="color-box rgb-blue">rgb(0, 0, 255)</div>
<h2>rgba() 函数</h2>
<div class="color-box rgba-red">rgba(255, 0, 0, 0.5)</div>
<div class="color-box rgba-green">rgba(0, 255, 0, 0.5)</div>
<div class="color-box rgba-blue">rgba(0, 0, 255, 0.5)</div>
<h2>hsl() 函数</h2>
<div class="color-box hsl-red">hsl(0, 100%, 50%)</div>
<div class="color-box hsl-green">hsl(120, 100%, 50%)</div>
<div class="color-box hsl-blue">hsl(240, 100%, 50%)</div>
<h2>hsla() 函数</h2>
<div class="color-box hsla-red">hsla(0, 100%, 50%, 0.5)</div>
<div class="color-box hsla-green">hsla(120, 100%, 50%, 0.5)</div>
<div class="color-box hsla-blue">hsla(240, 100%, 50%, 0.5)</div>
</body>
</html>效果说明：
- 使用
rgb()函数创建纯红色、纯绿色和纯蓝色的盒子 - 使用
rgba()函数创建半透明的红色、绿色和蓝色的盒子 - 使用
hsl()函数创建纯红色、纯绿色和纯蓝色的盒子 - 使用
hsla()函数创建半透明的红色、绿色和蓝色的盒子
2.2 案例二：使用 CSS Color Level 4 颜色函数
场景说明：使用 CSS Color Level 4 颜色函数创建更精确的颜色
代码实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Color Level 4 颜色函数示例</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.color-box {
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
border-radius: 8px;
text-align: center;
line-height: 150px;
color: white;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 使用hwb()函数 */
.hwb-red {
background-color: hwb(0, 0%, 0%);
}
.hwb-pink {
background-color: hwb(340, 20%, 10%);
}
.hwb-purple {
background-color: hwb(280, 10%, 20%);
}
/* 使用lab()函数 */
.lab-red {
background-color: lab(54.29%, 80.81, 69.88);
}
.lab-green {
background-color: lab(87.73%, -69.88, 81.88);
}
.lab-blue {
background-color: lab(32.30%, 79.19, -104.77);
}
/* 使用lch()函数 */
.lch-red {
background-color: lch(54.29%, 106.83, 40.85);
}
.lch-green {
background-color: lch(87.73%, 114.92, 142.49);
}
.lch-blue {
background-color: lch(32.30%, 130.83, 294.13);
}
/* 使用oklab()函数 */
.oklab-red {
background-color: oklab(0.6279, 0.2588, 0.1339);
}
.oklab-green {
background-color: oklab(0.8664, -0.2385, 0.1451);
}
.oklab-blue {
background-color: oklab(0.5560, 0.1448, -0.2922);
}
/* 使用oklch()函数 */
.oklch-red {
background-color: oklch(0.6279, 0.2910, 25.1548);
}
.oklch-green {
background-color: oklch(0.8664, 0.2774, 143.1348);
}
.oklch-blue {
background-color: oklch(0.5560, 0.3283, 294.1234);
}
</style>
</head>
<body>
<h1>CSS Color Level 4 颜色函数示例</h1>
<h2>hwb() 函数</h2>
<div class="color-box hwb-red">hwb(0, 0%, 0%)</div>
<div class="color-box hwb-pink">hwb(340, 20%, 10%)</div>
<div class="color-box hwb-purple">hwb(280, 10%, 20%)</div>
<h2>lab() 函数</h2>
<div class="color-box lab-red">lab(54.29%, 80.81, 69.88)</div>
<div class="color-box lab-green">lab(87.73%, -69.88, 81.88)</div>
<div class="color-box lab-blue">lab(32.30%, 79.19, -104.77)</div>
<h2>lch() 函数</h2>
<div class="color-box lch-red">lch(54.29%, 106.83, 40.85)</div>
<div class="color-box lch-green">lch(87.73%, 114.92, 142.49)</div>
<div class="color-box lch-blue">lch(32.30%, 130.83, 294.13)</div>
<h2>oklab() 函数</h2>
<div class="color-box oklab-red">oklab(0.6279, 0.2588, 0.1339)</div>
<div class="color-box oklab-green">oklab(0.8664, -0.2385, 0.1451)</div>
<div class="color-box oklab-blue">oklab(0.5560, 0.1448, -0.2922)</div>
<h2>oklch() 函数</h2>
<div class="color-box oklch-red">oklch(0.6279, 0.2910, 25.1548)</div>
<div class="color-box oklch-green">oklch(0.8664, 0.2774, 143.1348)</div>
<div class="color-box oklch-blue">oklch(0.5560, 0.3283, 294.1234)</div>
</body>
</html>效果说明：
- 使用
hwb()函数创建红色、粉色和紫色的盒子 - 使用
lab()函数创建红色、绿色和蓝色的盒子 - 使用
lch()函数创建红色、绿色和蓝色的盒子 - 使用
oklab()函数创建红色、绿色和蓝色的盒子 - 使用
oklch()函数创建红色、绿色和蓝色的盒子
2.3 案例三：使用颜色操作函数
场景说明：使用颜色操作函数混合颜色和计算对比度
代码实现：
<!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>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.color-box {
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
border-radius: 8px;
text-align: center;
line-height: 150px;
color: white;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 使用color-mix()函数 */
.mix-red-blue {
background-color: color-mix(in srgb, red 20%, blue 80%);
}
.mix-yellow-purple {
background-color: color-mix(in lch, yellow, purple);
}
.mix-green-orange {
background-color: color-mix(in oklab, green 30%, orange 70%);
}
/* 使用color-contrast()函数 */
.contrast-box {
width: 200px;
height: 100px;
margin: 10px;
display: inline-block;
border-radius: 8px;
text-align: center;
line-height: 100px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.contrast-light {
background-color: #f0f0f0;
color: color-contrast(#f0f0f0);
}
.contrast-medium {
background-color: #888888;
color: color-contrast(#888888);
}
.contrast-dark {
background-color: #333333;
color: color-contrast(#333333);
}
.contrast-custom {
background-color: #3498db;
color: color-contrast(#3498db vs white, black, gray);
}
/* 使用light-dark()函数 */
.light-dark-container {
width: 300px;
height: 200px;
margin: 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.light-dark-light {
background-color: #ffffff;
}
.light-dark-dark {
background-color: #333333;
}
.light-dark-text {
color: light-dark(#333333, #ffffff);
}
</style>
</head>
<body>
<h1>颜色操作函数示例</h1>
<h2>color-mix() 函数</h2>
<div class="color-box mix-red-blue">color-mix(in srgb, red 20%, blue 80%)</div>
<div class="color-box mix-yellow-purple">color-mix(in lch, yellow, purple)</div>
<div class="color-box mix-green-orange">color-mix(in oklab, green 30%, orange 70%)</div>
<h2>color-contrast() 函数</h2>
<div class="contrast-box contrast-light">color-contrast(#f0f0f0)</div>
<div class="contrast-box contrast-medium">color-contrast(#888888)</div>
<div class="contrast-box contrast-dark">color-contrast(#333333)</div>
<div class="contrast-box contrast-custom">color-contrast(#3498db vs white, black, gray)</div>
<h2>light-dark() 函数</h2>
<div class="light-dark-container light-dark-light">
<p class="light-dark-text">light-dark(#333333, #ffffff) - 浅色背景</p>
</div>
<div class="light-dark-container light-dark-dark">
<p class="light-dark-text">light-dark(#333333, #ffffff) - 深色背景</p>
</div>
</body>
</html>效果说明：
- 使用
color-mix()函数混合不同颜色，创建新的颜色 - 使用
color-contrast()函数根据背景颜色自动选择对比度最高的文本颜色 - 使用
light-dark()函数根据背景亮度自动选择文本颜色
2.4 案例四：使用颜色函数创建渐变和动画
场景说明：使用颜色函数创建渐变色和颜色动画
代码实现：
<!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>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.gradient-box {
width: 100%;
height: 200px;
margin: 20px 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 使用颜色函数创建渐变 */
.gradient-rgb {
background: linear-gradient(
to right,
rgb(255, 0, 0),
rgb(0, 255, 0),
rgb(0, 0, 255)
);
}
.gradient-hsl {
background: linear-gradient(
to right,
hsl(0, 100%, 50%),
hsl(120, 100%, 50%),
hsl(240, 100%, 50%)
);
}
.gradient-lab {
background: linear-gradient(
to right,
lab(54.29%, 80.81, 69.88),
lab(87.73%, -69.88, 81.88),
lab(32.30%, 79.19, -104.77)
);
}
.gradient-oklab {
background: linear-gradient(
to right,
oklab(0.6279, 0.2588, 0.1339),
oklab(0.8664, -0.2385, 0.1451),
oklab(0.5560, 0.1448, -0.2922)
);
}
/* 使用颜色函数创建动画 */
.animated-box {
width: 200px;
height: 200px;
margin: 20px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.animate-rgb {
animation: animate-rgb 3s linear infinite;
}
@keyframes animate-rgb {
0% {
background-color: rgb(255, 0, 0);
}
33% {
background-color: rgb(0, 255, 0);
}
66% {
background-color: rgb(0, 0, 255);
}
100% {
background-color: rgb(255, 0, 0);
}
}
.animate-hsl {
animation: animate-hsl 3s linear infinite;
}
@keyframes animate-hsl {
0% {
background-color: hsl(0, 100%, 50%);
}
100% {
background-color: hsl(360, 100%, 50%);
}
}
.animate-lab {
animation: animate-lab 3s ease-in-out infinite;
}
@keyframes animate-lab {
0% {
background-color: lab(54.29%, 80.81, 69.88);
}
33% {
background-color: lab(87.73%, -69.88, 81.88);
}
66% {
background-color: lab(32.30%, 79.19, -104.77);
}
100% {
background-color: lab(54.29%, 80.81, 69.88);
}
}
</style>
</head>
<body>
<h1>颜色函数渐变和动画示例</h1>
<h2>使用颜色函数创建渐变</h2>
<div class="gradient-box gradient-rgb">
RGB颜色渐变
</div>
<div class="gradient-box gradient-hsl">
HSL颜色渐变
</div>
<div class="gradient-box gradient-lab">
LAB颜色渐变
</div>
<div class="gradient-box gradient-oklab">
OKLAB颜色渐变
</div>
<h2>使用颜色函数创建动画</h2>
<div class="animated-box animate-rgb">
RGB颜色动画
</div>
<div class="animated-box animate-hsl">
HSL颜色动画
</div>
<div class="animated-box animate-lab">
LAB颜色动画
</div>
</body>
</html>效果说明：
- 使用
rgb()函数创建从红色到绿色再到蓝色的线性渐变 - 使用
hsl()函数创建从红色到绿色再到蓝色的线性渐变 - 使用
lab()函数创建从红色到绿色再到蓝色的线性渐变 - 使用
oklab()函数创建从红色到绿色再到蓝色的线性渐变 - 使用
rgb()函数创建颜色循环动画 - 使用
hsl()函数创建色相旋转动画 - 使用
lab()函数创建颜色循环动画
3. 实用技巧与最佳实践
3.1 颜色函数使用技巧
选择合适的颜色函数：
- 对于简单的颜色表示，使用
rgb()或hsl()函数 - 对于需要透明度的颜色，使用
rgba()或hsla()函数 - 对于更直观的颜色调整，使用
hwb()函数 - 对于更精确的颜色控制，使用
lab()、lch()、oklab()或oklch()函数
- 对于简单的颜色表示，使用
使用颜色操作函数：
- 使用
color-mix()函数创建和谐的颜色组合 - 使用
color-contrast()函数确保文本的可读性 - 使用
light-dark()函数实现自适应的颜色方案
- 使用
创建渐变效果：
- 使用不同的颜色函数创建各种渐变效果
- 尝试在不同的颜色空间中创建渐变，获得不同的视觉效果
实现动画效果：
- 使用
hsl()函数创建平滑的色相旋转动画 - 使用其他颜色函数创建各种颜色过渡动画
- 使用
响应式设计：
- 使用颜色函数创建适应不同屏幕尺寸的颜色方案
- 结合媒体查询和颜色函数，实现更灵活的响应式设计
3.2 浏览器兼容性
不同的颜色函数在浏览器中的支持情况不同：
| 颜色函数 | 浏览器支持 |
|---|---|
rgb()、rgba() |
所有现代浏览器，IE9+ |
hsl()、hsla() |
所有现代浏览器，IE9+ |
hwb() |
Chrome 101+、Firefox 96+、Safari 15.4+ |
lab()、lch() |
Chrome 99+、Firefox 96+、Safari 15.4+ |
oklab()、oklch() |
Chrome 101+、Firefox 96+、Safari 15.4+ |
color-mix() |
Chrome 111+、Firefox 101+、Safari 16.4+ |
color-contrast() |
Chrome 111+、Firefox 101+、Safari 16.4+ |
light-dark() |
Chrome 111+、Firefox 101+、Safari 16.4+ |
对于旧版本浏览器，可以提供十六进制颜色或基本颜色函数作为 fallback：
.element {
color: #ff0000; /* 十六进制 fallback */
color: rgb(255, 0, 0); /* RGB fallback */
color: oklch(0.6279, 0.2910, 25.1548); /* 现代颜色函数 */
}3.3 性能优化
合理使用颜色函数：
- 对于不需要动态调整的颜色，使用十六进制颜色表示，可能会有微小的性能优势
- 对于需要动态调整的颜色，使用颜色函数提高代码可维护性
优化渐变效果：
- 复杂的渐变效果可能会影响性能，特别是在移动设备上
- 尽量简化渐变效果，减少颜色停止点的数量
优化动画效果：
- 使用
hsl()函数创建颜色动画，性能可能更好 - 避免在复杂页面上使用过多的颜色动画
- 使用
使用CSS变量：
- 将常用的颜色值定义为CSS变量，提高代码可维护性
- 结合颜色函数和CSS变量，实现更灵活的颜色方案
3.4 可访问性考虑
确保文本可读性：
- 使用
color-contrast()函数确保文本和背景之间有足够的对比度 - 遵循WCAG 2.1标准，确保文本的对比度至少为4.5:1
- 使用
考虑不同设备：
- 在不同设备和显示条件下测试颜色效果
- 考虑色盲用户，使用足够的对比度和不同的视觉提示
提供备选方案：
- 对于不支持现代颜色函数的浏览器，提供适当的备选方案
- 确保在所有浏览器中都能获得良好的用户体验
4. 总结与回顾
CSS3提供了丰富的颜色函数，用于表示和操作颜色。这些函数可以帮助开发者创建更精确、更灵活的颜色方案，实现更丰富的视觉效果。
主要颜色函数类型
基本颜色函数：
rgb()、rgba()、hsl()、hsla()- 适用于基本的颜色表示和透明度控制CSS Color Level 4颜色函数：
hwb()、lab()、lch()、oklab()、oklch()- 提供更先进、更精确的颜色表示方法颜色操作函数：
color-mix()、color-contrast()、light-dark()- 用于操作和转换颜色，创建更和谐的颜色方案
颜色函数的优势
灵活性：可以通过调整参数轻松创建各种颜色效果
精确性：现代颜色函数提供更精确的颜色控制
可读性：颜色函数的语法更直观，便于理解和维护
强大的操作能力：可以通过颜色操作函数创建更复杂的颜色效果
适应性：可以创建适应不同场景的颜色方案
最佳实践
根据具体需求选择合适的颜色函数
结合CSS变量使用颜色函数，提高代码可维护性
使用颜色操作函数创建和谐的颜色方案
确保颜色的可访问性，特别是文本的可读性
考虑浏览器兼容性，提供适当的备选方案
优化性能，避免过度使用复杂的颜色效果
通过本教程的学习，您应该已经掌握了CSS3颜色函数的基本概念、语法规则和使用技巧。在实际开发中，合理使用这些颜色函数，将帮助您创建更具视觉吸引力、更灵活的颜色方案，提升用户体验。