Color Palette Generator: Random and Matching Colors
This color palette generator creates five-color schemes for websites, logos, slides and art. Press generate for random palettes, lock the colors you love and keep shuffling the rest, or start from your own brand color and get analogous, complementary, triadic or monochrome combinations that are built on color theory.
Everything runs in your browser. Nothing you enter is sent to or stored on our server.
Quick answer: Press Generate or the Space bar for a new random palette. Click Lock under any color to keep it, and click a color to copy its HEX code. To match a brand, pick a base color and choose a scheme such as complementary or analogous.
How to use the color palette generator
- Leave the scheme on Random and press Space until you see colors you like.
- Lock your favourites and keep generating to fill the other slots.
- Or choose a base color, such as your logo color, and a color-theory scheme. The palette updates instantly.
- Copy single colors, the whole HEX list, or CSS variables ready for your stylesheet.
Color scheme types
| Scheme | How it works | Feels |
|---|---|---|
| Analogous | Neighbours on the color wheel | Calm and natural |
| Complementary | Opposite colors, 180° apart | Bold, high contrast |
| Split complementary | A color plus the two next to its opposite | Lively but balanced |
| Triadic | Three colors evenly spaced, 120° apart | Playful and vibrant |
| Tetradic | Four colors in a square, 90° apart | Rich; best with one dominant color |
| Monochrome / shades | One hue at different lightness | Clean and elegant |
Tips for using a palette
- 60-30-10 rule: use one main color for about 60 percent of a design, a second for 30 percent and an accent for 10 percent.
- Contrast for text: body text needs a contrast ratio of at least 4.5:1 with its background to meet WCAG accessibility guidelines. Dark text on the light swatches and white text on the dark ones usually works.
- Neutrals: pair a bright palette with white, off-white or dark grey so the colors have room to breathe.
- Test in context: colors look different on buttons, backgrounds and photos, so try them in a mockup.
Pull colors from a photo with the color picker from image, convert codes with the hex to RGB converter, or browse the classic web safe colors.
FAQ
Can I use these palettes commercially?
Yes. Colors cannot be owned, so use any palette you create for websites, logos, products or print.
How do I save a palette?
Click Copy HEX list and paste it into a note, or copy the CSS variables into your project.
More free tools
See all of them on the QuickOnlineTips free online tools page and play our free online games.