← Back to Home
🖌️
Color Palette Generator
Build complementary, analogous, triadic and monochrome palettes from one base color with WCAG contrast checking and CSS variable export
Base color
🔒 Computed entirely in the browser, no sign-up#4F46E5rgb(79, 70, 229)Blue
rgb(79, 70, 229) · Color name: Blue
Complementary
180°Click any swatch to make it the base color
#4F46E5rgb(79, 70, 229)Blue- vs white6.29AA pass
- vs black3.34Fails
#9C96F0rgb(156, 150, 240)Blue- vs white2.61Fails
- vs black8.03AAA pass
#DCE546rgb(220, 229, 70)Yellow- vs white1.37Fails
- vs black15.34AAA pass
#BAC31Brgb(186, 195, 27)Yellow- vs white1.92Fails
- vs black10.91AAA pass
Analogous
±30°Click any swatch to make it the base color
#468CE5rgb(70, 140, 229)Blue- vs white3.42Fails
- vs black6.14AA pass
#738AEBrgb(115, 138, 235)Blue- vs white3.20Fails
- vs black6.56AA pass
#4F46E5rgb(79, 70, 229)Blue- vs white6.29AA pass
- vs black3.34Fails
#9873EBrgb(152, 115, 235)Purple- vs white3.51Fails
- vs black5.99AA pass
#9F46E5rgb(159, 70, 229)Purple- vs white4.69AA pass
- vs black4.48Fails
Triadic
120°Click any swatch to make it the base color
#4F46E5rgb(79, 70, 229)Blue- vs white6.29AA pass
- vs black3.34Fails
#E54F46rgb(229, 79, 70)Red- vs white3.79Fails
- vs black5.54AA pass
#46E54Frgb(70, 229, 79)Green- vs white1.67Fails
- vs black12.58AAA pass
Tetradic / rectangle
90° + 180°Click any swatch to make it the base color
#4F46E5rgb(79, 70, 229)Blue- vs white6.29AA pass
- vs black3.34Fails
#E5468Crgb(229, 70, 140)Magenta- vs white3.76Fails
- vs black5.59AA pass
#DCE546rgb(220, 229, 70)Yellow- vs white1.37Fails
- vs black15.34AAA pass
#46E59Frgb(70, 229, 159)Green- vs white1.62Fails
- vs black12.97AAA pass
Monochrome
HClick any swatch to make it the base color
#DCDBF0rgb(220, 219, 240)Blue- vs white1.36Fails
- vs black15.43AAA pass
#9995E5rgb(153, 149, 229)Blue- vs white2.70Fails
- vs black7.78AAA pass
#827CEDrgb(130, 124, 237)Blue- vs white3.47Fails
- vs black6.06AA pass
#4F46E5rgb(79, 70, 229)Blue- vs white6.29AA pass
- vs black3.34Fails
#180EB7rgb(24, 14, 183)Blue- vs white11.76AAA pass
- vs black1.79Fails
#0A0470rgb(10, 4, 112)Blue- vs white16.61AAA pass
- vs black1.26Fails
Light and dark preview
17 colors in the paletteOn light
Sample text Aa
On dark
Sample text Aa
Contrast check
Sample text Aa
Contrast ratio 6.29AA pass
Export and preview
:root {
--color-1: #4F46E5;
--color-2: #9C96F0;
--color-3: #DCE546;
--color-4: #BAC31B;
--color-5: #468CE5;
--color-6: #738AEB;
--color-7: #9873EB;
--color-8: #9F46E5;
--color-9: #E54F46;
--color-10: #46E54F;
--color-11: #E5468C;
--color-12: #46E59F;
--color-13: #DCDBF0;
--color-14: #9995E5;
--color-15: #827CED;
--color-16: #180EB7;
--color-17: #0A0470;
}