配色生成器

生成器
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

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

RT-FUN-091 · Fun & Misc
你的浏览器版本过旧,此工具的交互功能无法运行。请更新至 Safari 13.1、Chrome 或 Edge 80、Firefox 74 或以上版本。

配色生成器

(或按空格键)

对比度检查(WCAG 2.2)

 

颜色HEXrgb()hsl()白底黑底
     
     
     
     
     

每一组配对,对比度从高到低

  1. Aa
  2. Aa
  3. Aa
  4. Aa
  5. Aa
  6. Aa
  7. Aa
  8. Aa
  9. Aa
  10. Aa

数值是 WCAG 2.2 对比度,向下取整,所以显示 4.5:1 的一定真的达到 4.5:1。正文需 4.5:1(AA)或 7:1(AAA);大号文字(18pt,或 14pt 粗体)需 3:1。配色法只决定色相关系,并不保证对比度:色轮上相对的两色,亮度可能几乎一样。

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

牛顿的七色色环、HEX 的 1,677 万色,以及 HSL 明度为何会误导

01

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

02

牛顿《光学》(1704 年首版,第一卷第二部分命题六)画了一个分成七色的圆,从红到紫,各段弧长按音阶的音程比例划分——这正是本工具所旋转的「色相环」的前身。

03

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

04

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

05

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

06

本工具用 HSL 生成配色,因为和谐关系就是色相角度的旋转。但 HSL 的明度不等于人眼看到的亮度:CSS Color 4 指出,黄色 hsl(60 100% 50%) 和蓝色 hsl(240 100% 50%) 明度同为 50%,WCAG 相对亮度却分别是 0.93 和 0.07——所以上面的对比度检查要逐对实测。

常见问题

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

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

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

  • 除非你设了基准色,否则是的:每次「生成」都会随机取一个基准色相、饱和度和明度,再按所选配色法的固定规则推出另外四色(规则显示在控件下方)。勾选「从这个颜色开始」后,你的颜色会原样保留,只有「随机」模式还会随机取色。

  • 不会自动保证,配色法本身也不能保证:互补的两个色相,亮度可能几乎相同,而对比度取决的正是亮度。工具做的是实测:对比度检查会列出全部十组配对及其 WCAG 2.2 对比度(正文 AA 门槛 4.5:1,大号文字 3:1);每个色块的标签用黑字或白字中对比度更高的那个,一定达到 4.5:1。工具不模拟色觉差异。

  • 可以。在「基准色」里选一个颜色(或勾选「从这个颜色开始」),每种配色法都会围绕它展开;你的颜色会原样保留在规则规定的基准位置。你也可以用🔒锁住任意色块,再重摇其余颜色。

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

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

  • 不会。所有配色都在你的浏览器即时生成,不上传服务器、不写入网址,也不会被收集。刷新页面就会重新开始。

方法与来源

计算方式

Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).

本工具依据的标准

  • Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
  • Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
  • Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
  • HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
  • Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.

资料来源

  • W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
  • Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504

可能导致本页过时的因素

  • None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
Advertisement
Pre-footer · AD-W3 728 × 90