256 Tools

配色生成器 — 从 HEX 生成互补/类似/三角和谐配色（免费·CSS/Tailwind 导出）

#7C3BEDAa AA 通过 5.67:1
#3BACEDAa AA 通过 8.31:1
#3B53EDAa AA 通过 5.76:1
#D53BEDAa AA 通过 5.68:1
#ED3BACAa AA 通过 5.82:1
38
在非输入框时按空格键也可重新生成

微调所选颜色

#7C3BED

导出配色

:root {
  --color-1: #7C3BED;
  --color-2: #3BACED;
  --color-3: #3B53ED;
  --color-4: #D53BED;
  --color-5: #ED3BAC;
}

相关外部工具

部分链接为联盟营销链接。

Adobe Color配色工具Canva在线平面设计

相关工具

颜色转换在一个界面中互转 HEX、RGB、HSL、HSV 和 RGBA。改动任一数值其余实时联动，一键复制，支持透明度与 WCAG 对比度。渐变生成器使用多个颜色色标创建线性、径向和锥形 CSS 渐变。调整角度、形状和中心，一键复制 background CSS 或 Tailwind 值。图片配色提取在浏览器本地从图片提取主色调与占比（%），无需上传。支持 HEX/RGB，可自定义颜色数量，一键复制或导出为 CSS/JSON。字体搭配工具精选 Google Fonts 标题×正文字体组合，实时预览，一键复制 CSS。

这是一款免费的配色（调色板）生成器，基于色彩理论从基础色生成和谐的配色方案。输入 HEX 代码、用取色器选色，或点击「随机」——然后选择互补色、类似色、三角、矩形或单色等配色方案，即可立即生成平衡的配色板。锁定喜欢的颜色后重新生成其余颜色，用滑块微调明度和饱和度，一键复制任意 HEX，或将整个配色导出为 CSS 变量、Tailwind config 或 JSON。每种颜色都会显示白色或黑色文字中哪种更易读，以及 WCAG AA 对比度结果。全部在浏览器中运行，您的颜色数据不会发送到服务器。

使用方法

  1. 在「基础色」输入框中输入 HEX 代码（如 #7C3AED）或 CSS 颜色名（如 rebeccapurple），或使用取色器，也可以点击「随机」按钮从随机基础色开始。
  2. 选择配色方案（互补色、类似色、三角、矩形、分裂互补色或单色），配色板立即更新。
  3. 用滑块选择颜色数量（3–8）。
  4. 点击任意颜色的锁定图标将其固定。点击「重新生成」（或在非输入框时按空格键）只打乱未锁定的颜色。
  5. 点击色块选中，用明度/饱和度滑块精细调整。切换「所有颜色（相对调整）」模式可整体变亮或变暗。
  6. 点击复制图标复制单个 HEX，或用「复制全部 HEX」一次性获取所有颜色。在导出标签页选择格式后复制或下载。
  7. 点击「复制配色 URL」可将当前配色分享给他人。

什么是配色方案

配色方案（色彩和谐）是基于色轮上颜色位置关系的规则，规定了哪些颜色搭配在一起看起来和谐。色相角度关系是核心，明度和饱和度的变化使配色更加丰富。

色轮（12色·30°间隔）色轮

互补色

色轮上正对面的两色（+180°）。对比强烈、吸引眼球，适合用作强调色。

分裂互补色

基础色加上其互补色两侧的颜色（+150°/+210°）。比纯互补色更柔和、易于平衡。

类似色

相邻色相（±30°）组成的配色。协调统一，自然舒适，适合背景和自然主题。

三角配色

色轮上均匀分布的三色（+120°/+240°）。平衡而鲜活，用途广泛。

矩形配色

每隔90°的四色构成矩形。色彩丰富，需要注意冷暖色调的平衡。

单色配色

同一色相的不同明度和饱和度变化。最不容易出错，优雅统一。

建议：不确定时从「类似色」或「单色」开始，出错概率最小。

功能介绍

从基础色生成或随机生成

输入 HEX、CSS 颜色名或使用取色器指定基础色，让方案生成其余颜色；或点击「随机」从全新起点出发。

锁定颜色，重新生成其余

找到喜欢的颜色？点击锁定图标将其固定。点击「重新生成」（或按空格键）只打乱未锁定的位置——在保留满意颜色的同时快速探索变化。

微调明度和饱和度

选中色块后拖动明度或饱和度滑块，精确调整而不影响色相和谐。切换「所有颜色」模式可相对调整整个配色板。

一键复制 HEX

点击任意色块的复制图标，立即将其 HEX 复制到剪贴板。使用「复制全部 HEX」一次性获取配色板中所有颜色。

导出为 CSS 变量、Tailwind 或 JSON

切换到导出标签页并选择格式。CSS 变量生成 :root 块（--color-1、--color-2…），Tailwind 生成可直接粘贴的 theme.extend.colors 块，JSON 生成简单数组。颜色值始终为大写 HEX，不做本地化格式处理。

对比度与可读性提示

每个色块显示白色或黑色文字哪种更易读、WCAG 对比度值以及 AA 通过/不通过标签——以文字和颜色两种方式展示，不只依赖颜色。

使用场景

从品牌色定义配色方案

粘贴品牌主色 HEX，选择类似色或互补色方案，立即获得与 Logo 和谐的强调色、背景色和文字色候选。

直接粘贴到 CSS / Tailwind

将导出的 CSS 变量（:root { --color-1: ... }）或 Tailwind theme.extend.colors 块直接粘贴到代码中，无需手动转换。

检验配色可访问性

利用每个色块的可读性提示，验证各颜色上的文字是否满足 WCAG AA（4.5:1 对比度），在设计阶段发现问题色。

注意事项

  • 配色方案提供的是和谐的起点，并非保证最佳效果。最终配色的好坏取决于使用场景、比例和具体色调。
  • 对比度数值仅供参考，WCAG 公式计算准确，但实际可读性还受字体大小、字重和周围颜色影响。
  • 单色配色在极端明度值附近饱和度可能难以察觉，这是正常现象，保持基础色适中的饱和度有助于产生更好的效果。
  • 您的颜色数据不会发送到服务器。URL 分享仅在您主动复制分享链接时发生。

常见问题

可以从 HEX 代码生成配色调色板吗？
可以。在「基础色」输入框输入 HEX 代码（带或不带 #，大小写不限），工具会立即使用所选配色方案生成和谐配色板。也支持 CSS 颜色名如 rebeccapurple。
可以选择互补色、类似色、三角等配色方案吗？
可以。提供六种方案：互补色（+180°）、分裂互补色（+150°/+210°）、类似色（±30°）、三角（+120°/+240°）、矩形（+90°间隔）和单色（同色相不同明度）。
能锁定某色然后只重新生成其余颜色吗？
可以。点击色块上的锁定图标将其固定，然后点击「重新生成」或按空格键，只有未锁定的颜色会被重新生成。
可以导出为 CSS 变量、Tailwind 或 JSON 吗？
可以。在导出标签页选择格式：CSS 变量（:root { --color-1: #...; }）、Tailwind config（theme.extend.colors → palette: { 1: '#...', ... }）或 JSON（{ "palette": ["#...", ...] }）。均可复制或下载。
最多可以生成几种颜色？
3到8种。使用滑块选择。当所选方案的关键色相数少于请求数量时，工具会用明度变化（深浅色调）填充额外的位置。
可以检查文字在每种颜色上是否易读吗？
可以。每个色块显示推荐文字颜色（白或黑）、WCAG 对比度值以及 AA 通过/不通过标签——用文字和颜色两种方式表示，不只依赖颜色。
我的颜色数据会被发送到服务器吗？
不会。所有配色生成、调整、对比度计算和导出都在浏览器内完成，不会上传或存储您的颜色数据。URL 分享仅在您主动复制时发生。

我们使用 Cookie 用于广告和分析。