Color palette generator
One base color gives you 9 palettes: complementary, analogous, triadic, tetradic, split complementary, monochromatic and tints/shades, plus Material 50–900 and Tailwind 50–950 scales. Every swatch shows HEX and RGB, and you can export CSS variables or a Tailwind config — or pull colors out of an image.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Base color: #4D6BFE · rgb(77, 107, 254) ## Complementary #4D6BFE · rgb(77, 107, 254) #FEE04D · rgb(254, 224, 77) ## Analogous #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) ## Triadic #4D6BFE · rgb(77, 107, 254) #FE4D6B · rgb(254, 77, 107) #6BFE4D · rgb(107, 254, 77) ## Tetradic (square) #4D6BFE · rgb(77, 107, 254) #FE4DC3 · rgb(254, 77, 195) #FEE04D · rgb(254, 224, 77) #4DFE88 · rgb(77, 254, 136) ## Split complementary #4D6BFE · rgb(77, 107, 254) #FE884D · rgb(254, 136, 77) #C3FE4D · rgb(195, 254, 77) ## Monochromatic #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) ## Tints & shades #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 scale 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 palette 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
--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.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',
},
},
},
},
};Images are read locally and never uploaded.
No image selected yet
What this tool does
- Lock in a brand color and get a full palette at once: complementary, analogous, triadic, tetradic, split complementary, monochromatic and tints/shades are all generated so you can pick one and start.
- Build a design system file directly — export CSS variables or a Tailwind config snippet, with Material 50–900 and Tailwind 50–950 scales ready to go.
- Break out of a color rut by rolling a random base color or pulling the dominant colors out of a reference image, then let the tool expand the scales.
- Check contrast: every swatch shows where it works, so picking a button background and its text color needs no second tool.
Example
Input
Base color #3366FF
Output
Complementary #3366FF / #FFCC33; analogous #33EEFF, #33AAFF, #3366FF, #4433FF, #8833FF; triadic #3366FF, #FF3366, #66FF33; tetradic #3366FF, #FF33CC, #FFCC33, #33FF66; split complementary #3366FF, #FF6633, #CCFF33; monochromatic #0033CC, #0040FF, #3366FF, #668CFF, #99B3FF; tints & shades #D6E0FF, #85A3FF, #3366FF, #2952CC, #1F3D99
The hue-based schemes only rotate the HSL hue angle and keep the base saturation and lightness, which is why they read as one family; the scale schemes mix the base with white or black by fixed ratios instead.
Frequently asked questions
Why is the complement #FFCC33 rather than a simple inversion?
The 180° rotation happens in HSL space while keeping the base saturation and lightness, so the result is the complement at the same lightness. Inverting each RGB channel (#CC9900) looks different, and the tool implements the former.
Are the Material and Tailwind scales official values?
They are not the official swatches, they are generated the way those systems are usually built: the base sits at 500 (Tailwind adds a 950), lighter steps mix with white at ratios like 90/80/60/40/20%, darker steps mix with black at 12/28/44/60%. The result has a consistent lightness rhythm but will not match the official palettes digit for digit.
How does image color extraction work?
The image is read into pixels via canvas, binned per channel at 4 bits per component while ignoring pixels below alpha 128, averaged within each bin, and finally sorted by pixel count to give the top few colors. It is all local — the image is never uploaded.
Can I paste the exported CSS variables into my project?
Yes. They are named --color-<scheme-id>-<index>, for example --color-complementary-1: #3366FF;, and scales use the step name such as --color-material-500. The Tailwind snippet produces a complete scale under theme.extend.colors that you can rename.
What if I type the base color wrong?
Only 3- or 6-digit hex is accepted (the # is optional and case does not matter). Anything else reports an invalid color and keeps the previous result. All output is uppercase #RRGGBB.
Keywords：配色方案color palette调色板互补色complementary color色轮material 色阶tailwind 调色板颜色搭配主色提取