配色是网页设计的灵魂。好的配色能让产品看起来专业、舒服、有品牌感；糟糕的配色则会让用户望而却步。很多开发者觉得配色是设计师的事，但掌握基础的配色理论，对提升产品的整体质感大有帮助。本文从色彩基础讲起，带你从零掌握网页配色。
1. 色彩基础：三要素与色彩模式
理解配色之前，先搞清楚色彩的基本属性。任何一种颜色都可以用三个维度来描述：
- 色相（Hue）：颜色的基本面貌，也就是我们说的红、橙、黄、绿……在色轮上 0-360 度分布
- 饱和度（Saturation）：颜色的纯度，越高越鲜艳，越低越接近灰色
- 明度（Value / Lightness）：颜色的明暗程度，越高越亮，越低越暗
这就是 HSL 色彩模型。相比 RGB，HSL 更符合人类对颜色的直觉认知，在网页配色中非常实用。
/* HSL 语法 */
color: hsl(220, 80%, 50%);
/* 色相220度（蓝色），饱和度80%，明度50% */
/* 带透明度 */
color: hsl(220 80% 50% / 0.7);
/* 调整明度得到同色系深浅色 */
--primary: hsl(220, 80%, 50%);
--primary-light: hsl(220, 80%, 70%);
--primary-dark: hsl(220, 80%, 30%);2. 配色方案：从色轮说起
经典的配色方案都基于色轮关系。掌握以下几种，足以应对大部分网页设计需求。
单色配色（Monochromatic）
只使用一种色相，通过调整饱和度和明度产生不同深浅的颜色。这种方案最安全、最和谐，适合简约风格的产品。
/* 蓝色系单色配色 */
--blue-50: hsl(220, 100%, 95%);
--blue-100: hsl(220, 90%, 88%);
--blue-200: hsl(220, 85%, 75%);
--blue-500: hsl(220, 80%, 50%);
--blue-700: hsl(220, 80%, 30%);
--blue-900: hsl(220, 80%, 12%);互补色配色（Complementary）
色轮上相差 180 度的两种颜色互为补色。互补色对比强烈，视觉冲击力强，但使用不当容易刺眼。适合用作强调色（CTA 按钮）。
/* 蓝橙互补 */
--primary: hsl(220, 80%, 50%); /* 蓝色 */
--accent: hsl(30, 100%, 50%); /* 橙色 */邻近色配色（Analogous）
色轮上相邻的 3-5 种颜色。视觉上和谐舒适，是最自然的配色方案，适合内容型网站。
/* 蓝青紫邻近色 */
--blue: hsl(220, 80%, 50%);
--indigo: hsl(250, 70%, 55%);
--purple: hsl(280, 65%, 60%);三色配色（Triadic）
色轮上等距的三种颜色（相差 120 度）。色彩丰富但保持平衡，适合活泼、年轻的产品风格。
3. 60-30-10 法则：配色的黄金比例
这是室内设计延伸到 UI 设计的经典法则：主色占 60%，辅助色占 30%，强调色占 10%。这个比例能保证视觉层次分明，既不单调也不杂乱。
- 60% 主色：大面积背景色，决定整体调性
- 30% 辅助色：侧边栏、卡片、次要元素
- 10% 强调色：按钮、链接、重点突出的元素
在网页中，主色往往不是品牌色，而是中性色（白色/浅灰/深灰）。品牌色更多作为辅助色或强调色出现。
4. 中性色的重要性
新手做配色最容易犯的错误：花大量时间选主色，却忽视了中性色。实际上，一个网页 70% 以上的面积都是中性色（文本、背景、边框）。中性色的质感直接决定了网站的整体观感。
/* 一套完整的中性色体系 */
--gray-50: #F9FAFB; /* 页面背景 */
--gray-100: #F3F4F6; /* 卡片背景 */
--gray-200: #E5E7EB; /* 边框/分割线 */
--gray-300: #D1D5DB; /* 浅文本/禁用 */
--gray-500: #6B7280; /* 次要文本 */
--gray-700: #374151; /* 正文文本 */
--gray-900: #111827; /* 标题/强调文本 */选中性色的技巧：不要用纯灰（饱和度为 0），加入一点蓝色或紫色调会让灰色看起来更高级。可以用 hsl(220, 10%, 50%) 这样的微饱和灰。
5. 对比度与无障碍设计
配色不仅关乎美观，更关乎可用性。WCAG 2.1 标准要求：正文文本与背景的对比度至少达到 4.5:1，大号文本至少达到 3:1。
/* 计算对比度的简单方法 */
// 使用 L 通道（相对亮度）
// L = 0.2126 * R + 0.7152 * G + 0.0722 * B （线性空间）
// 常见文本颜色对比度（白底）
#111827 → 约 15:1 ✅ 优秀
#374151 → 约 9:1 ✅ 优秀
#6B7280 → 约 4.5:1 ✅ 刚好达标
#9CA3AF → 约 2.7:1 ❌ 不达标（不能用于正文）检查对比度的工具很多：Chrome DevTools 的颜色选择器自带对比度检查；WebAIM Contrast Checker 是业界标准；DevToolHub 的 颜色选择器也可以快速查看颜色的对比度和 accessibility 信息。
6. 配色工具与资源推荐
以下是一些实用的配色工具，帮你快速生成高质量的配色方案：
- coolors.co：生成随机配色方案，空格键一键换色
- colorhunt.co：人工精选的配色库，质量很高
- tailwindcss.com/docs/customizing-colors：Tailwind 的色板体系值得参考
- palettemaker.com：基于色轮关系生成专业配色
- DevToolHub 调色板生成器：输入主色自动生成完整色板
最后一条建议：多看好的设计，培养审美直觉。Dribbble、Behance、各种设计系统文档（Material Design、Ant Design、Apple HIG）都是最好的配色学习素材。
7. 深色模式配色
深色模式已经从"加分项"变成了"标配"。做好深色模式配色，不仅是为了酷炫，更是为了用户在弱光环境下的用眼健康。
深色模式的设计原则
- 不要用纯黑：纯黑（#000）和白色文字的对比度太高，容易产生眩光。推荐使用深灰（如 #121212 或 #0F172A）作为背景。
- 降低饱和度：亮色模式下鲜艳的颜色，在深色背景上会显得刺眼。主色在深色模式下应该降低 10-20% 的饱和度。
- 调整文字色阶：用不同透明度的白色来区分文字层级，而不是不同深度的灰色。
- 注意阴影和深度：深色模式下阴影效果不明显，可以用亮色的边框或渐变来表达层级。
/* CSS 变量实现深色模式 */
:root {
--bg: #ffffff;
--text: #111827;
--text-secondary: #6B7280;
--border: #E5E7EB;
--primary: #4F46E5;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0F172A;
--text: #F1F5F9;
--text-secondary: #94A3B8;
--border: #1E293B;
--primary: #818CF8; /* 降低饱和度 */
}
}实现策略
最好的方式是用 CSS 自定义属性（变量）定义所有颜色，然后通过 prefers-color-scheme 媒体查询或手动切换 class 来改变变量值。不要试图为每个元素单独写深色模式样式，那会是维护噩梦。
8. 品牌色的选择与运用
品牌色是产品视觉识别的核心。选择品牌色时，不仅要考虑审美，还要考虑技术可行性和用户心理。
色彩心理学
不同颜色会唤起不同的情感联想：
- 蓝色：信任、专业、科技（Facebook、Twitter、支付宝）
- 红色：激情、活力、紧急（YouTube、Pinterest、拼多多）
- 绿色：自然、健康、成功（Spotify、微信、支付宝）
- 紫色：创意、奢华、神秘（Twitch、抖音、Notion）
- 橙色：温暖、友好、活力（Amazon、Shopee、飞书）
- 黑色/深灰：高端、简约、专业（Apple、Nike、Notion）
这些只是普遍的联想，不是绝对规则。关键是让颜色传达你想要的品牌调性。DevToolHub 选择紫色系作为主色，正是为了传达"专业、有创造力"的开发者工具品牌形象。
品牌色的运用比例
很多新手犯的错误是品牌色用得太多。品牌色不应该是页面上最多的颜色，而应该是最关键位置的颜色——按钮、链接、图标、重点强调。品牌色的使用比例控制在 10-20% 左右，才能形成视觉焦点，让用户记住。