调色板生成器
生成漂亮的5色和谐调色板，锁定颜色并导出CSS变量。
随机调色板生成器：即刻创建精美的 5 色配色方案
无论你是在开发现代 Web 应用、为初创公司打造品牌、制作社交媒体图片，还是设计游戏 UI 素材，一套平衡和谐的调色板都至关重要。我们的随机调色板生成器基于数学色彩理论模型（包括互补色、三色组、类似色、单色和赛博朋克霓虹等和谐模式），生成美观的 5 色配色方案。
借助Spacebar等简单的键盘快捷方式，你每分钟可以尝试数百种全新配色组合，锁定喜欢的色卡，微调明度与饱和度，并直接将调色板导出为整洁的 CSS 变量、HEX、RGB 以及 Tailwind 设计令牌。
空格键重掷与锁定
按下空格键即可生成新调色板。点击任意色卡的锁形图标将其固定，同时围绕它滚动生成协调的配色。
数学生成和谐色
在 360° HSL 色轮上校准的类似色、三色组、互补色、分裂互补色、粉彩与霓虹等多种调色板之间自由切换。
一键导出 CSS 与 Tailwind
一键即可将整套调色板复制为根级 CSS 自定义属性、Tailwind 主题扩展、HEX 数组或 JSON 定义。
对比度与无障碍
视觉明度平衡确保前景文字具有高对比度，并为按钮和网页标题提供符合 WCAG AA 标准的颜色搭配。
🌈理解网页与平面设计中的配色和谐模式
| 配色规则 | 色轮公式 | 视觉情绪 | 最适用场景 |
|---|---|---|---|
| 类似色 | 相邻色相 (±30°) | 平静、统一、安宁 | 自然品牌、健康类应用、渐变 |
| 互补色 | 对立色相 (180°) | 高对比、鲜活、抢眼 | 行动号召按钮、体育品牌、徽章 |
| 三色组 | 等边三角形 (120°) | 动感、活泼、平衡 | 游戏网站、SaaS 落地页、信息图 |
| 单色 | 单一色相，变化明度/纯度 | 极简、精致、专业 | 开发者工具、金融门户、简洁 UI 主题 |
| 赛博朋克 / 霓虹 | 高饱和 + 暗色锚点 | 未来感、电子感、前卫 | 电竞、加密项目、暗黑模式仪表盘 |
🚀四步打造专业设计调色板
根据你需要高对比还是含蓄的极简风格，选择所需的配色方案预设（如三色组、类似色或随机）。
即时生成全新组合。每次重掷都会重新计算 5 个色位之间和谐的明度与饱和度比例。
点击你喜欢的主品牌色的锁形图标。继续按空格键即可围绕它生成相配的强调色和背景色。
点击任意色卡复制其 HEX 代码，或使用“导出 CSS”将完整的样式表变量直接复制到 Figma 或代码编辑器中。
❓常见问题
配色和谐生成器是如何计算互补色的？▾
生成器会将标准 RGB 颜色值转换为圆柱形 HSL（色相、饱和度、明度）颜色空间。基于经典色彩理论公式，它在 360° 色轮上均匀分布色相角度（例如互补色为 180°、三色组为 120°），同时动态平衡明度百分比，以避免浑浊难读的颜色组合。
在生成新颜色的同时可以锁定特定颜色吗？▾
可以！点击任意色卡上的锁形图标即可。被锁定的颜色保持不变，而按空格键或点击生成按钮只会随机更换其余未锁定的色位，从而找到最佳的互补色调。
如何把调色板导出为 CSS 或 Tailwind？▾
点击"导出 CSS"按钮，即可将整洁的 CSS 变量（:root { --color-1: #hex; ... }）复制到剪贴板。你可以直接粘贴到项目的样式表或全局 CSS 中，也可以在 tailwind.config.js 的主题颜色扩展中进行映射。
这些调色板符合网页无障碍（WCAG）准则吗？▾
我们的和谐生成器会根据每个色卡的相对亮度自动调整对比文字标签（黑色或白色）。在你的网页界面中使用这些颜色时，请务必确保正文文本与背景元素之间达到至少 4.5:1 的对比度，以满足 WCAG AA 要求。
生成的调色板可以用于商业品牌和网站吗？▾
可以，100% 可以。所有生成的调色板、HEX 代码和 CSS 定义均属于公共领域，可完全免费用于个人、商业和客户项目，没有任何版权限制，也无需署名。
HEX、RGB 和 HSL 三种颜色格式有什么区别？▾
HEX（#RRGGBB）是 HTML/CSS 网页设计中最常见的十六进制表示法。RGB 以 0 到 255 指定红、绿、蓝三个光通道的数值。HSL 将颜色描述为色相（色轮上的 0-360°）、饱和度（0-100% 的颜色纯度）和明度（0-100% 的亮度），非常直观，适合生成和谐的色彩变体。