什么是配色方案生成器？
配色方案创建器利用色彩理论规则，从单一基础色生成完整的色彩搭配方案。可选择单色、互补色、分裂互补、双分裂互补、三角色、四角色或类似色方案，并对每个色样进行微调。复制分享链接、导出为CSS变量或Tailwind配置，或复制十六进制代码。
选定一个基础 hex,生成器会按色轮做标准旋转:互补色相差 180 度,分裂互补在 150 度与 210 度两侧各取一色,三色相隔 120 度,四色相差 90 度,类似色则在左右两侧各走一小步。阴影与高光保留同一色相,只在 HSL 空间里以固定步长调整亮度,因此每种颜色都会得到一组干净的五级渐变。每个色块可以按 HEX、rgb()、hsl() 或 oklch() 复制;对比度面板会对照白色和黑色给出 WCAG AA、AAA 的判定;一键视觉预览还能把整套配色重新渲染为红色盲、绿色盲或蓝色盲版本。复制分享链接即可收藏配色,或无需账号直接发给同事。
使用方法
- 使用取色器选择基础色，或输入十六进制代码。
- 选择方案类型（单色、互补色、分裂互补、双分裂互补、三角色、类似色、四角色）以生成配色方案。
- 复制单个十六进制代码，将完整配色方案导出为CSS变量，或下载为色样图片。
何时使用
- 把一个品牌主色扩展为完整调色板,用于新网站或 App 主题。
- 印刷周边产品前,验证 logo 颜色是否能找到干净的互补色。
- 不打开 Figma 或设计工具,直接生成 CSS 自定义变量。
结果
一位网页开发者选择品牌主蓝色（#3B82F6），生成三角配色方案，得到互补的橙色和绿色调，然后将配色方案导出为CSS自定义属性，用于其设计系统。
常见问题
- 三色组和四色组有什么区别?
- 三色组是色轮上间隔 120 度的三种颜色,组合平衡。四色组用四种颜色构成矩形(两对互补色),变化更丰富,但平衡更难掌握。
- 什么时候用阴影,什么时候用高光?
- 阴影(更暗的版本)适合用在浅色界面的文字、边框、hover 状态;高光(更亮的版本)适合背景、禁用状态和细微的高亮。大多数设计系统两套梯度都需要。
- 生成器会考虑无障碍对比度吗?
- 支持——配色下方的对比度面板会显示每种颜色对白色和黑色的 WCAG 对比度,并标注 AA、AAA 是否达标。正常文字通常以 4.5:1 为基准;再把视觉预览切换为红色盲、绿色盲或蓝色盲,就能看到色觉障碍用户眼中的配色。
- 为什么类似色看上去比互补色更柔和?
- 类似色在色轮上挨着,属于同一色系,视觉冲突小;互补色处于色轮对侧,对比最强,感觉更有活力,但在大面积使用时会比较刺眼。
- 可以导出 Tailwind 配置吗?还是只支持 CSS 变量?
- 两种都支持。CSS 变量可以直接粘进样式表的 :root 里。Tailwind 格式会把 hex 值包在 theme.extend.colors 对象中,贴到 tailwind.config.js 即可使用。