配色方案生成器

从主色生成互补、三角、类似色板，输出 HEX 与 CSS 变量。

免费免登录
选项
配色方案

  • #646C3D

    hsl(70, 28%, 33%)

  • #4C6C3D

    hsl(100, 28%, 33%)

  • #3D6C44

    hsl(130, 28%, 33%)

  • #3D6C5C

    hsl(160, 28%, 33%)

  • #3D646C

    hsl(190, 28%, 33%)

CSS 变量
:root {
  --brand-1: #646C3D;
  --brand-2: #4C6C3D;
  --brand-3: #3D6C44;
  --brand-4: #3D6C5C;
  --brand-5: #3D646C;
}

从主色生成互补、三角、类似色板，输出 HEX 与 CSS 变量。

定品牌色最怕「一个主色撑不起整套界面」。这个工具按色彩理论从主色推导整套配色：类似色、单色渐变、互补色、分裂互补、三角配色、四角配色，输出 HEX 与 HSL，并生成可直接粘贴的 CSS 变量。

怎么用

  1. 1选主色（取色器或直接输入 HEX）。
  2. 2切换配色方案，看同一主色在不同理论下的推导结果。
  3. 3复制整套色值或 CSS 变量，粘进设计稿或代码。

常见问题

相关工具