Color harmony basics
| Scheme | How it works | Feels |
|---|
| Analogous | Hues next to each other on the color wheel | Calm, natural |
| Complementary | Two hues opposite each other | Bold, energetic |
| Triadic | Three hues evenly spaced (120° apart) | Vibrant, balanced |
| Monochrome | One hue, many lightness levels | Elegant, cohesive |
The 60-30-10 rule
A simple way to apply a palette: use your main color for about 60% of a design (backgrounds), a second color for 30% (sections, cards) and an accent for 10% (buttons, links). Keep one very light and one very dark color for text and backgrounds.
Accessibility
Text must stand out from its background. The WCAG guideline asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Each swatch shows whether white or black text passes, so you can pick readable combinations from the start.
Building a QR code in your brand colors? Try the QR code generator.
Last reviewed October 2026.
Frequently asked questions
How do I use the color palette generator?
Press Generate (or the space bar) for a new palette. Lock any color you like by tapping its lock icon, and keep generating until the rest fits. Click a color code to copy it.
What are the palette styles?
Analogous uses neighboring hues for a calm look. Complementary pairs opposite hues for contrast. Triadic uses three evenly spaced hues. Split complementary softens a complementary scheme. Monochrome uses one hue in different shades. Pastel creates soft, light colors. Random is anything goes.
Can I start from my brand color?
Yes. Enter a hex code in "Base color" and the generator builds schemes around that hue.
What does the contrast label mean?
It shows whether white or black text on that color meets the WCAG accessibility contrast ratio of 4.5:1 for normal text (AA). Use it to pick readable text colors for buttons and backgrounds.
How do I use the palette in my project?
Copy the CSS variables for a website, the hex list for design tools like Figma or Canva, or download a PNG swatch image to share with clients.