什么是配色方案生成器？

配色方案生成器基于色彩理论创建和谐的颜色组合。选择一个基色和配色规则，即可为设计、开发或艺术项目生成配色方案。

三种起点任你选：用拾色器选取基础色或粘贴十六进制代码、拖入一张照片提取其主色调，或者输入像 ocean、sunset 这样的氛围词。然后选择一种配色规则，工具会依据色轮上的色彩理论比例生成其余颜色。锁定想保留的色块、随机刷新其余颜色，点击你喜欢的颜色就能让整套配色围绕它重新生成，还能在色盲滤镜下预览效果。最后可将五个颜色导出为 CSS 自定义属性块、Tailwind 配置或 JSON 文件供设计系统使用，也能把色卡存成 PNG 或 SVG 图片，方便放进需求文档或发到社交平台。

使用方法

1. 从基础色开始，拖入照片提取颜色，或输入像 ocean、sunset 这样的氛围词
2. 选择配色规则：互补色、类似色、三色、分裂互补色、四色组或单色
3. 把任意色块复制成 HEX、RGB 或 HSL，再在对比度网格里挑出可读的搭配，最后把整套配色导出成 CSS、Tailwind 配置、JSON，或 PNG / SVG 色卡图片

何时使用

• 客户已经定了一个品牌主色,基于它扩出完整配色方案。
• 为图表或仪表盘挑选清晰可辨的辅助色。
• 做 PPT 或社交图前,快速试几种配色感觉。

结果

基色 #3498DB 的三色配色生成：#3498DB、#976CD6、#DB3498。

常见问题

互补色、类似色、三色组到底有什么区别?

互补色把基色和它在色环上 180° 的对位放一起,对比最强。类似色把所有颜色控制在色环 30° 范围内,整体很柔和。三色组让三个颜色各间隔 120°,既鲜明又均衡。

能保留某个颜色,只重新生成其他几个吗?

可以。点想保留的色块上的「锁」按钮,然后切换和谐方式或基色,或按「洗牌」,锁定的色块不会变,其余几个会重新围绕它生成。

该选哪种导出格式?

CSS 给你 --color-1 这样的自定义属性;Tailwind 选项会生成可直接放进配置的 theme.extend.colors 块;JSON 是结构化对象,适合 Design Token 工具或脚本。如果想把配色当作图片分享——放进需求文档、幻灯片或社交帖子——选 PNG 得到位图,选 SVG 得到清晰的矢量色卡。

这些配色能直接通过 WCAG 对比度要求吗?

内置的对比度网格会按 WCAG 2.x 的门槛逐对打分——AAA 是 7:1，AA 是 4.5:1，AA Large 是 3:1——不达标的组合直接用玫红色标出。要把颜色放到正文或按钮上之前先从这张网格里挑搭配，因为和谐规则是从视觉平衡来算的，并不保证对比度。

我的颜色数据会上传吗?

哪儿都不去。所有色彩计算都在页面内完成，你拖入的任何照片都在你的设备上读取以提取颜色，绝不会上传到任何地方。你的基础色、配色和导出文件都留在本地，未发布的品牌配色就像你自己的剪贴板一样私密。

相关工具