一键生成和谐的五色配色方案:随机、互补、邻近、三角、单色等多种配色法。锁定喜欢的颜色再重摇,点击复制 HEX 色值,还能导出一张精美的配色卡片。纯前端,即时生成。
配色生成器
怎么用
选择配色法
从「随机、互补、邻近、三角、单色」中选一种。每种对应一条色彩和谐规则,决定五个颜色之间的关系。
点「生成」或按空格
每次都会生成一组新的和谐配色。不满意就再点一次,或直接按空格键快速重摇。
锁定 + 复制
喜欢某个颜色?点它的🔓锁住它,再生成时它就不变。点 HEX 色值即可复制(如 #E8622A),直接用到设计稿里。
下载或分享卡片
点「下载配色」把整组配色存成一张图(含 HEX 值),或「分享」发给同事/朋友,也可导出 PDF。
配色生成器:用色彩理论,几秒配出好看的颜色
给设计选颜色,常常是最让人卡壳的一步:单看一个颜色还行,五个凑在一起就「不搭」。配色生成器把色彩和谐背后的规则做成了一个按钮——它不是随便给你五个颜色,而是按照色轮上的几何关系,生成本就「天生协调」的一组配色。你只管挑、锁、复制,把好看的颜色直接搬进设计里。
五种配色法,五种关系
工具内置最常用的几种配色法,每一种对应色轮上的一种关系:单色(Monochromatic)——同一种色相,只变明暗,最稳妥耐看;邻近(Analogous)——色轮上相邻的几种颜色,自然柔和,像同一片风景里的色彩;互补(Complementary)——色轮上正对的两色,对比强烈、最抓眼;三角(Triadic)——色轮上等距的三色,鲜明又平衡;随机(Random)——在保持明暗层次的前提下放开色相,给你意外的灵感。换一种配色法,整组关系就随之改变。
「好的配色不是凑出来的,是按关系排出来的。」
HEX 是什么,为什么到处都用它
每个颜色下面那串 #E8622A 就是它的 HEX(十六进制)色值——网页、设计软件、几乎所有数字工具通用的「颜色身份证」。它由 # 加六位十六进制数字组成,分别代表红、绿、蓝三个通道的强度。点一下就能复制,粘到 CSS、Figma、PPT 里,颜色分毫不差。本工具生成的每个颜色都给出 HEX,方便你直接拿去用。
顺手提一句对比度
配色好看之外,还要好用:文字和背景之间要有足够的对比度,内容才看得清(无障碍标准 WCAG 建议正文对比度至少 4.5:1)。卡片上的色值标签会根据每个色块的明暗,自动用黑字或白字以保证可读——这也提醒你:把生成的颜色用作文字/背景时,记得检查一下对比度。整个工具在你的浏览器本地运行,即点即出,不上传任何东西。
关于颜色与配色的 10 个事实
HEX 色值用十六进制表示红绿蓝三通道,每通道 00–FF(0–255),理论上可表示约 1,677 万种颜色。
色轮的概念可追溯到牛顿:他在 1666 年把光谱首尾相接,画出了第一个色环,奠定了今天「色相」的基础。
互补色(色轮上正对的两色)放在一起对比最强,所以体育队、警示标识常用它;但大面积互补色也最容易「刺眼」。
设计里常用「60-30-10」法则:主色 60%、辅色 30%、点缀色 10%,能让配色既统一又有重点。
人眼对绿色最敏感,这也是为什么亮度公式里绿色的权重最高(约 0.72),远高于红(0.21)和蓝(0.07)。
单色配色(同色相、变明暗)几乎永远「不会出错」,因此最适合追求高级、克制感的品牌与界面。
无障碍标准 WCAG 要求正文文字与背景的对比度至少 4.5:1,大号文字至少 3:1,以照顾低视力用户。
颜色有强烈的文化与情绪含义:同样的红色,在一种文化里是喜庆,在另一种里却是警告——配色不只是好看,也是沟通。
屏幕用 RGB(光的叠加,加色),印刷用 CMYK(颜料的吸收,减色);同一个 HEX 在屏幕和纸上可能略有差异。
本工具用 HSL(色相-饱和度-明度)来生成配色,因为按「色相角度」旋转,正是表达互补、三角等和谐关系最直观的方式。
常见问题
-
每个色块下方都有 HEX 色值(如 #E8622A)。点一下即可复制,然后粘到 CSS、Figma、Photoshop、PPT 等任何接受 HEX 的地方,颜色完全一致。也可以下载整组配色的卡片图作参考。
-
它们对应色轮上不同的几何关系:单色=同一色相变明暗(最稳);邻近=色轮相邻色(柔和);互补=正对两色(对比强);三角=等距三色(鲜明平衡);随机=放开色相但保持明暗层次。换一种,整组颜色的「关系」就变了。
-
点某个颜色上的🔓把它锁住,之后再点「生成」时,锁定的颜色保持不变,只有未锁定的会更新。这样你可以保住喜欢的一两个颜色,反复重摇其余的,直到整组都满意。
-
是的,每次「生成」会随机取一个起始色,再按你选的配色法推导出和谐的一组。随机的是「起点」,但颜色之间的关系始终遵循色彩理论,所以结果总是协调的,而非杂乱。
-
工具不会自动保证无障碍。它会根据每个色块明暗自动选用黑字或白字让标签可读,但你把颜色用于文字/背景时,仍应自行检查对比度(WCAG 建议正文至少 4.5:1)。互补等高对比配色通常更安全。
-
目前的做法是:不断「生成」,遇到接近你想要的某个颜色时把它🔒锁住,再重摇其余颜色围绕它展开。我们也在考虑加入「输入一个基准色」的功能。
-
高分辨率 PNG 图片,五个色块连同各自的 HEX 值,适合社交分享或存档;也可导出 PDF。整张图在你的设备上生成,不经服务器。
-
完全免费,无需注册,生成次数不限。想摇多少次就摇多少次,因为一切都在你的浏览器里完成,既快又私密。
-
它们是同一种颜色的不同写法。RGB 用红绿蓝三个 0–255 的数;HEX 是 RGB 的十六进制简写(#RRGGBB);HSL 用色相、饱和度、明度来描述,更贴近人的直觉。本工具内部用 HSL 推导和谐关系,最后输出通用的 HEX。
-
不会。所有配色都在你的浏览器即时生成,不上传服务器、不写入网址、不收集任何信息。刷新页面就会重新开始。RECATOOLS 实行零储存、零跟踪。
Related News
You may be interested in these recent stories from our newsroom.
No related news yet for this tool. Our editorial team publishes new pieces every week.
Browse all news →