Color Palette Generator
Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.
What this tool does
Color palette generator built from a base color. Pick the scheme (analogous, complementary, triadic, tetradic or monochromatic) and the number of colors you want back.
Pair the palette with gradient generator, or run any color through color converter to see it in HEX, RGB and HSL.
What you can use it for
- Build a brand palette from one primary color.
- Generate monochromatic variants for a design system.
- Find complementary colors for UI accents.
- Try triadic schemes for illustration or branding work.
How to use it
- Type the base color in any format.
- Choose the color scheme.
- Adjust how many colors you want in the palette.
- Copy each color with a click or download the full list.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
When to use each scheme
Every color scheme has its own character. If in doubt, this quick guide helps you pick the one that matches your intent.
- Analogous
- Colors next to each other on the wheel. Soft, coherent, no aggressive contrast.
- Backgrounds, illustrations, sober branding
- Complementary
- Two opposite colors. Strong contrast that grabs the eye.
- CTAs, icons, accents
- Triadic
- Three colors at equal distance on the wheel. Vibrant and balanced.
- Playful illustration, vibrant brands
- Tetradic
- Two complementary pairs. Lots of variety, requires balancing.
- Large design systems
- Monochromatic
- Variations of a single tone. Clean and professional.
- Dashboards, premium brands
Pairs well with
Other tools people reach for in the same flow.
- Color Converter: HEX, RGB, HSL
convert colors between HEX, RGB and HSL
Once you have the base color.
- CSS Gradient Generator
build CSS gradients
Turn your palette into a gradient.
- Color Contrast Checker (WCAG)
check WCAG color contrast
Once you have the base color.
- CSS Box Shadow GeneratorNew
build CSS box shadows
Once you have the base color.
Related tools
DesignCSS Gradient Generator
Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.
Color Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.
CSS Box Shadow Generator
Build a CSS box-shadow with a live preview: set the offset, blur, spread, color and opacity, then copy the code. Free and in your browser.
Frequently asked questions
What is an analogous scheme?
Analogous uses colors next to each other on the color wheel. It produces soft, coherent palettes, ideal for backgrounds or illustrations that need visual harmony.
When does a complementary scheme make sense?
Complementaries are colors that sit opposite each other on the wheel. They produce a lot of contrast and are perfect for accents, calls to action or icons that need to stand out.
What about triadic or tetradic?
Triadic uses three colors at equal distance on the wheel and creates vibrant, balanced palettes. Tetradic adds a fourth color for more variety, but you have to balance the visual weights carefully so it doesn't clash.
Can I export the palette to another format?
You can copy each color in HEX or RGB for now. To export to a design token or CSS variable, copy the value and adapt it to your system's naming.