配色生成

配色方案生成器

选择基准色与配色规则,一键得到专业和谐的调色板。锁定喜欢的颜色,再按空格换一批。

按空格键快速换一批 · 锁定的颜色不会被随机替换

点击色块即可复制色值

导出配色


        

界面预览

把当前配色套用到真实界面元素上,快速判断是否可用。

Aurora Docs Pricing

让配色不再靠猜

这是一段正文示例,用来观察当前配色下的文字可读性与整体质感。

主要操作 次要操作 NEW
Revenue
¥ 48.2k
Users
1,284

色彩明细

色名HEXRGB HSLCMYK相对亮度推荐文字色

配色规则说明

类比色

取色轮上相邻 30° 内的颜色,视觉最和谐、最不容易出错,适合追求统一氛围的界面与插画。

互补色

取色轮正对面 180° 的颜色,对比强烈、张力足,适合需要突出重点按钮或强调信息的场景。

三角配色

在色轮上等距取三色(相隔 120°),既有对比又保持平衡,是海报与品牌视觉的常用方案。

单色渐层

固定色相只改变明度与饱和度,最稳妥的方案,常用于数据可视化与极简风格设计。

工具介绍与使用说明

📘

配色生成器基于色彩理论算法,从你选定的基准色出发自动推导和谐的一组配色,适合做品牌色板、UI 主题与插画配色。

  • 在左上角选一个基准色(或用「随机」),再从「配色规则」里挑一种和谐算法;不确定就先试互补色或三角配色。
  • 点色块上的 🔒 锁定满意的颜色,再点「换一批」或按空格键,只刷新未锁定的色块。
  • 满意后点「导出」复制 CSS / Tailwind 变量,或把图片主色「在生成器中打开」继续编辑。

使用提示

💡
  • 先选一个你喜欢的基准色,再挑配色规则;不确定就试「互补色」或「三角配色」,最稳妥。
  • 点色块上的 🔒 可锁定满意的颜色,再点「换一批」只刷新其它色块。
  • 想直接套用某套精选方案?在「配色方案」库里点「在生成器中打开」即可加载。