配色方案生成器
给出一个基准色就能生成 9 套配色：互补色、近似色、三角与四角配色、分裂互补、单色阶、明暗变体，以及 Material 50–900 与 Tailwind 50–950 色阶，每块都带 HEX 与 RGB，可复制或导出 CSS 变量与 Tailwind 配置，也能从图片提取主色。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
配色方案点击色块可以把它设为新的基准色。
互补色
近似色
三角配色
四角配色
分裂互补
单色阶
明暗变体
Material 色阶 50–900
Tailwind 调色板 50–950
全部色值
基准色: #4D6BFE · rgb(77, 107, 254) ## 互补色 #4D6BFE · rgb(77, 107, 254) #FEE04D · rgb(254, 224, 77) ## 近似色 #4DE1FE · rgb(77, 225, 254) #4DA6FE · rgb(77, 166, 254) #4D6BFE · rgb(77, 107, 254) #6A4DFE · rgb(106, 77, 254) #A54DFE · rgb(165, 77, 254) ## 三角配色 #4D6BFE · rgb(77, 107, 254) #FE4D6B · rgb(254, 77, 107) #6BFE4D · rgb(107, 254, 77) ## 四角配色 #4D6BFE · rgb(77, 107, 254) #FE4DC3 · rgb(254, 77, 195) #FEE04D · rgb(254, 224, 77) #4DFE88 · rgb(77, 254, 136) ## 分裂互补 #4D6BFE · rgb(77, 107, 254) #FE884D · rgb(254, 136, 77) #C3FE4D · rgb(195, 254, 77) ## 单色阶 #0128E4 · rgb(1, 40, 228) #1A41FE · rgb(26, 65, 254) #4D6BFE · rgb(77, 107, 254) #8095FE · rgb(128, 149, 254) #B2BFFF · rgb(178, 191, 255) ## 明暗变体 #DBE1FF · rgb(219, 225, 255) #94A6FE · rgb(148, 166, 254) #4D6BFE · rgb(77, 107, 254) #3E56CB · rgb(62, 86, 203) #2E4098 · rgb(46, 64, 152) ## Material 色阶 50–900 #EDF0FF · rgb(237, 240, 255) · 50 #DBE1FF · rgb(219, 225, 255) · 100 #B8C4FF · rgb(184, 196, 255) · 200 #94A6FE · rgb(148, 166, 254) · 300 #7189FE · rgb(113, 137, 254) · 400 #4D6BFE · rgb(77, 107, 254) · 500 #445EE0 · rgb(68, 94, 224) · 600 #374DB7 · rgb(55, 77, 183) · 700 #2B3C8E · rgb(43, 60, 142) · 800 #1F2B66 · rgb(31, 43, 102) · 900 ## Tailwind 调色板 50–950 #F6F8FF · rgb(246, 248, 255) · 50 #EDF0FF · rgb(237, 240, 255) · 100 #D3DAFF · rgb(211, 218, 255) · 200 #B8C4FF · rgb(184, 196, 255) · 300 #8297FE · rgb(130, 151, 254) · 400 #4D6BFE · rgb(77, 107, 254) · 500 #415BD8 · rgb(65, 91, 216) · 600 #364BB2 · rgb(54, 75, 178) · 700 #2A3B8C · rgb(42, 59, 140) · 800 #1F2B66 · rgb(31, 43, 102) · 900 #131B40 · rgb(19, 27, 64) · 950
CSS 变量
--color-complementary-1: #4D6BFE; --color-complementary-2: #FEE04D; --color-analogous-1: #4DE1FE; --color-analogous-2: #4DA6FE; --color-analogous-3: #4D6BFE; --color-analogous-4: #6A4DFE; --color-analogous-5: #A54DFE; --color-triadic-1: #4D6BFE; --color-triadic-2: #FE4D6B; --color-triadic-3: #6BFE4D; --color-tetradic-1: #4D6BFE; --color-tetradic-2: #FE4DC3; --color-tetradic-3: #FEE04D; --color-tetradic-4: #4DFE88; --color-splitComplementary-1: #4D6BFE; --color-splitComplementary-2: #FE884D; --color-splitComplementary-3: #C3FE4D; --color-monochromatic-1: #0128E4; --color-monochromatic-2: #1A41FE; --color-monochromatic-3: #4D6BFE; --color-monochromatic-4: #8095FE; --color-monochromatic-5: #B2BFFF; --color-tintsShades-1: #DBE1FF; --color-tintsShades-2: #94A6FE; --color-tintsShades-3: #4D6BFE; --color-tintsShades-4: #3E56CB; --color-tintsShades-5: #2E4098; --color-material-50: #EDF0FF; --color-material-100: #DBE1FF; --color-material-200: #B8C4FF; --color-material-300: #94A6FE; --color-material-400: #7189FE; --color-material-500: #4D6BFE; --color-material-600: #445EE0; --color-material-700: #374DB7; --color-material-800: #2B3C8E; --color-material-900: #1F2B66; --color-tailwind-50: #F6F8FF; --color-tailwind-100: #EDF0FF; --color-tailwind-200: #D3DAFF; --color-tailwind-300: #B8C4FF; --color-tailwind-400: #8297FE; --color-tailwind-500: #4D6BFE; --color-tailwind-600: #415BD8; --color-tailwind-700: #364BB2; --color-tailwind-800: #2A3B8C; --color-tailwind-900: #1F2B66; --color-tailwind-950: #131B40;
Tailwind 配置片段
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand: {
'50': '#F6F8FF',
'100': '#EDF0FF',
'200': '#D3DAFF',
'300': '#B8C4FF',
'400': '#8297FE',
'500': '#4D6BFE',
'600': '#415BD8',
'700': '#364BB2',
'800': '#2A3B8C',
'900': '#1F2B66',
'950': '#131B40',
},
},
},
},
};图片只在本地读取，不会上传。
还没有选择图片
这个工具能做什么
- 定下品牌色后立刻拿到整套配色：互补、近似、三角、四角、分裂互补、单色阶和明暗变体一次生成，挑一组就能开工。
- 做设计规范时直接导出 CSS 变量或 Tailwind 配置片段，Material 50–900 与 Tailwind 50–950 色阶都是现成的。
- 配色灵感枯竭时按「随机颜色」或从一张参考图里提取主色当基准，再让工具把整套色阶展开。
- 检查对比度：每个色块都标注适合的深浅，选按钮底色和文字色时不用另外开工具算。
示例
输入
基准色 #3366FF
输出
互补色 #3366FF / #FFCC33；近似色 #33EEFF、#33AAFF、#3366FF、#4433FF、#8833FF；三角配色 #3366FF、#FF3366、#66FF33；四角配色 #3366FF、#FF33CC、#FFCC33、#33FF66；分裂互补 #3366FF、#FF6633、#CCFF33；单色阶 #0033CC、#0040FF、#3366FF、#668CFF、#99B3FF；明暗变体 #D6E0FF、#85A3FF、#3366FF、#2952CC、#1F3D99
色相类方案只转动 HSL 的色相角，饱和度和明度保持基准色不变，所以同一套配色看起来是一族的；色阶方案则是与白 / 黑按固定比例混合。
常见问题
为什么互补色算出来是 #FFCC33 而不是简单的反色？
色相旋转 180° 是在 HSL 空间里做的，保留基准色的饱和度和明度，所以得到的是同一明度的补色。直接把 RGB 各位取反（#CC9900）得到的是另一种观感，工具按前者实现。
Material 和 Tailwind 色阶是官方的吗？
不是官方取色表，而是按官方常见做法生成的：基准色放在 500（Tailwind 还多一档 950），浅色档与白色按 90%/80%/60%/40%/20% 之类的比例混合，深色档与黑色按 12%/28%/44%/60% 混合。它保证整套色阶有统一的明度节奏，但具体数值与官方色板不会完全一致。
从图片提取主色的原理是什么？
图片先用 Canvas 读成像素，然后按通道每 4 bit 分桶统计出现次数（忽略 alpha 低于 128 的像素），再对每个桶里的像素求平均色，最后按像素数排序取前几个。纯本地计算，图片不会上传。
导出的 CSS 变量能直接粘进项目吗？
可以。命名格式是 --color-<方案 id>-<序号>，例如 --color-complementary-1: #3366FF;，色阶方案则是 --color-material-500 这种带档位的名字。Tailwind 片段会生成 theme.extend.colors 里的一份完整色阶，改一下键名即可用。
基准色写错了会怎样？
只接受 3 位或 6 位十六进制（可以省略 #，大小写不限），输入别的会提示色值不合法并保持上一次的结果。输出的所有色值统一是大写 #RRGGBB。
关键词：配色方案color palette调色板互补色complementary color色轮material 色阶tailwind 调色板颜色搭配主色提取