Color Palette Generator
Pick a single base color and instantly generate a 5-color palette built on color theory — complementary, analogous, and triadic schemes, and more. Copy each color as HEX, RGB, or HSL, export the whole palette as CSS variables (:root) in one click, and check contrast against white or black text.
This tool has been used … times.
Color Harmony Patterns and How to Choose
Color harmonies are patterns based on where colors sit on the “color wheel”. Depending on which angle you combine with your base color, the overall impression of the palette changes a great deal.
Analogous
A combination of colors that sit next to each other on the color wheel. Cohesive and calm, with a natural feel. A safe first choice when you’re not sure where to start.
Complementary
A combination of colors directly opposite each other (180 degrees) on the color wheel. High contrast, and well suited to an accent you want to stand out.
Triadic
Three colors spaced evenly around the wheel, 120 degrees apart. Well balanced, and good for a vivid, playful palette.
Split Complementary
Uses the two colors next to the complementary color instead of the complementary color itself. Less intense than a pure complementary scheme, while still balancing contrast and harmony.
Tetradic
Four colors forming a rectangle on the color wheel. More colors make for a livelier palette — pick one as the dominant color to keep it cohesive.
Monochromatic
A single hue at varying levels of lightness. The most unified option, giving a simple, elegant result.
How to Use
- 1. Choose a base color
- Pick a color from the round swatch on the left, or type a HEX code directly. You can also click “Random” to get a suggestion.
- 2. Choose a harmony pattern
- Click a button such as “Analogous” or “Complementary” to automatically generate a 5-color palette based on that color theory.
- 3. Copy the code
- Click any color to copy its code in the selected format (HEX / RGB / HSL). Use “Copy as CSS Variables” to get a ready-to-use
:rootvariable block. - 4. Check the contrast
- Each swatch shows an “Aa” preview and its contrast ratio against white/black text, so you can decide which text color to use.
Frequently Asked Questions
I don’t know how to pick a color scheme. Where should I start?
Start by choosing one main color, then try “Analogous” or “Triadic”. Analogous or Monochromatic work well when you want a cohesive look, while Complementary is great for making one part of the design stand out.
What does “complementary color” mean?
On the color wheel — red, yellow, green, blue, and so on arranged in a circle — complementary colors sit directly opposite each other. Orange, for example, is the complementary color of blue. Because they bring out the best in each other, they work well as accent colors.
Can I use the generated palette directly in a website or CSS?
Yes. Click “Copy as CSS Variables” to copy a block in the form :root { --color-1: #…; } that you can paste straight into your CSS. Copying individual HEX, RGB, or HSL codes is also supported.
How can I tell if text will be easy to read on a color?
Use the contrast ratio shown on each swatch (for example, 4.5:1) as your guide. A ratio of 4.5:1 or higher (WCAG AA) is recommended for body text, and 3:1 or higher for large text.