Random Color Palette Generator

Pick a color scheme, then press the spacebar or the button for a new palette. Lock the colors you like.

Missing a tool?

Tell us what you'd like us to build next. We read every suggestion, and your email is optional.

What this tool does

The Random Color Palette Generator makes five-color palettes from a color scheme of your choice. Lock the colors you like, keep generating until the rest fit, and copy any hex code with one click.

How to use it

  1. Pick a scheme (Analogous is the default).
  2. Press the spacebar or the Generate button for a new palette.
  3. Click the padlock on a color to keep it. The scheme then builds the other colors around the locked one.
  4. Click a hex code to copy it.

The color schemes

  • Analogous: neighbors on the color wheel (within about 40°). Calm and easy to combine.
  • Complementary: a hue and its opposite, such as blue and orange. High contrast and energetic.
  • Triadic: three hues evenly spaced around the wheel. Lively but still balanced.
  • Monochrome: one hue from dark to light. Clean and safe.
  • Random: any five colors, for inspiration.

Every scheme also spreads the lightness, from a dark shade to a light one, so the colors stay distinct.

Putting a palette to work

A common rule from interior and web design is 60-30-10: about 60% of the space in a dominant color, 30% in a secondary color and 10% in an accent. Light or dark palette colors often work as the 60%, and a bright one as the 10%.

Check the contrast for text

Text must stand out from its background. The Web Content Accessibility Guidelines (WCAG 2.2) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Each swatch here labels its hex code in black or white, whichever has the higher contrast, which is a quick hint for which text color suits that background.

What hex codes mean

A hex code like #1E90FF is three pairs of hexadecimal digits: red, green and blue, each from 00 (none) to FF (full, 255). #1E90FF is red 30, green 144 and blue 255, a bright blue. That gives 256 × 256 × 256, about 16.8 million possible colors.

A worked example

Say the Analogous scheme gives #1B4965, #5FA8D3, #62B6CB, #BEE9E8 and #CAE9FF. Following 60-30-10, use the lightest (#CAE9FF) or white for the page background, a mid blue such as #5FA8D3 for cards and headers, and the darkest, #1B4965, as the accent for buttons and links, with white text on it. Lock the colors you keep and generate again to try other accents. Then check each text color against its background before you commit.

Frequently asked questions

Can I use these palettes in my projects?

Yes. The colors are generated in your browser, and you can use them however you like.

Why do I get a different palette every time?

Each palette starts from a random base hue and adds small random shifts in hue, saturation and lightness, so no two are the same. Lock a color to keep it while the others change.

Related tools: CSS Gradient Generator, Favicon Generator and Box Shadow Generator.

Sources: W3C, WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum) and its definition of relative luminance. Last reviewed on SuiteWebTools: October 2026.