🎨 04 - 颜色与渐变
颜色是设计中最直观、最有感染力的元素。一个恰当的配色方案可以让界面焕发生机，而糟糕的颜色选择则会让再好的布局也失去吸引力。本课将深入讲解 Figma 中的颜色系统、渐变效果、色彩理论和配色技巧，帮助你掌握创建精美配色的能力。无论你是设计新手还是有经验的设计师，理解颜色的本质和运用方法都是必不可少的技能。
📌 本课要点
- 颜色基础操作：填充、描边、透明度
- 颜色选择器完整功能
- 四种渐变类型详解：线性、径向、角度、菱形
- 色彩理论与常用配色方法
- 颜色样式系统的创建与应用
- 无障碍色彩设计与对比度检查
一、颜色基础操作
1. 添加填充（Fill）
填充是对象最基本的视觉属性。每个对象可以有一个或多个填充层，每个填充层可以独立设置类型、颜色和透明度。
1选择对象：点击画布上的形状、文本或图片。右侧属性面板会显示当前对象的所有属性。✅验证通过
2添加填充：在 Fill 部分点击 + 按钮。默认添加纯色填充。首次添加时会使用上次使用的颜色。✅验证通过
3选择颜色：点击颜色色块打开颜色选择器。可以输入 HEX 值（如 #8B5CF6）、RGB 值或 HSL 值。✅验证通过
4调整透明度：在颜色选择器右下角的透明度滑块调整，或在 Fill 行末尾的百分比输入框中直接输入。透明度为0%时完全透明。✅验证通过
2. 多重填充与混合模式
Figma 支持在一个对象上叠加多个填充层，每层可以独立设置颜色和混合模式：
1添加多个填充：在 Fill 部分连续点击 + ，每次添加一个新的填充层。上层覆盖下层，但可以通过透明度和混合模式控制叠加效果。✅验证通过
2混合模式：点击填充行右侧的下拉菜单，选择混合模式。常用模式：Multiply（正片叠底，变暗）、Screen（滤色，变亮）、Overlay（叠加，增强对比度）。✅验证通过
3实用技巧：纯色填充 + 低透明度渐变填充叠加，可以创造更有层次和深度的颜色效果。这是专业设计师常用的配色手法。✅验证通过
💡 提示：多重填充 + 混合模式是创建复杂视觉效果的关键技巧。例如：纯色填充 + 低透明度渐变叠加 = 更有层次的颜色。图片填充 + 纯色叠加 = 统一色调的背景图。
二、颜色选择器详解
Figma 的颜色选择器功能丰富，掌握它的各个区域能大大提高调色效率：
颜色选择器区域
- 色相环：外圈选择色相（Hue），0°为红色，120°为绿色，240°为蓝色，360°回到红色
- 饱和度-明度面板：内部区域，左右方向控制饱和度（左低右高），上下方向控制明度（上高下低）
- 透明度滑块：底部滑块控制颜色的透明度，从0%（完全透明）到100%（完全不透明）
- HEX输入框：直接输入六位十六进制色值，如 #8B5CF6
- RGB/HSL/HSB切换：点击 HEX 值旁的下拉箭头切换颜色模式，不同模式适合不同调色需求
- 吸管工具：从画布上任意位置吸取颜色，也可以从 Figma 窗口外部吸取
- 文档颜色：显示当前文件中已使用的颜色，方便复用
1使用吸管：颜色选择器中点击吸管图标，移动光标到画布任意位置点击吸取颜色。也可以从其他应用窗口吸取。✅验证通过
2切换颜色模式：点击 HEX 值旁的下拉切换 RGB/HSL/HSB。HSL 最直观——色相、饱和度、明度三个维度独立控制。✅验证通过
3文档颜色：颜色选择器底部显示当前文件中已使用的所有颜色，点击即可复用，保持配色一致。✅验证通过
三、渐变类型详解
🌅 线性渐变 Linear
颜色沿一条直线方向过渡，是使用最频繁的渐变类型。
- 可自由调整渐变角度（0°-360°）
- 可添加多个色标实现多色过渡
- 适合按钮背景、卡片渐变、标题文字效果
- 常见用法：从品牌色到深色的对角渐变
🎯 径向渐变 Radial
颜色从中心点向外辐射过渡，形成圆形扩散效果。
- 可调整中心点位置（拖拽中心圆点）
- 可调整辐射半径（拖拽边缘圆点）
- 适合光晕效果、聚光灯、按钮高光
- 常见用法：头像上的光晕、弹窗背景光效
🌀 角度渐变 Angular
颜色围绕中心点旋转过渡，形成锥形渐变效果。
- 适合圆形进度条、色轮、加载动画
- 可调整起始角度
- 视觉上像是从一个方向扫到另一个方向
💎 菱形渐变 Diamond
颜色从中心向四角辐射，形成菱形过渡图案。
- 在UI设计中较少使用
- 适合特殊装饰效果和艺术背景
- 可以作为设计实验的素材
渐变编辑技巧
1添加色标：选中渐变填充，在渐变预览条上点击添加新色标。每个色标可以设置不同颜色和位置。✅验证通过
2调整色标位置：拖拽色标左右移动，改变颜色过渡的精确位置。也可以在属性面板中输入百分比。✅验证通过
3删除色标：将色标向下拖拽离渐变条即可删除。至少保留两个色标。✅验证通过
4调整渐变方向：在画布上拖拽渐变线的端点旋转方向。线性渐变可以调整角度，径向渐变可以调整中心和半径。✅验证通过
💡 提示：渐变色标的颜色过渡遵循贝塞尔曲线原理。如果想要更锐利的颜色分界，可以将两个色标放得非常接近。如果想要平滑过渡，拉开色标距离即可。
四、色彩理论
1. 色彩三要素
| 要素 | 英文 | 说明 | 设计意义 |
|---|
| 色相 | Hue | 颜色的种类（红蓝绿等） | 决定色彩基调，是最直观的颜色差异 |
| 饱和度 | Saturation | 颜色的鲜艳程度 | 高饱和=活泼冲击，低饱和=沉稳内敛 |
| 明度 | Brightness | 颜色的明暗程度 | 高明度=轻盈明快，低明度=厚重深沉 |
2. 常用配色方案
| 方案 | 原理 | 视觉效果 | 适用场景 | 示例 |
|---|
| 互补色 | 色相环对立面（间隔180°） | 强烈对比，视觉冲击 | 强调、警示、CTA按钮 | 蓝+橙、红+绿 |
| 类似色 | 色相环相邻（间隔30°-60°） | 和谐统一，柔和舒适 | 品牌色系、背景渐变 | 蓝+蓝紫+紫 |
| 三角色 | 色相环等距三角（间隔120°） | 丰富活泼，平衡对比 | 多彩界面、儿童产品 | 红+黄+蓝 |
| 分裂互补 | 互补色两侧（间隔150°+30°） | 对比+和谐，层次丰富 | 专业产品、内容平台 | 蓝+橙红+橙黄 |
3. 60-30-10 法则
经典配色比例
- 60% 主色：占据大部分面积，通常是背景色或品牌色
- 30% 辅助色：用于次要元素，与主色形成层次
- 10% 强调色：用于CTA按钮、重要提示、焦点元素
这个比例源自室内设计，在UI设计中同样适用。它确保了视觉层次清晰，同时保持整体和谐。
五、颜色样式系统
1创建颜色样式：选中对象，Fill 区域点击四个点图标 → Create style，命名如 Primary/500、Neutral/900。✅验证通过
2层级命名：使用 / 分隔创建层级，如 Semantic/Success、Semantic/Error。这样在样式面板中自动分组。✅验证通过
3应用样式：选中对象，Fill 区域点击样式图标选择。修改样式时所有引用自动更新。✅验证通过
推荐颜色体系结构
- Primary：品牌主色，5-9个色阶（50最浅-900最深）
- Neutral：中性灰色，用于文本、背景、边框，5-9个色阶
- Semantic/Success：成功色（绿色系）
- Semantic/Warning：警告色（黄色系）
- Semantic/Error：错误色（红色系）
- Semantic/Info：信息色（蓝色系）
- Surface：表面色（卡片背景、弹窗背景等）
⚠️ 颜色样式命名务必使用英文和层级结构，方便团队协作和开发对接。避免使用"浅蓝1"、"深红2"这类主观命名。
六、无障碍色彩设计
1对比度标准：WCAG 2.1 AA级要求——正文（小于18px）对比度至少4.5:1；大文本（18px+或14px粗体+）至少3:1。✅验证通过
2检查工具：安装 Contrast 插件，选中前景和背景色即可检查对比度。绿色=通过，红色=不通过。✅验证通过
3不要只依赖颜色：同时使用图标、文本标签、下划线等辅助方式传达信息，照顾色觉障碍用户。✅验证通过
4色盲友好配色：避免红绿对比（红绿色盲最常见），使用蓝橙、蓝黄等色盲友好组合。✅验证通过
⚠️ 约8%男性和0.5%女性存在色觉障碍。设计时务必考虑无障碍色彩，这不仅是为了包容性，在很多地区也是法律要求。
🎯 练习
- 创建完整的5色阶颜色体系（Primary 50-900）
- 设计4种不同类型的渐变效果
- 创建颜色样式并应用到3个不同组件
- 使用 Contrast 插件检查对比度
- 尝试用60-30-10法则设计一个卡片配色
🎨
色彩达人
完成本课学习，你已经掌握了颜色与渐变的核心技能！