调色板生成器 — 和谐配色方案与 CSS 变量导出
Developer Tools
加载中...
关于此工具
在浏览器中即时生成和谐平衡的调色板。支持类似色、互补色、三元色、分裂互补色、单色调与随机6大色彩理论模型，一键导出 CSS 变量。
使用方法
- 选择配色模型：从下拉菜单中选择随机、类似色、互补色、三元色、分裂互补色或单色调。
- 选定基础颜色：使用颜色选择器挑选品牌主色或任意起始色调。
- 设置颜色数量：选择生成 3、5、7 或 9 种和谐色彩。
- 点击生成：即时基于色轮角度与 HSL 色彩空间完成数学计算并预览。
- 复制与导出：点击任意色条复制十六进制代码，或使用“全部复制”与“导出CSS”获取 :root 变量。
常见问题
工具有哪些配色理论模型？
提供基于经典色彩理论的6种方法：类似色、互补色、三元色、分裂互补色、单色调以及受控随机分布。
如何将调色板应用到项目中？
点击“导出CSS”即可复制标准 :root 变量代码块，直接粘贴到全局样式表中使用 var(--color-1) 即可。
可以使用我已有的品牌主色吗？
完全可以，基准颜色选择器支持输入任意 Hex 代码，所有和谐算法都将以此为核心展开计算。
数据是否安全私密？
绝对安全。所有计算完全在本地浏览器内存中运行，绝不向任何外部服务器发送任何数据。