首页 / 颜色设计 / 🎨 调色板生成器

🎨 调色板生成器

免费在线调色板生成器,输入主色自动生成互补色、类似色、三色配色、四色配色、单色配色方案,支持HEX/RGB/HSL互转,一键导出CSS变量代码。

相关工具

  • 渐变生成器
  • 颜色选择器
  • 阴影生成器
  • 圆角生成器
  • CSS渐变生成器
  • 长度换算

常见问题

HEX、RGB、HSL哪个更好用?
各有优势。HEX最简洁,适合定义固定颜色,是最常用的格式。RGB/RGBA适合需要透明度的场景(如半透明背景、阴影)。HSL/HSLA最适合调整颜色,要变亮就增加L值,要变淡就减少S值,比在HEX里调直观得多。建议日常使用HEX,需要动态调整颜色时使用HSL。
什么是60-30-10配色法则?
60-30-10是室内设计延伸到UI设计的经典配色法则:60%主色(大面积背景和基础色)、30%辅助色(次重要元素、区域区分)、10%强调色(按钮、链接、重点内容)。这个比例能保证视觉平衡又有重点。法则是参考不是教条,可以根据实际情况调整,但核心思想是"主次分明"。
互补色配色会不会太刺眼?
1:1使用互补色确实容易视觉疲劳。正确的用法是:一种颜色大面积使用(主色),另一种颜色小面积点缀(强调色)。比如蓝色主色 + 橙色按钮,橙色只占10%左右,既醒目又和谐。还可以降低其中一种颜色的饱和度或调整明度,让对比不那么强烈。记住:比例比颜色本身更重要。
什么是色温?冷色暖色怎么分?
色温是颜色给人的冷暖感觉。红、橙、黄给人温暖的感觉,称为暖色;蓝、青、紫给人清凉的感觉,称为冷色。绿色和中性色(黑、白、灰)属于中性。暖色有亲和力、活力感,适合社交、娱乐类产品;冷色有专业、冷静、科技感,适合金融、企业、工具类产品。设计时根据品牌调性选择合适的冷暖色系。
如何判断颜色对比度是否达标?
WCAG(Web内容无障碍指南)标准:普通文本对比度≥4.5:1,大文本≥3:1。可以用在线对比度检查工具(如WebAIM Contrast Checker)计算。简单判断方法:黑字在浅色背景、白字在深色背景通常都达标。灰色文字需要特别注意,太浅的灰色在白色背景上可能看不清,尤其是小字号时。
生成的配色方案可以商用吗?
可以!颜色本身不受版权保护,本工具生成的配色方案你可以自由使用,包括商业项目。配色方案是基于色彩理论公式计算生成的,没有原创版权问题。你可以用在网站设计、APP设计、海报、PPT等各种设计项目中,无需授权。