网站配色方案设计指南

导读：色彩是网站给人的第一印象。研究表明，用户在 90 秒内就能对产品做出判断，而其中 62%-90% 的判断仅基于色彩。好的配色方案能让网站看起来专业、可信、有品牌感；差的配色会让用户产生抵触情绪，即使内容再好也留不住人。本教程带你从零开始掌握网站配色的完整方法论——从理解色彩基础，到用 60-30-10 法则落地，再到设计完整的 CSS 变量系统。

1. 色彩基础：色相、饱和度、明度

在开始配色之前，先把三个核心概念搞清楚。每一种颜色都可以用三个维度来描述：色相（Hue）、饱和度（Saturation）、明度（Value/Brightness）。这就是设计软件中常见的 HSV 或 HSL 色彩模型。

三个核心维度的含义

维度	含义	举例
色相（Hue）	颜色的"种类"，即我们常说的红、橙、黄、绿、蓝、紫。可以想象成一个 360° 的圆环（色轮），每个角度对应一种颜色。	红色 = 0°，绿色 = 120°，蓝色 = 240°
饱和度（Saturation）	颜色的"纯度"或"鲜艳程度"。0% 是灰色（完全不饱和），100% 是最鲜艳的纯色。	低饱和的红色像砖红色，高饱和的红色像警示标志红
明度（Value）	颜色的"明亮程度"。0% 是纯黑，100% 是纯白。	深蓝（低明度）适合做背景，浅蓝（高明度）适合做强调色

为什么这三个概念对你很重要

• 色相决定网站的氛围：蓝色给人冷静专业的感觉，适合金融科技类网站；橙色活泼温暖，适合美食或儿童类网站。
• 饱和度决定内容的"噪音"程度：高饱和度的色彩在小面积（按钮、链接）上很吸引眼球，但大面积使用会让眼睛疲劳。正文内容区域通常使用中低饱和度的颜色。
• 明度决定可读性：文本和背景之间的明度差越大，对比度越高，阅读越舒适。WCAG 2.1 标准要求正文文本的对比度至少为 4.5:1。

💡 新手建议：选色时先确定一个主色相，然后通过调整饱和度和明度来生成辅助色和强调色。比直接从色轮上选多个不同色相的颜色，更容易得到协调的配色方案。

色彩的四种基本关系

理解色彩关系能帮你快速生成协调的配色方案：

• 同类色（Monochromatic）：同一色相下的不同明度/饱和度。最保守、最容易保持协调的方案。适合内容密集、需要用户长时间阅读的网站。
• 类似色（Analogous）：色轮上相邻的 3-5 个颜色（如蓝、蓝绿、绿）。和谐自然，视觉舒适。
• 互补色（Complementary）：色轮上正对面的两个颜色（如蓝和橙、红和绿）。高对比度，视觉冲击力强。适合用于按钮和重点强调的区域。
• 分裂互补色（Split Complementary）：一个原色加上它互补色两侧的两个颜色（如蓝色 + 黄橙色 + 红橙色）。既有互补色的对比，又不会太刺眼。
• 三色组（Triadic）：色轮上等距的三个颜色（如红、黄、蓝）。视觉丰富，充满活力，但需要谨慎控制比例。

2. 色彩心理学在网站设计中的应用

不同的颜色会引发用户不同的情感反应。这不是玄学，而是有大量心理学和市场研究数据支持的结论。在选择网站主色时，先想清楚你希望用户感受到什么。

颜色	心理联想	适合场景	经典案例
蓝色	信任、专业、稳定、冷静、科技感	银行、金融、科技公司、企业官网	Facebook、Twitter、Visa、PayPal、IBM
绿色	自然、健康、成长、财富、环保	健康医疗、环保组织、有机食品、教育	Starbucks、Whole Foods、Spotify
红色	激情、紧急、行动、危险、爱情	促销活动、电商网站、外卖、新闻媒体	Coca-Cola、YouTube、Netflix
橙色	活力、友好、创意、优惠、温暖	儿童产品、餐饮、SaaS 工具、运动品牌	Amazon、Nickelodeon、Fanta
紫色	创意、奢侈、神秘、品质、艺术	高端品牌、艺术类网站、游戏、美容	Yahoo!、Cadbury、Twitch
深色（深灰/海军蓝）	专业、优雅、高端、权威	奢侈品、设计工作室、律师事务所	Apple、Squarespace、Awwwards
中性色（灰/米白）	平衡、简洁、让内容成为主角	所有网站的背景色和文字色	Medium、Wikipedia

如何用色彩引导用户行为

色彩不仅是装饰，更是引导用户注意力的工具。以下是一些经过验证的设计原则：

1. 主要操作按钮用高饱和度的强调色：注册、购买、提交等按钮应该使用网站的强调色（通常是互补色），使其在页面中"跳出来"。
2. 次要操作按钮使用低饱和度的中性色：取消、返回、跳过等按钮不应该争夺用户注意力。
3. 警告和错误信息使用红色：用户一眼就能识别问题的严重性。
4. 成功和确认信息使用绿色：给用户积极的心理反馈。
5. 链接颜色与正文区分开：传统做法是蓝色加下划线，但现代设计中任何与正文有足够对比度的颜色都可以。

3. 60-30-10 配色法则的实际应用

60-30-10 法则是室内设计中诞生的经典配色原则，后来被广泛应用于 UI 设计。它的核心思想是：不要让各种颜色平均分配页面空间，而是按比例分配，让视觉层次清晰。

比例分配

角色	占比	功能	示例
主色（Dominant）	60%	页面的基础背景色，奠定整体基调	白色、浅灰、极浅的品牌色
辅助色（Secondary）	30%	次级背景、卡片、导航栏、分隔区域	中度品牌色、浅灰卡片背景
强调色（Accent）	10%	按钮、链接、图标、需要突出的元素	高饱和度的品牌色或互补色

为什么这个比例有效

想象一下走进一个房间：墙壁（60%）是中性色让你感到放松，沙发和家具（30%）是你喜欢的颜色让空间有个性，抱枕和装饰品（10%）是最鲜艳亮眼的颜色作为点缀。如果把比例反过来——墙壁用最鲜艳的颜色——你在里面待 5 分钟就会头痛。

实际案例：一个电商网站的配色

假设你要做一个主打"健康食品"的电商网站，选择绿色作为品牌色。使用 60-30-10 法则的配色方案如下：

/* 60%：主色 —— 背景，给人清爽干净的感觉 */
--color-primary-bg: #ffffff;           /* 纯白主背景 */
--color-secondary-bg: #f8faf8;         /* 带一点绿调的米白，分区背景 */
--color-text-primary: #1a1a1a;         /* 主文本 */
--color-text-secondary: #555555;       /* 次要文本 */

/* 30%：辅助色 —— 导航栏、卡片、次级区域 */
--color-brand: #2d7a3e;                /* 品牌深绿，用于 Logo 和导航 */
--color-card-bg: #ffffff;              /* 卡片背景 */
--color-border: #e5e7eb;               /* 边框色 */
--color-navigation-bg: #1f4d2a;        /* 深绿导航栏背景 */

/* 10%：强调色 —— 按钮、价格标签、促销标签 */
--color-accent: #ff6b35;               /* 互补色（橙色），用于 CTA 按钮 */
--color-accent-hover: #e55a2b;         /* 按钮悬停状态 */
--color-price: #c9302c;                /* 价格红色 */
--color-success: #27ae60;              /* 成功状态绿色 */

💡 关键洞察：主色（60%）通常不是你在 Logo 中看到的"品牌色"。品牌色通常作为辅助色或强调色使用，因为品牌色往往饱和度较高，大面积使用会让人视觉疲劳。真正占据 60% 页面空间的通常是白色、浅灰等中性色。

4. 推荐的免费配色工具与使用场景

你不需要从零开始调配每一个颜色。以下工具都提供了大量经过设计师验证的配色方案和自动化生成能力。

工具	特点	适合人群
XinYuMaTou 配色工具 color.7986455.xyz	在线配色方案生成器，支持色轮选色、同类色/互补色/三色组一键生成、实时预览在按钮和卡片上的效果。浏览器本地运行，无需注册。	初学者、快速获取灵感
Coolors coolors.co	最流行的配色灵感工具。按空格键自动生成 5 色调色板，可以锁定满意的颜色后继续调整其他色。提供大量用户分享的配色方案。	初学者、寻找灵感
Adobe Color color.adobe.com	官方出品的专业级工具。支持色轮（同类色、类似色、互补色、三色组、分裂互补色五种模式）、色彩规则、从图片提取主题色。需要免费 Adobe 账户。	需要系统配色方案的设计师
Paletton paletton.com	经典配色工具。可以从一个主色出发，自动生成同类色、类似色、三色组、分裂互补色、互补色等多种方案。支持模拟色盲视角。	学习配色原理、检查可访问性
Color Hunt colorhunt.co	精选的 4 色调色板合集。按"热门""最新""随机"浏览。每个调色板都是其他设计师精选的，质量很高。适合快速获取灵感。	寻找现成方案的开发者
WebAIM Contrast Checker webaim.org/resources/contrastchecker	输入两个颜色的十六进制值，立即检测是否通过 WCAG AA（4.5:1）和 AAA（7:1）标准。调色的最后一步必须检查。	所有人（必用工具）
0to255 0to255.com	输入一个颜色，自动生成从亮到暗的 11 个变体。非常适合生成按钮的悬停/激活/禁用状态色。	需要生成颜色深浅变体
Material Design Color Tool material.io/resources/color	Google 出品。选择主色和强调色后，实时预览在 UI 组件上的效果，自动检测对比度是否达标。	App 设计、Material Design 风格

从图片提取配色的技巧

如果你看到一张让你心动的照片（比如风景摄影），可以用以下工具从图片中提取主色调：

• Adobe Color 的「从图像提取」功能
• Coolors 的「从照片提取调色板」
• Canva 的「照片调色板生成器」

大自然的配色永远是最协调的——日落时的橙色、紫色、粉色渐变组合，森林中的绿色层次，海洋的蓝色深度，这些都是优秀的配色灵感来源。

5. 深色模式 vs 浅色模式：何时选、如何实现

2019 年 iOS 13 和 Android 10 引入系统级深色模式后，越来越多的网站开始支持。但这不代表你的网站必须做——先想清楚你的用户和场景。

深色模式的优点

• 减少眼睛疲劳：在低光环境（晚上、卧室）中，深色背景比白色更舒适。
• 省电：在 OLED 屏幕（iPhone X 及以上、大多数高端安卓手机）上，黑色像素不发光，可显著延长续航。
• 沉浸感强：适合媒体类、视频类、游戏类、代码编辑器类网站，让内容（特别是图片和视频）更加突出。
• 时尚感：深色模式给人一种现代、高级的感觉。

深色模式的缺点

• 阅读长文效果差：白底黑字在明亮环境中的可读性仍然优于黑底白字。对于长篇内容为主的网站（博客、新闻、文档），浅色模式仍然是首选。
• 设计难度高：不是简单地把颜色反转。需要重新设计阴影、对比度、图片处理。
• 图片问题：浅色背景上看起来很好的照片，放到深色背景上可能显得突兀或过亮。

推荐策略：双模式 + 默认浅色 + 用户选择

最稳妥的方案是：默认浅色模式，提供一个明显的切换按钮让用户选择，并记住用户的偏好。

用 CSS 变量实现深色模式

/* 在 :root 中定义浅色模式变量（默认） */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --border-color: #e5e7eb;
    --accent-color: #00d4aa;
    --accent-hover: #00b894;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 当用户切换到深色模式时，覆盖这些变量 */
[data-theme="dark"] {
    --bg-primary: #0f172a;           /* 深蓝黑，比纯黑更柔和 */
    --bg-secondary: #1e293b;         /* 深海军蓝 */
    --text-primary: #f1f5f9;         /* 接近白色的浅灰，纯白太刺眼 */
    --text-secondary: #94a3b8;       /* 中灰色次要文本 */
    --border-color: #334155;         /* 深色边框 */
    --accent-color: #22d3ee;         /* 调整强调色在深色背景上的表现 */
    --accent-hover: #06b6d4;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* 深色模式阴影要更大、更不透明 */
}

/* 所有组件只使用变量，不需要单独写深色模式样式 */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

用 JavaScript 实现切换与记忆

// 获取切换按钮元素
const themeToggle = document.getElementById('theme-toggle');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

// 初始化主题：优先使用用户保存的选择，其次使用系统偏好
function initTheme() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        document.documentElement.setAttribute('data-theme', savedTheme);
    } else if (prefersDark.matches) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
}

// 切换主题
function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);  // 保存用户选择
}

// 绑定事件
themeToggle.addEventListener('click', toggleTheme);

// 初始化
initTheme();

6. 可访问性 WCAG 2.1 标准：对比度要求

据统计，全球约 8% 的男性和 0.5% 的女性存在不同程度的色盲或色弱。加上视力正常但在强光环境下看屏幕的用户、以及老年用户，可访问性不是"可选项"，而是"必选项"。

WCAG 2.1 对比度标准

文本类型	AA 级（最低要求）	AAA 级（推荐目标）
正文文本（18px 以下常规字重）	对比度 4.5 : 1	对比度 7 : 1
大文本（18px 及以上，或加粗 14px 及以上）	对比度 3 : 1	对比度 4.5 : 1
UI 组件图形（按钮边框、图标等）	对比度 3 : 1	无官方要求

如何检查对比度

1. 打开 webaim.org/resources/contrastchecker
2. 输入前景色（文字色）和背景色的 HEX 值
3. 查看是否显示 "PASS"（通过）或 "FAIL"（失败）
4. 如果失败，工具会提示你调整颜色

常见的对比度问题案例

/* ❌ 错误示例：浅灰文字在白色背景上，对比度仅 1.5:1 */
.bad-contrast {
    color: #cccccc;    /* 浅灰文字 */
    background: #ffffff;
}

/* ✅ 正确示例：深灰文字在白色背景上，对比度 7.5:1 */
.good-contrast {
    color: #333333;    /* 深灰文字 */
    background: #ffffff;
}

/* ❌ 错误示例：浅蓝色文字在浅灰色背景上，对比度 2.3:1 */
.bad-link {
    color: #4a90e2;    /* 在 #f5f5f5 背景上不达标 */
    background: #f5f5f5;
}

/* ✅ 正确示例：更深的蓝色，对比度 5.2:1 */
.good-link {
    color: #2563eb;    /* 深一点的蓝色 */
    background: #f5f5f5;
}

/* ❌ 错误示例：黄色文字在白色背景上，任何黄都达不到要求 */
/* 黄色是最容易出现对比度问题的颜色，建议：
   - 不要用黄色做文字色（除非放在深色背景上）
   - 黄色只适合做背景色、标签色、强调色 */

色盲友好设计原则

最常见的色盲类型是红绿色盲（约 8% 男性受影响）。他们难以区分红色和绿色。

• 不要只用颜色传递信息：错误信息除了红色外，还要加 ❌ 图标和"错误"文字；成功信息除了绿色外，还要加 ✅ 图标。
• 红 + 绿 不要相邻使用：图表中红色柱形和绿色柱形对色盲用户看起来是一样的。建议加图案区分（斜线、点线）或使用不同明度。
• 使用 Coblis 或 Color Safe 工具预览：模拟色盲用户看到的效果。
• 优先使用蓝-橙配色：蓝色和橙色在色盲用户眼中仍然有明显区分。这也是很多科技公司（橙色主按钮 + 蓝色品牌色）的选择原因之一。

7. 品牌色在网页中的一致性应用

品牌色是用户识别你的网站的关键视觉标记。它不应该只出现在 Logo 里，而应该贯穿整个网站。但"贯穿"不等于"到处都是"——而是在关键位置反复出现，强化品牌记忆。

品牌色应该出现的位置

位置	建议使用方式
Logo	最核心的出现位置。确保 Logo 有单色版本用于不同背景。
主按钮 / CTA	购买、注册、提交等按钮使用品牌色（或其高饱和变体）。这是品牌色在页面中最显眼的位置之一。
链接	正文内的超链接使用品牌色或其浅色变体。注意保持 4.5:1 以上对比度。
图标 / 小图形元素	列表图标、勾选标记、小装饰图形可以使用品牌色。
强调文字 / 标题首字母	段落中的重点关键词可以用品牌色加粗。
表单控件聚焦状态	输入框获得焦点时的边框色和高亮色使用品牌色。
导航栏 / 页脚	品牌色的深色调可以作为导航栏背景色。
图表 / 数据可视化	图表的主数据系列使用品牌色。

品牌色不应该出现的位置

• 正文文字颜色：品牌色通常饱和度较高，用作长文文字会让人视觉疲劳，且对比度往往不达标。
• 大面积背景色：除非你的品牌色本身就很浅（如浅蓝），否则不建议作为整页背景。
• 所有按钮：次要按钮（取消、返回）应该用中性色。如果所有按钮都是品牌色，就没有重点了。

用 CSS 变量建立品牌色系统

/* 定义品牌色的完整色板（从浅到深） */
:root {
    /* 主品牌色（假设是一种蓝色） */
    --brand-50:  #eff6ff;    /* 最浅，可用于背景 */
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;    /* 基准品牌色（默认使用这个） */
    --brand-600: #2563eb;    /* 文字色、悬停态 */
    --brand-700: #1d4ed8;    /* 深色背景、按钮激活态 */
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;    /* 最深，可用于深色模式 */

    /* 语义化颜色 —— 基于品牌色派生 */
    --color-primary: var(--brand-500);        /* 主强调色 */
    --color-primary-hover: var(--brand-600);  /* 悬停态（更深一点） */
    --color-primary-active: var(--brand-700); /* 点击态 */
    --color-primary-bg: var(--brand-50);      /* 浅背景，用于标签等 */
    --color-primary-text: var(--brand-700);   /* 品牌色文字，用于副标题 */

    /* 中性色 —— 灰阶，用于文本和背景 */
    --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;

    /* 功能色 —— 用于状态反馈 */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger:  #ef4444;
    --color-info:    #3b82f6;
}

/* 使用示例 */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-primary:hover { background-color: var(--color-primary-hover); }
.btn-primary:active { background-color: var(--color-primary-active); }

.badge {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

💡 专业技巧：建立品牌色系统时，建议从一个基准色（如 #3b82f6）出发，生成 9-10 级的深浅变化。Tailwind CSS 的色板命名方式（50、100、200...900）已成为行业标准，建议参考这种命名方式，让团队成员对每个颜色的用途有共识。

8. 实战案例：从选色到 CSS 变量

让我们走一遍完整的流程：从零开始为一个「金融科技创业公司」设计配色方案。

第 1 步：确定网站目标和情感定位

• 网站类型：金融科技 SaaS 产品官网
• 目标用户：中小企业主、财务人员
• 情感关键词：可信赖、专业、现代、简洁
• 色彩方向：蓝色系（信任）+ 中性灰（专业）+ 少量橙色（行动号召）

第 2 步：选定主色

在 Coolors 中浏览，找到一个适合金融科技的蓝色：#1e40af（深宝蓝，传递稳重和可信赖）

第 3 步：生成完整色板

用 0to255.com 或 color.adobe.com 从主色生成 10 级色板，然后手动调整每一级使其过渡平滑。

/* 金融科技公司品牌色板 */
:root {
    /* 主品牌色：宝蓝色 */
    --brand-50:  #eef4ff;    /* 浅蓝背景、标签背景 */
    --brand-100: #dbe6ff;
    --brand-200: #bfd3ff;
    --brand-300: #93b6ff;
    --brand-400: #6092ff;
    --brand-500: #3b6df6;    /* 基准色：主按钮、Logo */
    --brand-600: #2550dc;    /* 悬停态、链接色 */
    --brand-700: #1e40af;    /* 深色品牌色、标题色 */
    --brand-800: #1e3a8a;
    --brand-900: #172554;    /* 最深：导航栏背景、深色模式 */

    /* 强调色：橙色（与蓝色互补，用于 CTA 和促销） */
    --accent-50:  #fff7ed;
    --accent-100: #ffedd5;
    --accent-400: #fb923c;
    --accent-500: #f97316;    /* 基准强调色：限时优惠、重要 CTA */
    --accent-600: #ea580c;

    /* 成功色：绿色 */
    --success-500: #10b981;
    --success-600: #059669;

    /* 警告色：黄色/橙色 */
    --warning-500: #f59e0b;

    /* 危险色：红色 */
    --danger-500: #ef4444;

    /* 中性色：灰阶 */
    --gray-50:  #f9fafb;    /* 页面背景 */
    --gray-100: #f3f4f6;    /* 卡片背景、输入框背景 */
    --gray-200: #e5e7eb;    /* 边框、分隔线 */
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;    /* 次要文字、占位符 */
    --gray-500: #6b7280;
    --gray-600: #4b5563;    /* 次要标题 */
    --gray-700: #374151;    /* 正文文字（对比度 10:1） */
    --gray-800: #1f2937;    /* 主标题 */
    --gray-900: #111827;    /* 最深文本 */
}

第 4 步：检查对比度

用 WebAIM Contrast Checker 验证关键组合：

文字 #374151 (gray-700) 在 背景 #ffffff 上：
  对比度 = 10.2 : 1  →  ✅ 通过 AAA

文字 #ffffff 在 按钮 #3b6df6 (brand-500) 上：
  对比度 = 5.2 : 1   →  ✅ 通过 AA

链接 #2550dc (brand-600) 在 背景 #ffffff 上：
  对比度 = 8.7 : 1   →  ✅ 通过 AAA

文字 #ffffff 在 按钮 #f97316 (accent-500) 上：
  对比度 = 3.8 : 1   →  ⚠️  对于小按钮文本略低
  解决方案：使用 --accent-600 (#ea580c)
  对比度 = 4.7 : 1   →  ✅ 通过 AA

第 5 步：定义组件样式

/* 按钮系统 */
.btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }

.btn-primary { background: var(--brand-500); color: white; }
.btn-primary:hover { background: var(--brand-600); }

.btn-secondary { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-200); }

.btn-accent { background: var(--accent-500); color: white; }
.btn-accent:hover { background: var(--accent-600); }

/* 卡片 */
.card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 链接 */
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }

/* 标签 */
.tag { background: var(--brand-50); color: var(--brand-700); padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; }

/* 表单输入框 */
.input-field {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--gray-700);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(59, 109, 246, 0.15);  /* 品牌色发光边框 */
}

第 6 步：设计深色模式（可选）

[data-theme="dark"] {
    --gray-50:  #0f172a;    /* 反转：最深的灰色变成页面背景 */
    --gray-100: #1e293b;    /* 卡片背景 */
    --gray-200: #334155;    /* 边框 */
    --gray-700: #e2e8f0;    /* 正文文本（变浅） */
    --gray-800: #f1f5f9;    /* 标题 */
    --gray-900: #f8fafc;
    /* 品牌色保持不变，因为在深色背景上也能工作 */
    /* 品牌色浅色变体 (#50, #100) 可能需要调整以适应深色背景 */
    --brand-50: rgba(59, 109, 246, 0.15);
    --brand-700: #60a5fa;  /* 文字色变浅，保持可读性 */
}

9. 常见配色错误与避免方法

错误 1：颜色过多

症状：页面同时出现 5 种以上饱和度都很高的颜色，看起来像糖果店。

解决：严格遵循 60-30-10 法则，一个主色 + 一个辅助色 + 一个强调色 + 中性灰阶。将品牌色控制在 10% 以内。

错误 2：对比度不足

症状：浅灰文字在浅灰背景上，用户需要眯着眼睛看。

解决：用 WebAIM Contrast Checker 验证所有正文组合，确保至少 4.5:1。黄色和橙色文字在白色背景上是重灾区。

错误 3：纯黑纯白

症状：所有文字都是 #000000，所有背景都是 #ffffff。看起来像还没做完的线框图，缺乏层次感。

解决：文字用深灰（#1f2937 或 #374151），背景用带微妙色调的米白（#f9fafb 或 #f8faf8）。这样既保持可读性，又更柔和。

错误 4：品牌色无处不在

症状：标题、正文、按钮、背景、边框全是品牌色，页面视觉嘈杂，没有重点。

解决：品牌色只用于关键位置（按钮、链接、图标、标签）。让 90% 的页面空间留给中性色。

错误 5：不考虑色盲用户

症状：图表中用红色和绿色表示涨跌，错误/成功状态只用颜色区分。

解决：所有信息都要有颜色以外的第二种表达形式（图标、文字、形状）。用色盲模拟工具预览效果。

错误 6：深色模式设计质量差

症状：简单地把颜色反转（白变黑黑变白），所有对比度都爆表，阴影完全消失，图片看起来很突兀。

解决：使用 CSS 变量系统，为深色模式单独定义一套颜色（不是简单反转）。调整阴影和边框的不透明度。图片可能需要加暗色滤镜。

🎯 总结与下一步

配色流程清单（6 步）

1. 确定品牌情感：你希望用户感受到什么？（信任、活力、专业、创意…）选择对应的主色相。
2. 选定主色并生成色板：从主色出发，生成 10 级深浅变体（参考 Tailwind 命名方式）。
3. 选择强调色：用互补色或分裂互补色作为按钮和 CTA 的颜色。
4. 建立中性灰阶：10 级灰色，用于文字和背景。
5. 检查对比度：用 WebAIM Contrast Checker 验证所有文本组合。
6. 实现为 CSS 变量：建立品牌色 + 语义色的双层变量系统，应用到组件。

推荐的检查清单

• ✅ 主文本在主背景上的对比度 ≥ 4.5:1
• ✅ 按钮文字在按钮背景上的对比度 ≥ 4.5:1
• ✅ 页面没有同时出现 3 种以上高饱和度的颜色
• ✅ 品牌色在 Logo、按钮、链接中保持一致
• ✅ 错误/成功状态除了颜色还有第二种表达方式
• ✅ 链接颜色与正文颜色有明显区分
• ✅ 标题颜色比正文更深或更醒目

进一步学习的方向

• 设计系统（Design System）：将配色、间距、圆角、字体等全部标准化为可复用的组件库。推荐参考 Google Material Design、IBM Carbon Design System、Shopify Polaris。
• 排版与配色的配合：颜色和字体是影响网站整体感觉最重要的两个因素。学习如何让字体风格和配色风格协调（比如现代无衬线字体 + 现代大胆配色，衬线字体 + 经典克制配色）。
• 动画中的色彩：学习如何在按钮悬停、页面过渡、加载动画中合理使用颜色。

📚 扩展阅读推荐：《色彩构成》（经典设计教材）、"Refactoring UI"（包含配色章节的实用 UI 设计书）、"Designing Interface Animation"（动画与色彩配合）。在线资源：coolors.co、color.adobe.com、webaim.org/resources/contrastchecker、paletton.com、colorhunt.co。

← 回到首页