Random Color Palette
Generate random color palettes as hex values.
Overview
The Random Color Palette tool generates a coordinated set of hex colour values you can lift straight into a Tailwind config, a brand-board mockup or a CSS variables block. Pick how many colours to produce and the tool returns swatches that play nicely together — not just random RGB triples.
This tool is aimed at designers exploring a new colour direction, frontend developers prototyping themes and educators teaching colour theory. Long-tail searches like "random colour palette generator hex", "five-colour scheme for website" and "random tailwind palette" all resolve here.
How it works
Rather than picking RGB triples uniformly (which produces muddy palettes), the generator works in HSL space. It samples a base hue from the cryptographic random source, then either spreads complementary hues across the wheel (triadic, tetradic, analogous) or holds the hue fixed and varies the saturation/lightness (monochromatic). Saturations are clamped to a pleasing band (40-90%) and lightnesses to 35-75% to avoid washed-out or oversaturated swatches.
Each output HSL value is converted to RGB using the standard piecewise formula and then to a six-character lowercase hex string. The first swatch is typically the "anchor" colour, with the rest arranged in a visually coherent relationship to it. Refreshing the palette draws a new base hue and re-runs the harmony rule.
Examples
Triadic anchor → #2a7fbf · #bf2a7f · #7fbf2a
Analogous 5 → #1f6fb5 · #1fa1b5 · #1fb59a · #1fb56f · #1fb540
Monochromatic → #143b66 · #1f5996 · #2c7ac8 · #6ba7e0 · #b4d2f0
Tetradic 4 → #c0392b · #2ecc71 · #2980b9 · #f1c40f
FAQ
Are the colours accessible?
Adjacent swatches do not always meet WCAG contrast. Pair the palette with the dedicated Contrast Checker to validate text/background combinations.
Can I pick a specific harmony rule?
Yes. Choose triadic, tetradic, analogous, monochromatic or random. The default mixes the harmony rule on each refresh.
Do the palettes export to Tailwind config?
Hex values copy straight into tailwind.config.js under theme.extend.colors. Pair the swatches with named tokens such as brand-50 through brand-900 for shade ramps.
Is the output stable for the same click?
No. Each refresh draws a new base hue from the cryptographic source. Copy the hexes if you want to lock the palette in.
Why HSL and not LAB?
HSL is fast to compute and visually intuitive. LAB would give more perceptually-uniform spacing but adds complexity for a tool that prioritises quick iteration.