为什么这些颜色搭在一起好看

🎨 1 · 60-30-10 配色法则

这是室内设计沿用多年、如今在 UI 中同样好用的最实用配色法则。 它给页面三种颜色分配明确的比例,让画面既不单调、也不杂乱:

• 60% 主色:页面占比最大的颜色,通常是背景色 / 大面积底色,奠定整体氛围。
• 30% 辅色:次要颜色,用于卡片、次要区块、辅色块,与主色形成层次。
• 10% 强调色:最醒目的点睛色,用于按钮、链接、关键数据。面积小但吸睛。

视觉示例:三个色块按 60 / 30 / 10 排列

注意右侧那条窄窄的金色——它只占 10%,却第一个抓住你的眼睛。这就是"强调色"的力量:

↑ 强调色面积虽小,却是视线最先落下的地方。一旦把它也铺成大色块,就不再"强调"了。

套用到真实页面

同样三色,放进一个真实页面长这样:米白做底、白色做卡、金色只留给那个"立即预约"按钮。

在 CSS 变量里如何体现

把三个比例直接映射成三个令牌,组件层只引用、不写死:

:root {
  /* 60% 主色 —— 页面大面积底色 */
  --color-bg: #FAF8F2;

  /* 30% 辅色 —— 卡片、次要区块 */
  --color-card: #FFFFFF;
  --color-primary: #4A6B47;      /* 辅色也常由主品牌色承担 */

  /* 10% 强调色 —— 按钮、链接、关键数据 */
  --color-secondary: #C9A961;    /* 暖金,只用在点睛处 */
}

🌀 2 · 色彩关系(互补 / 类比 / 三角)

想知道两个颜色为什么搭一起好看,答案在色轮上。 色相之间的角度关系,决定了搭配是"和谐"还是"冲突"。先看一个色轮:

四种常用色彩关系

在色轮上标出它们

🌓 3 · 明度与对比

一个常被忽略的真相:配色好看不好看,明度(深浅)比色相更重要。 两个色相不同但明度相近的颜色挨在一起,会"糊成一片";而明度拉开,即便色相一样也能层次分明。

文字与背景的对比度底线

正文要读得清,文字与背景的明度差必须够。WCAG 给了硬指标:

• 正常文字:对比度 ≥ 4.5 : 1(WCAG AA)
• 大文字(≥ 18px 或 14px 粗体):对比度 ≥ 3 : 1
• 追求更佳可读性可冲 AAA(7 : 1)

正反例对照

灰阶层次:至少 4–5 级

一个成熟配色的"灰"从来不是一种,而是一串从浅到深的灰阶层次, 分别承担背景、卡片、描边、正文、标题:

↑ 这就是 healing-pastoral 皮肤里 --color-bg / --color-card / --color-border / --color-text-muted / --color-text-secondary / --color-text 的来历——一组有梯度的灰。

🎭 4 · 情绪与配色

颜色自带情绪。给科技产品配上一片橙红、给儿童产品配上冷峻深蓝,都会让用户"出戏"。 下表是常见色相的情绪映射与适配场景,配色前先对一下这张表:

🗂️ 5 · 实用调色板库

下面是几套现成、好用、可直接抄的调色板,每套都遵循 60-30-10(底 / 主 / 强调), 并标注了适用场景。参考本站已有的 34 个风格的主色归纳而来:

⚠️ 6 · 常见配色错误

新手配色翻车,几乎都栽在这几个坑里。给新场景配色时,逐条避开: