Color Palette Generator
使用方法
- 1
选择配色方案
选择相似色、互补色等配色规则，定义颜色之间的关系。
- 2
选择风格
通过风格选择器设置氛围，从柔和、鲜艳或暗色中选择最适合品牌的风格。
- 3
生成
点击生成按钮创建独特调色板。锁定喜欢的颜色，重新生成其余颜色。
- 4
导出
复制单个Hex色码，或点击导出获取完整的Tailwind CSS配置。
色彩理论指南
理解配色和谐
- 相似色
色轮上相邻的颜色。营造宁静舒适的设计，适合自然或平静的主题。
- 互补色
色轮上相对的颜色。产生高对比和强烈视觉冲击，适合行动号召。
- 三色配色
色轮上均匀分布的三种颜色。保持和谐的同时提供高对比度。
- 分裂互补
互补配色的变体。使用基础色及其互补色两侧的颜色。
- 单色
单一颜色的明度和饱和度变化。简洁优雅、舒缓平静。
- 随机混搭
完全随机的颜色，无固定规则。适合激发意想不到的灵感。
探索风格情调
- 标准
平衡的饱和度和亮度。适合通用网页设计和UI组件。
- 柔和梦幻
高亮度低饱和度。柔和舒缓，适合生活方式或春季主题。
- 霓虹鲜艳
高饱和度中等亮度。充满活力、引人注目，适合科技或运动品牌。
- 暗色模式
低亮度去饱和色调。深邃神秘，现代感十足，减少OLED屏幕耗电。
- 复古怀旧
低饱和度略带暖色调。怀旧经典，适合手工艺或咖啡店品牌。
推荐工具
精心挑选的实用工具
选择和谐的颜色
概述
色彩理论积累了几个世纪,但网页设计师只需几分钟就需要「能用」的调色板。基于补色、类似、三色、四色等已建立的配色规则,此工具从一个基础色数学生成和谐调色板。支持无障碍(WCAG对比度)、深浅变体、导出(CSS变量、Tailwind config、Figma)。
工作原理
选择基础色(可输入HEX、RGB、HSL),选配色方案。工具在HSL空间计算生成调色板。每个颜色显示WCAG对比度,提示对正文、标题、强调的适用性。
什么时候用
新品牌/Logo设计。网站主题色选择。演示/海报/社交图配色。设计系统初期。营销人员寻找「适配品牌」色。
常见问题
实用上3-5色是标准。主色、辅色、强调、背景、前景。再多就难以区分使用。