Generate random color palettes with hex codes.
This generates colour schemes you can copy straight into a design or stylesheet, with hex and RGB values for each swatch. A palette is more than a set of colours you like individually — the useful part is the relationships between them, which is what makes an interface feel coherent rather than assembled.
Most palettes follow one of a handful of relationships based on hue angle around the colour wheel.
| Scheme | Relationship | Character |
|---|---|---|
| Monochromatic | One hue, varying lightness and saturation | Calm, unified, very safe |
| Analogous | Hues 30 degrees apart | Harmonious, natural |
| Complementary | Hues 180 degrees apart | High contrast, energetic |
| Split complementary | A hue plus the two either side of its complement | Contrast without the harshness |
| Triadic | Three hues 120 degrees apart | Vibrant, balanced, hard to control |
| Tetradic | Two complementary pairs | Rich but needs one dominant colour |
Complementary pairs are the most commonly misused. Placing two fully saturated complements adjacent at the same lightness causes visual vibration — the edge appears to shimmer. Desaturating one or shifting their lightness apart resolves it.
A reliable distribution borrowed from interior design: roughly 60% a dominant neutral, 30% a secondary colour, 10% an accent. In an interface that usually means a light or dark background, a supporting colour for surfaces and secondary elements, and a saturated accent reserved for buttons and links.
The most common mistake in amateur palettes is using the accent too generously. If everything is highlighted, nothing is — the accent's job is to draw the eye to the one thing that matters on the screen.
Interfaces need a working set well beyond the two or three colours a brand guideline specifies:
Deriving these systematically rather than picking each by eye is what makes a palette scale. Fix hue and saturation, vary lightness in even steps, and the family stays consistent.
Roughly 8% of men and 0.5% of women have some form of colour vision deficiency, most commonly difficulty distinguishing red from green. A palette that relies on a red/green distinction to convey meaning is unreadable to a substantial minority of users.
WCAG contrast requirements are the concrete standard: 4.5:1 for normal text, 3:1 for large text and for meaningful interface components. Two practical consequences follow. Saturated yellows and light greens almost never pass against white, however vivid they look. And a colour that passes as a background may fail as text on that same background, since contrast is a property of the pair.
The reliable test is to view the interface in greyscale. If the information is still legible without any colour, the design is not depending on hue alone.
Hex values are opaque to reason about. Building a palette in HSL makes the relationships explicit — an analogous scheme is a fixed saturation and lightness with hue stepped by 30, and a tint ramp is a fixed hue with lightness stepped evenly. Once the palette is settled, convert to hex for use with our hex to RGB converter.
One subtlety: equal steps in HSL lightness do not produce equal steps in perceived lightness, because human vision responds differently to different hues. A yellow at 50% lightness looks far brighter than a blue at 50%. Perceptually uniform spaces such as LCH or OKLCH correct for this and are increasingly supported in CSS.
Three to five distinct hues is plenty, plus a neutral ramp of five to nine steps and four semantic colours. Most of an interface is built from neutrals; the brand colours appear far less often than people expect.
A distribution guide: about 60% dominant neutral, 30% secondary colour, 10% accent. Overusing the accent is the most common palette mistake — its purpose is to draw attention to one thing, which fails if everything uses it.
Measure contrast ratios: 4.5:1 for normal text, 3:1 for large text and interface components. Then view the design in greyscale — if the information is still clear without colour, you are not relying on hue alone.
Two fully saturated complements at similar lightness cause visual vibration at their shared edge. Desaturate one, or move their lightness values apart, and the pairing settles down.
HSL for creating and adjusting a palette, because it separates hue from lightness and makes relationships explicit. Hex for storing and sharing the final values, since it is the convention in CSS and design tools.