配色方案生成器
根据色彩和谐规则或照片生成配色方案。查看色阶、对比度和渐变，并导出为CSS、SCSS、Tailwind、JSON、Swift、Android或Figma格式。
免费 在浏览器中运行 无需注册
正在加载配色方案生成器…
您的文件绝不离开您的设备
如何使用配色方案生成器
- 1
在此页面打开配色方案生成器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
这款配色方案生成器可为网站、应用、品牌和插画生成和谐的配色。从一个基础色和一条和谐规则开始，或上传照片提取其主要颜色。每种颜色都附带色阶、HEX、RGB和HSL值以及对比度检查，整套配色可直接导出到代码或设计工具中。
如何创建配色
- 选择一个基础色，或上传图片从中提取配色。
- 选择一条和谐规则（见下文），或从预设开始。
- 调整颜色，点击任意颜色或色阶即可复制其色值。
- 将颜色用于文字之前，先查看WCAG对比度结果。
- 按需要的格式导出配色。
色彩和谐规则
- 互补色：色环上相对的两种颜色，对比强烈。
- 邻近色：色环上相邻的颜色，平静自然。
- 三角色：等距分布的三种颜色，活泼而平衡。
- 四角色和双分裂互补：四种颜色组成丰富配色，让其中一种占主导。
- 分裂互补：基础色加上其互补色两侧的颜色，比互补色更柔和。
- 单色：同一色相的深浅变化，优雅稳妥。
- 自定义：每种颜色自己挑选。
导出格式
可将配色复制或下载为CSS自定义属性、SCSS变量、Tailwind颜色配置、JSON、Swift（iOS）、Android XML颜色，或可直接用于Figma的列表。渐变生成功能可用你的颜色制作线性、径向或锥形渐变并复制CSS。
配色实用建议
- 遵循60/30/10法则：主色占大部分空间，辅助色次之，强调色用于按钮和重点元素。
- 检查文字对比度。WCAG AA要求普通文字对比度至少4.5:1，AAA要求7:1。
- 加入中性色。大多数界面除品牌色外还需要一组灰阶。
- 如果产品有深色模式，请在深色模式下测试，高饱和度颜色在深色背景上可能显得刺眼。
常见问题
可以从图片中提取配色吗？
可以。上传一张照片，工具会把其中的主要颜色提取成可编辑、可导出的配色。
什么是色彩和谐？
根据颜色在色环上的位置挑选搭配好看的颜色的规则，例如互补色、邻近色或三角色。
可以把配色导出到Tailwind CSS吗？
可以。选择Tailwind导出即可获得颜色配置，粘贴到你的Tailwind项目中。也支持CSS、SCSS、JSON、Swift、Android和Figma格式。
怎么知道文字在某个颜色上是否清晰可读？
配色会显示WCAG对比度检查。普通文字至少达到4.5:1（AA），更严格的AAA级别需要7:1。
如何复制色值？
点击任意颜色或色阶即可复制其色值。每种颜色都会显示HEX、RGB和HSL值。
可以用我的配色制作渐变吗？
可以。渐变生成功能可用你的颜色制作线性、径向或锥形渐变并复制CSS。