Random Palette Generator

How to use Random Palette Generator

1. Choose a base colour, usually your brand or accent hue.
2. Pick a harmony and review the generated swatches.
3. Copy the hex values you want, then check any text pair with the contrast checker.
4. Build tints and shades by varying lightness on the hues you kept.
5. Harmonies are hue rotations: complementary 180°, triadic 120°, analogous ±30°.
6. A generated palette is a starting point — most good interface palettes are mostly neutral with one accent.
7. Always verify text and background pairs against WCAG contrast before using them.

What the harmonies actually are

They are positions on the hue wheel, nothing more mysterious. Complementary is the hue directly opposite, 180° away, giving maximum contrast and tension. Analogous takes neighbours 30° either side, which is calm and cohesive because the hues share a family. Triadic takes two hues 120° apart for vivid balance. Split-complementary takes the two neighbours of the complement, keeping most of the contrast while softening the clash. They are starting points, not rules — a palette that follows a harmony exactly often looks mechanical.

A harmony is not yet a usable interface palette

Five equally saturated hues will make an unusable product. Real interface palettes are mostly neutral: a near-white background, a near-black text colour, three or four greys, one accent used sparingly for actions, and semantic colours for success, warning and danger. The 60-30-10 guideline is the useful version of this — 60% dominant neutral, 30% secondary, 10% accent. Use the harmony to pick the accent and its supporting tone, then build the neutrals around them.

Hue harmony does not guarantee readable contrast

Two colours can be perfectly complementary and completely unreadable together, because contrast depends on luminance rather than hue. Saturated red text on a saturated green background is a textbook complementary pair and fails WCAG badly. Every colour pair intended for text has to be checked separately against a contrast ratio, and it is worth doing before you commit to a palette rather than after the design is built around it.

Building tints and shades

A palette needs more than one value per hue: a button needs a hover state, a background needs a subtle variant, a border needs something between. The reliable way is to hold the hue and saturation and walk the lightness in even steps — which is exactly what HSL makes easy and hex makes impossible to do by eye. Be aware that equal lightness steps are not equally spaced perceptually; yellows look much brighter than blues at the same HSL lightness.