设计
调色板生成器
根据基准色自动生成设计调色板
#5B5EF0
预览标题
看看这个调色板在实际设计中的效果
PrimarySecondaryAccent
关于此工具
调色板生成器只需选择一个基准色，即可自动生成互补色、类似色、三色、单色模式的Primary·Secondary·Accent·Background·Surface·Text六色调色板，完全免费。提供实时设计预览和CSS/SCSS/Tailwind代码一键复制功能。
使用方法
- 使用取色器或输入HEX代码选择基准色。
- 选择配色模式（互补/类似/三色/单色）。
- 点击色块复制HEX代码，或使用"查看源码"复制完整调色板代码。
常见问题
互补色、类似色和三色有什么区别？
互补色在色轮上相对（180°），对比强烈。类似色相邻（±30°），和谐统一。三色间隔120°，活泼平衡。
Background、Surface和Text颜色是怎么生成的？
保持基准色的色相（H），调整饱和度和亮度——Background非常亮，Text非常暗，确保调色板的整体协调。
生成的代码可以直接用在项目中吗？
可以。提供CSS变量、SCSS变量和Tailwind配置格式，复制粘贴即可使用。
结果仅供参考，请向官方机构确认准确信息