配色方案生成器

配色方案生成器

点「生成配色」或按空格键，马上得到一组新配色。喜欢的颜色锁定，再选邻近色、互补色等规则继续生成；下面的对比度表一眼看出哪种颜色可以写在哪种颜色上。结果可以复制成 CSS 变量、Tailwind 主题色或 HEX 色值，也能下载成图片。

在浏览器本地运行，输入的内容和文件都不会上传

配色规则

颜色数

也可以按空格键换一组。

导出

:root {
  --color-1: #22333b;
  --color-2: #3d6b72;
  --color-3: #7fb3a8;
  --color-4: #e6d3a3;
  --color-5: #f4efe6;
}

效果预览

用这组颜色做的标题

正文用最深的颜色写在最浅的颜色上，可以直观看出用这组配色做的页面读起来是否清楚。

按钮链接文字

文字与背景 11.4:1 · 链接与背景 5.2:1

每格是「行的颜色做文字、列的颜色做背景」。AA（4.5:1）是 WCAG 对正文的最低要求，AAA 是 7:1；「AA 大字」（3:1）只适合大号或加粗的标题。

文字 ↓ / 背景 →	#22333b	#3d6b72	#7fb3a8	#e6d3a3	#f4efe6
#22333b		2.2✗	5.6AA	8.9AAA	11.4AAA
#3d6b72	2.2✗		2.5✗	4AA 大字	5.2AA
#7fb3a8	5.6AA	2.5✗		1.6✗	2.1✗
#e6d3a3	8.9AAA	4AA 大字	1.6✗		1.3✗
#f4efe6	11.4AAA	5.2AA	2.1✗	1.3✗

这个工具好用吗？

配色规则: 邻近色用相邻的色相；单色只用一个色相、深浅不同；互补色用相对的两个色相；三角色用间隔 120° 的三个色相；分裂互补色用一个色相加上它对面两侧的色相。「随机」每次随机选一种规则。
锁定的颜色: 原样保留。第一个锁定的彩色（不是灰色）同时作为其他颜色的基准色相。
对比度表: 每格是一种颜色做文字、另一种做背景的对比度。AA（4.5:1）是 WCAG 2 对正文的最低要求，AAA 是 7:1，3:1 只适合大号或加粗的文字。
分享链接: 配色会记在网址里（#22333b-3d6b72-…），收藏或发给别人，打开就是同一组颜色。

在 OKLCH 色彩空间里计算，它的亮度和人眼感觉一致。色相按选择的规则排列，亮度从深到浅铺开，饱和度限制在普通 sRGB 屏幕能显示的范围内。

在任意一格输入品牌色并锁定，选「单色」或「邻近色」后点生成，其他颜色会围绕它的色相搭配。

每个色块上标了放黑字还是白字更清楚，以及对比度。要用配色里的颜色写字，看对比度表，标 AA 或 AAA 的组合才适合正文。

导出的是 Tailwind CSS v4 的 @theme 代码块，粘贴到主 CSS 文件里，就能用 bg-palette-1、text-palette-3 这样的类名。