Random colour generator — pastel, vivid, dark or grey swatches

How to use the random colour generator

1. Choose a Style: Any colour, Pastel, Vivid, Dark or Greys.
2. Set How many colours, from 1 to 100 (6 by default).
3. Press Generate. Swatches appear first, then a table with HEX, RGB and HSL for each colour.
4. Copy the value in the format you need.

What it does and when to use it

Random colours help when you are stuck on a blank page, need placeholder colours for charts or avatars, want sample data for a colour picker, or are building a game or a classroom activity. The style setting is what makes the results usable: pure random colours are often muddy, while a pastel or vivid set looks intentional straight away.

To fine-tune a colour you like, open it in the colour picker. If you want the same input text to always give the same colour, as with user avatars, use the colour hash tool instead of random colours. For random hex values that are not colours, see the random hex generator.

How it works

Random numbers come from crypto.getRandomValues.

• Any colour takes three random bytes and writes them as #rrggbb.
• Pastel, Vivid and Dark draw a hue from 0 to 359 degrees and a saturation and lightness inside the style’s range, then convert HSL to RGB and HEX.
• Greys draw one number from 0 to 255 and use it for red, green and blue.

The table converts each HEX back to rgb(r, g, b) and hsl(h, s%, l%), so all three columns describe exactly the same colour.

Worked examples

Sample output; your colours will differ.

• Any colour, 3 swatches: #ab7034 (a warm brown, rgb(171, 112, 52)), #e6217f (a pink, hsl(331, 80%, 52%)) and #a0ab35 (an olive). The table header is always HEX | RGB | HSL.
• Pastel: #a2f09d and #cc9df0, both 78% lightness in the HSL column.
• Greys: #a5a5a5 and #fdfdfd. Because red, green and blue are equal, the HSL value always starts hsl(0, 0%,.

Limits and tips

• There is no seed, so you cannot get the same set back. Copy colours you like before pressing Generate again.
• Colours are sRGB only; no CMYK or Pantone values are given.
• For accessible designs, check contrast between text and background before you use a random colour.