第10篇：颜色系统与透明度

第10篇：颜色系统与透明度

颜色是网页视觉设计的灵魂。CSS 提供了丰富的颜色表示方式——从传统的十六进制到现代的色域标准，从固定色彩到动态计算。理解颜色系统，不仅能让你精确还原设计稿，还能创造出富有层次感的视觉体验。

学习目标

• 掌握所有 CSS 颜色表示法（hex、rgb、hsl、hwb、lab 等）
• 理解opacity与 alpha 透明度的区别
• 学会使用currentColor实现色彩联动
• 掌握 CSS 渐变（linear-gradient、radial-gradient）
• 了解现代颜色函数color-mix()和相对颜色语法
• 理解 WCAG 对比度标准与可访问性
• 学会建立项目的色彩系统

核心知识点

一、颜色表示法大全

CSS 支持多种方式来描述颜色，从传统到现代逐步演进。

1. 十六进制（Hex）

/* 6 位写法 */.color-hex{color:#4a90d9;/* 红=4a, 绿=90, 蓝=d9 */}/* 3 位简写（每位重复） */.color-short{color:#f00;/* 等同于 #ff0000 */color:#abc;/* 等同于 #aabbcc */}/* 8 位写法（含 alpha 通道） */.color-hex-alpha{color:#4a90d980;/* 最后两位 = 透明度（80 = 50%） *//* 注意：00=全透明, ff=不透明 */}

Hex 透明度速查：

2. RGB / RGBA

/* RGB 整数写法 */.color-rgb{color:rgb(74,144,217);}/* RGB 百分比写法 */.color-rgb-percent{color:rgb(29%,56%,85%);}/* RGBA（含透明度）— 传统写法 */.color-rgba{color:rgba(74,144,217,0.5);/* 50% 不透明 */}/* 现代写法：rgb() 直接支持 alpha */.color-rgb-modern{color:rgb(74 144 217 / 50%);/* CSS Colors Level 4 */color:rgb(74 144 217 / 0.5);}

3. HSL / HSLA（推荐用于设计系统）

HSL 更符合人类的色彩直觉：Hue（色相）、Saturation（饱和度）、Lightness（明度）。

/* HSL：色相(0-360) 饱和度(%) 明度(%) */.color-hsl{color:hsl(210,65%,57%);/* 蓝色 */}/* HSLA（含透明度）— 传统写法 */.color-hsla{color:hsla(210,65%,57%,0.5);}/* 现代写法 */.color-hsl-modern{color:hsl(210 65% 57% / 50%);}

为什么 HSL 更适合设计系统？

/* 基于同一色相，调整饱和度和明度生成色系 */:root{--brand-hue:210;--brand-50:hsl(var(--brand-hue)80% 95%);/* 最浅 */--brand-100:hsl(var(--brand-hue)75% 90%);--brand-200:hsl(var(--brand-hue)70% 80%);--brand-300:hsl(var(--brand-hue)65% 70%);--brand-400:hsl(var(--brand-hue)60% 60%);--brand-500:hsl(var(--brand-hue)65% 57%);/* 主色 */--brand-600:hsl(var(--brand-hue)70% 45%);--brand-700:hsl(var(--brand-hue)75% 35%);--brand-800:hsl(var(--brand-hue)80% 25%);--brand-900:hsl(var(--brand-hue)85% 15%);/* 最深 */}

4. HWB — Hue, Whiteness, Blackness

/* 色相 + 白度 + 黑度，更直观的颜色调整方式 */.color-hwb{color:hwb(210 29% 15%);/* 与 hsl(210, 65%, 57%) 近似 */}/* 含透明度 */.color-hwb-alpha{color:hwb(210 29% 15% / 0.5);}

5. LAB / LCH / OKLAB / OKLCH — 感知均匀的颜色空间

/* LCH：Lightness（明度）, Chroma（色度）, Hue（色相） *//* 优点：不同色相下，相同明度真的看起来一样亮 */.color-lch{color:lch(60% 50 250);}/* OKLCH：改进版 LCH，更均匀的感知 */.color-oklch{color:oklch(65% 0.15 250);}/* 现代浏览器支持，适合需要精确色彩一致性的场景 */

6. 预定义颜色关键字

/* 标准颜色名（147 个） */.color-keyword{color:red;color:blue;color:transparent;/* 完全透明 */color:currentColor;/* 当前文字颜色（见下文） */}/* 系统颜色（跟随用户系统主题） */.color-system{color:CanvasText;/* 画布文字色 */background:Canvas;/* 画布背景色 */}

二、透明度控制

opacityvs Alpha 通道

/* opacity：设置整个元素的透明度（包括内容、背景、边框） */.card-fade{opacity:0.5;/* 整个卡片半透明 */}/* rgba/hsla：只设置颜色的透明度 */.card-bg-transparent{background:rgba(0,0,0,0.5);/* 只有背景半透明，文字不透明 */}

关键区别：

/* 实战：遮罩层 */.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);/* 背景半透明黑 *//* 遮罩层上的文字保持清晰 */}/* 实战：禁用状态 */.disabled{opacity:0.5;pointer-events:none;/* 同时禁用点击 */}

currentColor— 当前颜色关键字

currentColor等于当前元素的color属性值，是实现色彩联动的利器。

/* 让边框、阴影、背景与文字颜色保持一致 */.btn-link{color:#4a90d9;border:2px solid currentColor;/* 边框跟随文字色 */box-shadow:0 0 8px currentColor;/* 阴影跟随文字色 */}/* 鼠标悬停时只改 color，其他自动跟随 */.btn-link:hover{color:#e74c3c;/* border 和 box-shadow 自动变红 */}/* SVG 图标颜色跟随文字 */.icon{color:#333;fill:currentColor;/* SVG fill 跟随 */stroke:currentColor;/* SVG stroke 跟随 */}

三、CSS 渐变

渐变是 CSS 生成的图像，可用于任何需要image的地方。

线性渐变（Linear Gradient）

/* 基础语法：方向/角度，色标... */.gradient-basic{background:linear-gradient(to right,#4a90d9,#e74c3c);/* 从左到右，蓝到红 */}/* 角度 */.gradient-angle{background:linear-gradient(135deg,#667eea,#764ba2);/* 135度对角线渐变 */}/* 多个色标 */.gradient-multi{background:linear-gradient(to right,#f093fb 0%,#f5576c 25%,#4facfe 50%,#00f2fe 75%,#43e97b 100%);}/* 硬边缘（无过渡） */.gradient-stripes{background:linear-gradient(to right,#333 50%,#fff 50%);/* 50% 处突然切换，形成条纹 */}/* 重复渐变 */.gradient-repeat{background:repeating-linear-gradient(45deg,#f5f5f5,#f5f5f5 10px,#fff 10px,#fff 20px);/* 45度斜条纹背景 */}

方向关键字：

径向渐变（Radial Gradient）

/* 从中心向外扩散 */.gradient-radial{background:radial-gradient(circle,#fff 0%,#4a90d9 100%);}/* 椭圆形（默认） */.gradient-ellipse{background:radial-gradient(ellipse at top,#f5576c,#333);}/* 指定形状和大小 */.gradient-size{background:radial-gradient(circle closest-side at 30% 50%,#fff,#4a90d9);}

圆锥渐变（Conic Gradient）

/* 像饼图一样围绕中心旋转 */.gradient-conic{background:conic-gradient(from 0deg at 50% 50%,#f093fb,#f5576c,#4facfe,#f093fb);}/* 实战：色轮 */.color-wheel{width:200px;height:200px;border-radius:50%;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);}/* 实战：饼图 */.pie-chart{width:200px;height:200px;border-radius:50%;background:conic-gradient(#4a90d9 0% 40%,#e74c3c 40% 70%,#2ecc71 70% 100%);}

四、现代颜色函数

color-mix()— 混合两种颜色

/* 混合两种颜色，按比例 */.mixed-color{background:color-mix(in srgb,#4a90d9 70%,white);/* 70% 蓝色 + 30% 白色 = 浅蓝色 */}/* 实战：生成悬停色 */.btn{--btn-color:#4a90d9;background:var(--btn-color);}.btn:hover{background:color-mix(in srgb,var(--btn-color)85%,black);/* 加深 15% */}

相对颜色语法 — 基于现有颜色调整

/* 基于一个颜色，调整某个通道 */.relative-color{/* 将蓝色加深（降低明度） */color:hsl(from #4a90d9 h scalc(l - 20%));/* 将红色增加透明度 */color:rgb(from #e74c3c r g b / 50%);}

五、对比度与可访问性

WCAG 对比度标准

/* 确保文字与背景有足够对比度 */.good-contrast{color:#fff;background:#333;/* 对比度约 12:1，符合 AAA */}.bad-contrast{color:#999;background:#eee;/* 对比度约 1.4:1，难以阅读 */}

WCAG 2.1 对比度要求：

/* 实用技巧：在不确定时，用深色文字配浅色背景，或反之 *//* 避免：浅灰配浅灰、亮黄配白色 */

color-contrast()（未来标准）

/* 自动从列表中选择对比度最高的颜色（尚未广泛支持） */.auto-contrast{color:color-contrast(var(--bg-color)vs #fff,#000 to AA);}

六、建立项目色彩系统

基础色彩变量

:root{/* ===== 品牌色 ===== */--brand-primary:#4a90d9;--brand-secondary:#764ba2;/* ===== 中性色阶 ===== */--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;/* ===== 语义色 ===== */--success:#10b981;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6;/* ===== 背景与文字 ===== */--bg-primary:#ffffff;--bg-secondary:#f9fafb;--text-primary:#111827;--text-secondary:#6b7280;--text-muted:#9ca3af;/* ===== 边框 ===== */--border-light:#e5e7eb;--border-medium:#d1d5db;}

深色模式支持

/* 默认（浅色模式） */:root{--bg-page:#ffffff;--text-main:#1a1a2e;--border-color:#e5e7eb;}/* 深色模式 */@media(prefers-color-scheme:dark){:root{--bg-page:#0f0f23;--text-main:#e4e4e7;--border-color:#27273a;}}body{background:var(--bg-page);color:var(--text-main);}

动手练习

练习 1：品牌色系生成

用 HSL 为你的项目生成一套品牌色阶（50-900）：

• 选择主色色相（如 210 代表蓝色系）
• 用 CSS 变量定义 9 个明度层级
• 为按钮的不同状态（默认/悬停/按下/禁用）分配合适的颜色

练习 2：渐变背景按钮

实现一组渐变按钮：

• 主按钮：蓝到紫的线性渐变
• 悬停时渐变方向改变
• 危险按钮：红到橙的渐变
• 添加微妙的阴影增强立体感

练习 3：对比度检查器

创建一个文字颜色选择器：

• 提供 3 组前景色和背景色组合
• 其中一组对比度不足（难以阅读）
• 用 CSS 注释说明每组的 WCAG 级别

常见误区 ⚠️

速查卡片 📋

颜色表示法对比

透明度写法

/* 整个元素透明 */opacity:0.5;/* 仅颜色透明 */color:rgba(0,0,0,0.5);color:rgb(0 0 0 / 50%);color:#00000080;

渐变速查

/* 线性渐变 */linear-gradient(direction,color-stop1,color-stop2,...);/* 径向渐变 */radial-gradient(shape at position,color-stop1,color-stop2,...);/* 圆锥渐变 */conic-gradient(from angle at position,color-stop1,color-stop2,...);

色彩系统模板

:root{--brand:hsl(210 65% 57%);--brand-light:hsl(210 65% 90%);--brand-dark:hsl(210 65% 35%);--bg:#ffffff;--text:#1a1a2e;--text-muted:#6b7280;--border:#e5e7eb;}

扩展阅读

• MDN: 颜色值
• MDN: 渐变
• MDN: opacity
• WebAIM: 对比度检查器（英文）
• oklch.com — OKLCH 颜色选择器（英文）
• colors.lol — 配色灵感（英文）

📌配套代码：

• CODE/10/color-system.html — 颜色系统演示与对比度检查
• CODE/10/gradients-demo.html — 渐变效果综合示例

🎉下一步：进入 第11篇：盒模型详解，学习 CSS 最核心的布局基础——盒模型。