🎨

调色板生成器

基于基础色生成精美的调色板。可导出为 CSS、HEX 或 JSON。

设计工具 本地运行 不发送数据
调色板 HSL 互补色 设计
基础色
调色板类型
数量（仅单色）： 5
5
导出格式
调色板预览
导出

什么是调色板生成器？

基于基础色生成精美的调色板。可选择互补色、类似色、三色或单色方案，并导出为 CSS、HEX 或 JSON。

如何使用调色板生成器

  1. 选择要作为调色基础的基础色。
  2. 选择调色板风格，例如互补、类似色或单色。
  3. 查看生成的色板，并根据需要调整基础色。
  4. 复制你想在设计系统或样稿中复用的 HEX 值。

相关工具

🎨
颜色选择器
在 HEX、RGB、HSL 和 CMYK 之间转换颜色
 🌈
CSS渐变生成器
构建带实时预览的 CSS 线性渐变和径向渐变
 ⚖️
WCAG对比度检查
检查 WCAG AA 和 AAA 颜色对比度比值，保障无障碍性
了解调色板 ▾
示例
输入 从基础蓝色生成互补调色板：
输出 互补色在色轮上正对排列，形成高对比度、鲜明的搭配。
常见使用场景
  • 从基础品牌色构建 UI 色彩系统
  • 为图表或插图生成辅助强调色
  • 在设计交接前探索调色板方向
  • 为社交媒体帖子或幻灯片快速创建配色集
常见问题
如何选择合适的配色类型？

使用互补色打造大胆、高对比度的设计。使用类似色营造柔和、协调的 UI 主题。当需要三种均衡的强调色时，使用三角色。当优先考虑简洁与优雅时，使用单色。

调色板会检查无障碍对比度吗？

本工具专注于生成色彩和谐配色。要进行 WCAG 对比度检查，请使用本站的对比度检查器或 WCAG AA 检查器工具。

可以把调色板导出到 Figma 或 CSS 吗？

可以——使用 CSS 导出格式获取可直接粘贴的 CSS 自定义属性，或单独复制 HEX 值粘贴到任何设计工具中。

单色数量滑块有什么作用？

使用单色类型时，你可以控制生成多少个浅色和深色（3–10）。这会提供细粒度的灰度或着色色阶供你使用。