可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见调色板基色
Tint 80
#CFF1E6
Tint 60
#9FE3CD
Tint 35
#64D2AD
Base
#10B981
Shade 25
#0C8B61
Shade 45
#096647
Complement
#EF467E
Soft complement
#F699B8
--color-1: #CFF1E6;
--color-2: #9FE3CD;
--color-3: #64D2AD;
--color-4: #10B981;
--color-5: #0C8B61;
--color-6: #096647;
--color-7: #EF467E;
--color-8: #F699B8;生成的调色板是起点。用于生产 UI 前，请检查对比度、品牌约束、深色模式和禁用状态。
配色方案生成器可以从一个 HEX 颜色生成色板和 CSS 变量。
它适合准备品牌色、按钮状态、背景层级、设计系统和前端样式。
清晰输入
准备好要处理的基础 HEX 颜色，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
输入 #10b981，生成一组可复制的绿色色板和变量名。
假设
用户已有一个主色，希望快速扩展成可用色板。
限制
自动色板不能替代完整品牌设计，应结合对比度和实际视觉场景检查。
先选一个主色角色
主色、强调色、背景色和状态色承担的任务不同，不要把生成结果全部当作可点击颜色。
检查浅色背景上的文字
浅色变体适合背景，但放正文文字可能太淡，需要和对比度工具一起检查。
保留命名规则
导出到 CSS 变量或设计系统时，建议按 primary、surface、border、muted 等角色命名。
适合快速起草主题色
做工具页、Blog 配图或小组件原型时，可以先生成一组可讨论的颜色角色。
要和真实 UI 元素一起看
色板本身漂亮不代表放进按钮、表格、图表和提示框后也合适。
生成后继续做对比度检查
尤其是浅色背景、muted 文本和边框色，最好用对比度工具逐一复核。
品牌配色
从主色扩展色阶。
UI 原型
快速生成状态色。
CSS 变量
复制到样式表。
设计系统
整理初版 token。
可以复制 CSS 变量吗？
可以按页面输出复制。
自动配色一定好看吗？
不一定，需要结合品牌和界面场景调整。
需要上传数据吗？
不需要。生成在浏览器中完成。
怎么检查可读性？
可以继续使用对比度检查工具。
生成的调色板可以直接用于品牌吗？
可以作为起点，但正式品牌色还要结合识别度、可读性、状态色、深浅主题和设计规范确认。
为什么生成的浅色不适合做文字？
浅色通常更适合背景或边框，放在白底上做文字时对比度可能不足。
可以复制 CSS 变量吗？
可以按页面输出复制。
自动配色一定好看吗？
不一定，需要结合品牌和界面场景调整。
需要上传数据吗？
不需要。生成在浏览器中完成。
怎么检查可读性？
可以继续使用对比度检查工具。
生成的调色板可以直接用于品牌吗？
可以作为起点，但正式品牌色还要结合识别度、可读性、状态色、深浅主题和设计规范确认。
为什么生成的浅色不适合做文字？
浅色通常更适合背景或边框，放在白底上做文字时对比度可能不足。
推荐流程
颜色系统流程
先生成色板，再检查对比度和渐变。