Tool / UI & 样式

配色方案生成器

由基色生成六种和声配色与 11 级色阶，预览明暗主题，附 WCAG 对比度校验与多格式导出

基色与和声

基色
和声规则
色数4
起点

色相相邻，柔和统一，适合大面积背景「换一组」只换基色，锁定的色块会保留。

色板（点击色块复制色值 · 锁定的不参与重算）

AAA 12.9:1
AAA 11.4:1
AA 4.9:1
AA 6.0:1

真实界面预览

产品控制台 登录

标题文字用中性色阶

色卡好看不代表界面好看：把配色套进导航、按钮、卡片里，才能看出层次和对比够不够。

主要按钮 次要按钮 强调标签
卡片标题卡片正文与描述文字

角色映射：背景 neutral-50 · 文字 neutral-900 · 主色 primary-600 · 强调 色板第 2 色。主色阶与中性色阶都是按感知亮度排的，所以明暗主题能直接互换。

主色阶（点击单档复制）

中性色阶（同色相低彩度，用于背景与边框）

色阶在 OKLCH 感知亮度下按固定亮阶生成：同一档在不同色相上看起来一样深，拼成设计系统才不会深浅跳。

导出

:root {
  --color-1: #3bf6af;
  --color-2: #3be0f6;
  --color-3: #3b82f6;
  --color-4: #513bf6;

  /* 主色阶 */
  --color-primary-50: #f0f6ff;
  --color-primary-100: #deebff;
  --color-primary-200: #c3dbff;
  --color-primary-300: #9bc2ff;
  --color-primary-400: #639eff;
  --color-primary-500: #3f86fb;
  --color-primary-600: #2f74e4;
  --color-primary-700: #1e5fc5;
  --color-primary-800: #144ea9;
  --color-primary-900: #0e4191;
  --color-primary-950: #02255e;

  /* 中性色阶 */
  --color-neutral-50: #f4f5f8;
  --color-neutral-100: #e7eaee;
  --color-neutral-200: #d5d9e0;
  --color-neutral-300: #bbc1c9;
  --color-neutral-400: #9aa0a9;
  --color-neutral-500: #868c95;
  --color-neutral-600: #747a82;
  --color-neutral-700: #60656d;
  --color-neutral-800: #50545b;
  --color-neutral-900: #43474d;
  --color-neutral-950: #27292e;
}
关于「配色方案生成器」的说明与常见问题

由基色生成六种和声配色与 11 级色阶，预览明暗主题，附 WCAG 对比度校验与多格式导出

「配色方案生成器」（TOOLS / 106）是本站在线工具库中的一个工具，免费使用，无需登录或安装。 它全程在你的浏览器本地运行：输入内容只留在当前页面内处理，不会上传到服务器，关闭页面即消失， 也方便在公用电脑上使用。你可以直接在页面上粘贴或上传数据，即时得到结果，并按页面提示把结果导出保存到本地。

配色方案生成器免费吗？需要登录或安装吗？

免费在线使用，无需安装任何软件；工具页无需登录，打开即可用。

使用配色方案生成器时数据会上传吗？

本页数据只在你的浏览器本地处理，不会上传到服务器；多数结果支持直接导出到本地文件。

配色方案生成器适合哪些场景？

由基色生成六种和声配色与 11 级色阶，预览明暗主题，附 WCAG 对比度校验与多格式导出。全部在浏览器内完成，用完即走，也方便在共享电脑上放心使用。

结果如何保存？

页面上提供导出 / 下载按钮，按提示即可将结果保存到本地设备。