配色生成器

生成器
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By

一键生成和谐的五色配色方案:随机、互补、邻近、三角、单色等多种配色法。锁定喜欢的颜色再重摇,点击复制 HEX 色值,还能导出一张精美的配色卡片。纯前端,即时生成。

RT-FUN-091 · Fun & Misc

配色生成器

(或按空格键)

Advertisement
After tool · AD-W1 Responsive

怎么用

选择配色法

从「随机、互补、邻近、三角、单色」中选一种。每种对应一条色彩和谐规则,决定五个颜色之间的关系。

点「生成」或按空格

每次都会生成一组新的和谐配色。不满意就再点一次,或直接按空格键快速重摇。

锁定 + 复制

喜欢某个颜色?点它的🔓锁住它,再生成时它就不变。点 HEX 色值即可复制(如 #E8622A),直接用到设计稿里。

下载或分享卡片

点「下载配色」把整组配色存成一张图(含 HEX 值),或「分享」发给同事/朋友,也可导出 PDF。

配色生成器:用色彩理论,几秒配出好看的颜色

给设计选颜色,常常是最让人卡壳的一步:单看一个颜色还行,五个凑在一起就「不搭」。配色生成器把色彩和谐背后的规则做成了一个按钮——它不是随便给你五个颜色,而是按照色轮上的几何关系,生成本就「天生协调」的一组配色。你只管挑、锁、复制,把好看的颜色直接搬进设计里。

五种配色法,五种关系

工具内置最常用的几种配色法,每一种对应色轮上的一种关系:单色(Monochromatic)——同一种色相,只变明暗,最稳妥耐看;邻近(Analogous)——色轮上相邻的几种颜色,自然柔和,像同一片风景里的色彩;互补(Complementary)——色轮上正对的两色,对比强烈、最抓眼;三角(Triadic)——色轮上等距的三色,鲜明又平衡;随机(Random)——在保持明暗层次的前提下放开色相,给你意外的灵感。换一种配色法,整组关系就随之改变。

「好的配色不是凑出来的,是按关系排出来的。」

HEX 是什么,为什么到处都用它

每个颜色下面那串 #E8622A 就是它的 HEX(十六进制)色值——网页、设计软件、几乎所有数字工具通用的「颜色身份证」。它由 # 加六位十六进制数字组成,分别代表红、绿、蓝三个通道的强度。点一下就能复制,粘到 CSS、Figma、PPT 里,颜色分毫不差。本工具生成的每个颜色都给出 HEX,方便你直接拿去用。

顺手提一句对比度

配色好看之外,还要好用:文字和背景之间要有足够的对比度,内容才看得清(无障碍标准 WCAG 建议正文对比度至少 4.5:1)。卡片上的色值标签会根据每个色块的明暗,自动用黑字或白字以保证可读——这也提醒你:把生成的颜色用作文字/背景时,记得检查一下对比度。整个工具在你的浏览器本地运行,即点即出,不上传任何东西。

Advertisement
After how-to · AD-W2 Responsive

牛顿在一六六六年把光谱弯成了一个圆

01

HEX 色值用十六进制表示红绿蓝三通道,每通道 00–FF(0–255),理论上可表示约 1,677 万种颜色。

02

色轮的概念可追溯到牛顿:他在 1666 年把光谱首尾相接,画出了第一个色环,奠定了今天「色相」的基础。

03

互补色(色轮上正对的两色)放在一起对比最强,所以体育队、警示标识常用它;但大面积互补色也最容易「刺眼」。

04

设计里常用「60-30-10」法则:主色 60%、辅色 30%、点缀色 10%,能让配色既统一又有重点。

05

人眼对绿色最敏感,这也是为什么亮度公式里绿色的权重最高(约 0.72),远高于红(0.21)和蓝(0.07)。

06

单色配色(同色相、变明暗)几乎永远「不会出错」,因此最适合追求高级、克制感的品牌与界面。

07

无障碍标准 WCAG 要求正文文字与背景的对比度至少 4.5:1,大号文字至少 3:1,以照顾低视力用户。

08

颜色有强烈的文化与情绪含义:同样的红色,在一种文化里是喜庆,在另一种里却是警告——配色不只是好看,也是沟通。

09

屏幕用 RGB(光的叠加,加色),印刷用 CMYK(颜料的吸收,减色);同一个 HEX 在屏幕和纸上可能略有差异。

10

本工具用 HSL(色相-饱和度-明度)来生成配色,因为按「色相角度」旋转,正是表达互补、三角等和谐关系最直观的方式。

常见问题

  • 每个色块下方都有 HEX 色值(如 #E8622A)。点一下即可复制,然后粘到 CSS、Figma、Photoshop、PPT 等任何接受 HEX 的地方,颜色完全一致。也可以下载整组配色的卡片图作参考。

  • 它们对应色轮上不同的几何关系:单色=同一色相变明暗(最稳);邻近=色轮相邻色(柔和);互补=正对两色(对比强);三角=等距三色(鲜明平衡);随机=放开色相但保持明暗层次。换一种,整组颜色的「关系」就变了。

  • 点某个颜色上的🔓把它锁住,之后再点「生成」时,锁定的颜色保持不变,只有未锁定的会更新。这样你可以保住喜欢的一两个颜色,反复重摇其余的,直到整组都满意。

  • 是的,每次「生成」会随机取一个起始色,再按你选的配色法推导出和谐的一组。随机的是「起点」,但颜色之间的关系始终遵循色彩理论,所以结果总是协调的,而非杂乱。

  • 工具不会自动保证无障碍。它会根据每个色块明暗自动选用黑字或白字让标签可读,但你把颜色用于文字/背景时,仍应自行检查对比度(WCAG 建议正文至少 4.5:1)。互补等高对比配色通常更安全。

  • 目前的做法是:不断「生成」,遇到接近你想要的某个颜色时把它🔒锁住,再重摇其余颜色围绕它展开。我们也在考虑加入「输入一个基准色」的功能。

  • 高分辨率 JPEG 图片,五个色块连同各自的 HEX 值,适合社交分享或存档;也可导出 PDF。整张图在你的设备上生成,不经服务器。

  • 完全免费,无需注册,生成次数不限。想摇多少次就摇多少次,因为一切都在你的浏览器里完成,既快又私密。

  • 它们是同一种颜色的不同写法。RGB 用红绿蓝三个 0–255 的数;HEX 是 RGB 的十六进制简写(#RRGGBB);HSL 用色相、饱和度、明度来描述,更贴近人的直觉。本工具内部用 HSL 推导和谐关系,最后输出通用的 HEX。

  • 不会。所有配色都在你的浏览器即时生成,不上传服务器、不写入网址、不收集任何信息。刷新页面就会重新开始。RECATOOLS 实行零储存、零跟踪。

Advertisement
Pre-footer · AD-W3 728 × 90