世界上最舒服的双色搭配：给独立开发者的配色速查表

为什么选择双色优先

• 减少选择成本：两种色就能建立稳定的品牌识别；越少越统一。
• 实现速度快：按钮、链接、卡片边框与背景，规则更简单。
• 可读性更好：更容易满足 WCAG 对比度 AA/AAA。

原则：Logo 与产品早期以稳为先，先能上，再变好看。

视觉示例（可直接抄用）

使用建议

主色用于点击和强调，辅色用于分层（背景、边框、弱标签）。

对比度与可访问性（WCAG 速记）

• 正文对比度：文本/背景对比度 ≥ 4.5:1（AA），大字 ≥ 3:1。
• 按钮/链接：常态与悬停态需有明显状态差（亮度/边框/阴影/下划线）。
• 深色模式：主色在深底上适当提亮 10%–20%，或添加白描边提高可读性。

组件落地规范（可直接抄）

• 按钮：主按钮用主色底白字；hover 亮度 +8%；active 阴影减弱。次按钮用 1px 主色边框；hover 加 8% 主色透明底。
• 链接：文字主色；hover 下划线或提亮；focus 外发光 2px（outline）。
• 卡片：浅辅色做底（#F3F4F6），更深一阶做边（#E5E7EB），标题用近黑（#0B0F19）。

Tailwind 对照（便于前端落地）

• 蓝：bg-blue-600 / text-blue-600 / hover:bg-blue-500
• 紫：bg-violet-600 / text-violet-600 / hover:bg-violet-500
• 青：bg-cyan-600 / text-cyan-600 / hover:bg-cyan-500
• 橙：bg-amber-500 / text-amber-500 / hover:bg-amber-400
• 绿：bg-emerald-600 / text-emerald-600 / hover:bg-emerald-500
• 洋红：bg-rose-600 / text-rose-600 / hover:bg-rose-500
• 中性灰阶：neutral-50 → neutral-900

常见误区

• 彩虹综合征：同一页面使用 3 色以上主色，像模板站；请克制。
• 对比度不足：浅灰文字配浅灰背景；优先提升文字深度。
• 饱和度过高：长时间阅读会疲劳；降低饱和度、提升明度更耐看。

快速上手清单

• 只选 2 色：主色 + 辅色
• 建 1 套按钮 + 链接状态
• 设 1 套浅色背景与描边灰阶
• 检查对比度（AA/AAA）
• 深色模式先做 Logo 的浅色版

目标不是更花，而是稳、快、可上线。用最少的颜色，做可复用的系统，这就是独立开发者的效率。