免费颜色工具
配色方案生成器 - 从 HEX 生成色板和 CSS 变量
输入 HEX 颜色，生成明暗变化、互补色、色板和 CSS 变量，适合品牌配色、UI 原型、设计系统和网页样式整理。
工具加载中...
快速答案
配色方案生成器可以从一个 HEX 颜色生成色板和 CSS 变量。
它适合准备品牌色、按钮状态、背景层级、设计系统和前端样式。
适合输入
清晰输入
准备好要处理的基础 HEX 颜色，避免混入不相关内容。
确认目标
先确定要复制、换算、统计或生成的结果类型，减少来回调整。
本地复核
结果适合快速处理和初步判断，重要场景仍应按业务规则复核。
生成方式
工具会基于输入颜色计算 tints、shades、互补色和可复制变量。
明暗变化适合状态和背景。
互补色可用于强调。
变量方便放入 CSS。
示例、假设和限制
工具结果适合快速估算、转换和整理；关键场景建议按业务规则复核。
示例
输入 #10b981，生成一组可复制的绿色色板和变量名。
假设
用户已有一个主色，希望快速扩展成可用色板。
限制
自动色板不能替代完整品牌设计，应结合对比度和实际视觉场景检查。
常见使用场景
这些中文页面面向轻量、快速、浏览器本地完成的日常任务。
品牌配色
从主色扩展色阶。
UI 原型
快速生成状态色。
CSS 变量
复制到样式表。
设计系统
整理初版 token。
常见问题
可以复制 CSS 变量吗？
可以按页面输出复制。
自动配色一定好看吗？
不一定，需要结合品牌和界面场景调整。
需要上传数据吗？
不需要。生成在浏览器中完成。
怎么检查可读性？
可以继续使用对比度检查工具。
推荐流程
颜色系统流程
先生成色板，再检查对比度和渐变。