Random Color Palette Generator

Create a random color palette based on real color theory. Choose a color scheme and a style, generate until you like the result, lock your favorite colors and keep shuffling the rest.

Color schemes

• Analogous: neighboring hues on the color wheel. Calm and natural.
• Complementary: opposite hues for strong contrast.
• Triadic: three hues evenly spaced around the wheel. Lively and balanced.
• Split complementary: a base color plus the two hues next to its opposite.
• Monochrome: one hue in several shades, from dark to light.
• Fully random: anything goes.

How to use it

1. Choose how many colors you want (5 is a common palette size).
2. Pick a scheme and a style, such as pastel or muted.
3. Press Generate palette, lock colors you love, and generate again.
4. Use Copy all to copy CSS variables or JSON for your project.

Using your palette

A simple rule of thumb is 60-30-10: use one color for most of the design, a second for about a third, and a bright accent for the remaining tenth. Check the contrast rating on each swatch before using a color behind text.

Keep, copy and share your colors

Every result has a lock button. Locked results stay put when you generate again, so you can keep the colors you like and reroll the rest. The history panel keeps your earlier results, and the back arrow takes you to the previous set if you generated one time too many. Press Wheel to put the current results on a spinning wheel and pick one with a bit of drama.

Use Copy to copy the results as a plain list, CSV or JSON, or download them as a file. Share copies a link that shows exactly the same results to whoever opens it, which is handy for games, classes and group chats.

Building a palette you can use

Most designs use one main color, one or two supporting colors and one accent. Generate a palette, lock the color you like most, and keep generating until the others work with it. Try the same palette in Light and Dark styles to get backgrounds and text colors that belong together. Before you use a pair of colors for text, check the contrast rating on each swatch. Body text needs a contrast ratio of at least 4.5:1 to meet WCAG AA.

Copy as CSS variables gives you code you can paste straight into a stylesheet, and Download .css saves the same thing as a file.

Frequently asked questions