颜色调色板生成器

和声方案

• 互补色：色轮上的底色与对色（180°）。对比度高，色彩鲜艳。非常适合用于品牌色背景下的行动号召按钮。
• 类似色系：3至5种色相彼此相差不超过30°，色调平和协调，通常为暖色或冷色组合，适合用于具有统一主题的背景或插图。
• 三色配色法：三种色相等距排列（120°），色彩鲜明且平衡协调，常见于儿童产品及强势品牌设计。
• 分裂互补色：基础色加上位于其互补色两侧（150°和210°）的两种色调。比互补色更丰富，视觉效果更柔和。
• 四色方阵/方形组合：四种色调以90°角排列。平衡难度较高——需选定一种作为主导色。
• 单色系：单一色调，饱和度与明度各异；整体风格优雅协调；除非搭配中性色，否则缺乏视觉亮点。

适用于实际工作的调色板结构

设计系统通常需要：

• 主要品牌（基础品牌）
• 二级品牌（支持品牌）
• 重点标注（CTA，高亮显示）
• 中性色阶（背景、文字、边框——5至10种灰色）
• 语义（成功、警告、错误、信息）
• 表面（面板背景、叠加层）

色彩协调色板可提供基础色、辅助色及强调色；中性色与语义色通常遵循不同规范（如去饱和近灰色调、标准化语义色系）。

导出格式

CSS自定义属性：

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

顺风配置：

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS：

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

对比度与可访问性

和谐配色方案并不能确保无障碍访问。请根据 WCAG 对比度要求检查色板搭配：

正文与背景的比例：最小值为 4.5:1（AA 标准）。

• 大字体：3:1。
• 非文本元素（按钮、图标、焦点环）：比例为 3:1。

将发生器与对比度检测仪配合使用，以识别符合要求的组合。

小贴士

• 从明确的基色开始，而非随意选择——当基色具有特定含义（如您的品牌、您喜欢的照片或文化元素）时，色彩搭配会显得更有意义。
• 在实际使用场景中测试色板效果：应用于按钮、文本或图表中。色样显示效果良好并不保证在用户界面中表现一致。
• 对于用于大面积显示的色板，建议略微降低饱和度——完全饱和的背景会令人视觉疲劳。
• 尽量减少使用强调色：若用户界面中80%的元素为主要或次要元素，则仅在10%的交互点（CTA）处使用强调色，以实现最佳视觉效果。