设计

调色板生成器

输入一个基础色，就能快速生成适用于网站、后台系统、组件库和设计系统的完整调色板。工具会输出 50 到 950 的主色阶、中性色阶，以及单色、邻近色、互补色、三角色四种配色方案。每个色块都会给出推荐的黑色或白色文本色，并显示对应的 WCAG 对比度，方便判断它更适合作为背景色，还是可以承载文字。结果可以复制为 CSS 变量或 JSON，直接接入 Tailwind、CSS-in-JS、设计 token 和多主题系统。所有处理都在浏览器本地完成，未发布的品牌色和保密设计文件不会离开你的设备。

生成完整的 50 到 950 色阶，覆盖背景、边框、按钮、链接和强调状态
支持单色、邻近色、互补色和三角色方案，方便规划主色、辅助色、强调色和对比色
基于 OKLCH 生成，更容易得到均匀的明度阶梯，适合主题色阶和暗色模式系统
每个色块都会显示推荐文本色和 WCAG 比率，用途一眼就能判断
可复制单个色块、完整 CSS 变量块，或适合组件库和设计 token 的 JSON 调色板

工具/调色板生成器

基础色与选项#6366f1

基础色

配色方案

单色邻近色互补色三角色

风格

柔和均衡鲜明深色

预设基础色

输入品牌色或已有 UI 颜色，工具会生成一套可以带回代码库的系统化调色板。

色阶使用 OKLCH 生成，明度过渡更均匀。每个色块也会根据对比度推荐黑色或白色文本。

生成的调色板点击色块复制

主色阶

配色方案

界面预览

调色板预览

用当前调色板预览按钮、链接、徽标和卡片，确认视觉层级是否自然。

新内容

文本链接

CSS 变量

:root {
  --color-primary-50: #deedff;
  --color-primary-100: #d0dfff;
  --color-primary-200: #b8c7ff;
  --color-primary-300: #9eabff;
  --color-primary-400: #7f89ff;
  --color-primary-500: #6368e6;
  --color-primary-600: #4f51c4;
  --color-primary-700: #3c3ba3;
  --color-primary-800: #2a2583;
  --color-primary-900: #1c1168;
  --color-primary-950: #0e004a;

  --color-primary: #6469e8;
  --color-secondary: #996cc9;
  --color-accent: #509ad6;
  --color-contrast: #806900;

  --color-neutral-50: #ecf6ff;
  --color-neutral-100: #dfe9f4;
  --color-neutral-200: #c8d2dd;
  --color-neutral-500: #737b85;
  --color-neutral-700: #464e57;
  --color-neutral-900: #20272f;
}

JSON

{
  "primary": {
    "50": "#deedff",
    "100": "#d0dfff",
    "200": "#b8c7ff",
    "300": "#9eabff",
    "400": "#7f89ff",
    "500": "#6368e6",
    "600": "#4f51c4",
    "700": "#3c3ba3",
    "800": "#2a2583",
    "900": "#1c1168",
    "950": "#0e004a"
  },
  "scheme": {
    "primary": "#6469e8",
    "secondary": "#996cc9",
    "accent": "#509ad6",
    "contrast": "#806900"
  },
  "neutral": {
    "50": "#ecf6ff",
    "100": "#dfe9f4",
    "200": "#c8d2dd",
    "300": "#afb9c3",
    "400": "#9099a3",
    "500": "#737b85",
    "600": "#5c646d",
    "700": "#464e57",
    "800": "#313941",
    "900": "#20272f",
    "950": "#0b1219"
  }
}

快捷操作

功能简介

一个面板就能把孤立的品牌色扩展成可落地到代码库的完整调色板。色阶、配色方案、中性色、对比度提示和导出格式都集中在一起，不需要在多个工具之间来回搬运颜色值。

01

生成主色阶

生成 50、100、200 一直到 950 的完整色阶，命名方式可以自然映射到 Tailwind、设计 token 和 CSS 变量系统。
02

四种配色方案

并排输出单色、邻近色、互补色和三角色方案，覆盖工具型 UI、自然的品牌延展、强强调场景和更丰富的视觉系统。
03

OKLCH 明度控制

使用 OKLCH 管理明度和彩度，让色阶在视觉上更均匀，也减少传统 HSL 色阶中常见的色相漂移。
04

中性色阶

同时生成适合背景、边框、弱化文本和卡片表面的中性色阶，避免调色板只剩一个孤立的主色。
05

文本对比度提示

每个色块都会推荐黑色或白色文本，并显示 WCAG 比率，方便快速判断按钮、徽标和状态色是否可读。
06

界面预览

内置按钮、链接、徽标和卡片预览，让你在接近真实 UI 的上下文里判断调色板，而不是只看孤立色块。
07

CSS 与 JSON 导出

一次性输出 CSS 变量和 JSON 调色板，可直接用于 global.css、主题文件、组件库主题和设计 token 管理。
08

预设与随机起点

常见品牌方向可以从预设快速开始；项目早期也可以用随机生成探索意料之外的组合。

如何使用

从单个品牌色到可复用调色板，再到工程可用的 CSS 变量和 JSON，几个步骤就能完成。

01

粘贴或选择一个基础色，例如品牌主色、旧产品里的色相，或从截图中取到的颜色。
02

选择配色方案：稳定的工具型 UI 适合单色，自然的品牌延展适合邻近色，强对比适合互补色，更丰富的视觉系统可以尝试三角色。
03

选择风格：柔和、均衡、鲜明或深色，用来控制整体饱和度和明度方向，让它符合产品语境。
04

查看主色阶、配色方案和界面预览，确认按钮、链接、徽标和卡片之间有足够清晰的层级。
05

点击任意色块复制单个值，或一次性复制完整 CSS 变量和 JSON，再带回项目中使用。

功能说明

输出结果不是一次性的情绪板，而是一套可以进入工程实现、设计评审和多主题维护的调色板，并且能在后续长期使用中保持稳定。

主色阶采用 50 到 950 命名，方便映射到 Tailwind、CSS 变量、组件库和设计 token
CSS 输出会把 primary、scheme 和 neutral 变量集中在一个代码块中，可直接放进 global.css、theme.css 或设计系统配置
JSON 输出保留 primary、scheme、neutral 结构，方便配置文件、token 管线和主题生成工具使用
每个色块都可以点击复制，适合开发调试、设计走查和临时 UI 试验
每个色块都会显示推荐文本色和对比度，作为按钮、徽标和状态标识的可读性参考
随机生成可以加快早期品牌探索，预设则能帮你快速进入常见品牌方向
界面预览会同时展示主按钮、次按钮、链接、徽标和卡片背景，方便尽早发现调色板问题
深色风格会同时降低明度和彩度，作为暗色模式起点，而不是简单反转浅色调色板
邻近色和三角色方案会根据配色方式调整辅助色和强调色角度，让调色板更像一个系统，而不是一堆无关颜色
所有生成过程都在浏览器本地完成，适合未发布的品牌色、内部素材和保密设计文件

适合哪些场景

生成调色板的价值，在于把一个孤立的品牌色变成可维护的系统。主题、组件状态、表面层级和品牌延展，都可以沿着同一组色阶发展。

产品主题配色

把单个品牌主色扩展成可用于按钮、链接、背景、边框和强调状态的完整色阶，让首页和内部页面使用同一套色彩语言。
组件库颜色规范

为 Button、Badge、Alert、Tabs、Input 等组件建立共享色阶和状态色，避免每个组件维护自己的局部颜色。
暗色模式准备

生成深色风格的主色阶和中性色阶，作为暗色主题起点，再继续细调背景、边框、文字和强调色。
设计 token 落地

将调色板导出为 CSS 变量和 JSON，同步到前端主题、文档站、设计系统库和多平台主题管线。
品牌色延展

把一个品牌色扩展成可用的浅表面、主色、深强调和可读文本组合，让它在不同信息密度的界面中都能保留品牌感。
数据可视化辅助色

用邻近色、互补色或三角色方案作为图表分类色起点，再通过对比度检查器确认图例和标签的可读性。
落地页和营销活动

快速生成一组协调的首屏、CTA、徽标和卡片颜色，让短期活动页也有稳定的视觉基线。
后台系统主题

让侧边栏、表格状态、筛选器、仪表盘卡片和通知保持同一套调色板基线，避免各个模块各自漂移。
多品牌和白标产品

为不同品牌或客户准备独立调色板，再写入同一套 token 模板，让主题切换更可预测，也更容易维护。
插画和图标配色

为插画、图标集和品牌资产提供匹配的色阶，让扁平化视觉也能和界面保持同一种语言。

颜色术语说明

这些术语会影响调色板在产品 UI、品牌视觉和多主题系统中的使用方式。团队先统一定义，就不必反复争论品牌色到底应该落在哪个色阶上。

主色

品牌或产品中最核心的颜色，通常用于主按钮、链接、选中状态和关键强调。设计良好的调色板里，真正的主色通常只有一个。
色阶

在保持相近色相的同时，按不同明度排列的一组颜色。前端系统常用 50 到 950 表示从浅背景到深强调色的范围。
单色

围绕同一个色相调整明度和彩度。它稳定、克制，适合工具型界面和信息密度较高的页面。
邻近色

选择色相环上相邻的颜色，容易得到自然、协调的调色板，适合大多数产品 UI 和品牌延展。
互补色

使用色相环上相对的颜色，可以制造更强的对比，适合主行动、警告和需要突出的营销视觉。
三角色

选择大约相隔 120 度的三种颜色。它可以形成更丰富的视觉系统，但需要控制饱和度和使用面积，才能保持整体协调。
OKLCH

一种比 HSL 更接近人眼感知的色彩空间，适合生成更均匀的色阶，也适合构建更可访问的暗色模式调色板。
设计 token

把颜色保存为命名变量或结构化数据，让它们可以在设计文件、CSS、组件库和多主题系统中复用，而不是以字面颜色值散落在各处。

使用建议

长期可用的调色板，需要在品牌识别、信息层级、可读性和工程可维护性之间取得平衡。把这些做法沉淀进设计系统，可以让调色板在不同主题和产品线中保持稳定。

先定义基础色的角色：品牌识别、主行动、链接色、图表色，还是状态提示。不同角色需要不同强度的色阶
不要把 500 色阶用在所有地方。浅背景、边框、hover 状态和深强调都应该使用各自合适的色阶，调色板才会有区分度
正文和辅助文本不要只凭肉眼判断，尤其是按钮和徽标上，要配合对比度检查确认可读性
暗色模式不是浅色调色板的简单反转。背景、边框、文本和强调色都要分别检查，并考虑提供专门的暗色 token 集
最终调色板应提升为 token，避免同一个颜色以多个相近字面值散落在文件中
当品牌色太亮或太暗时，优先调整明度和彩度，而不是直接换色相，这样更容易保留品牌识别
图表颜色和 UI 行动色建议分开管理，避免一个品牌色同时承担数据、状态和操作含义，造成语义混乱
上线前，请在真实页面中检查按钮、链接、表单状态、警告和禁用状态，不要只依赖孤立预览

边界与注意事项

自动生成可以加快起步，但不能替代完整的品牌评审、设计走查或无障碍测试。了解边界，才能把这个工具放在真正有价值的位置。

生成的色阶来自算法基线，是否真正符合品牌，仍需要设计和品牌团队判断
推荐的黑色或白色文本是根据单个色块计算的。复杂背景、图片、渐变和多层表面仍需要专门做对比度检查
OKLCH 在现代浏览器和设计系统中越来越常见，但部分旧工具链可能仍需要先转换为 HEX 或 RGB
三角色和互补色容易产生强烈视觉冲突，应用时需要控制使用面积、饱和度和上下文
工具只生成调色板和变量，不会自动修改 Tailwind 配置、CSS 文件或设计文件
对无障碍敏感的界面，请逐一用对比度检查器验证前景色和背景色组合。工具内的推荐只是提示，不是最终结论
干净的调色板不等于强视觉层级。关键页面上线前仍需要设计和产品评审

常见问题

这些是团队在用调色板生成器搭建产品主题、组件系统和多主题设计时最常见的问题。