Random Colour Generator

How the Random Colour Generator works

Random colours are useful more often than you might think. Designers use them to break out of habits when starting a mood board. Developers need placeholder colours for avatars, chart series, tags and test data. Teachers and game makers need fair, unpredictable picks. In each case a purely random hex code is rarely what you want, because most of the colour space is muddy browns and greys. Choosing a style first keeps the randomness inside a range that looks deliberate.

How to use the random colour generator

1. Set how many colours you want, from 1 to 24.
2. Pick a style. Any covers the whole space, and the others narrow it.
3. Choose the format you want to copy: hex, rgb() or hsl().
4. Click the arrows on the roll number to get a new set. Each number always gives the same colours, so note it down if you want to come back to a set later or share it with a colleague.
5. Copy the code. It holds a plain list followed by a :root block of custom properties.

How the styles work

Every colour is built in HSL, which describes a colour as hue, saturation and lightness. Hue is picked anywhere on the 360 degree wheel. Saturation and lightness are picked inside the range for the style you chose:

• Any lets saturation and lightness run from 0 to 100%, so you will see the full spread, including near-black, near-white and grey.
• Vibrant keeps saturation high and lightness in the middle, where colours are at their most intense.
• Pastel keeps lightness between 80 and 90% with moderate saturation, giving soft, chalky tones that work as backgrounds and tags.
• Muted keeps saturation low, which suits calm, editorial palettes.
• Dark keeps lightness low, which suits dark mode surfaces and text accents.
• Light keeps lightness very high, close to tinted white.
• Greyscale sets saturation to zero, so only lightness varies.

The swatch label switches between dark and light text depending on how bright the colour is, so every value stays readable in the preview.

Why a roll number instead of pure chance

The generator uses a small seeded random number function. Feeding it the same seed always gives the same sequence, so roll 42 produces identical colours on every device and every visit. That makes results reproducible: you can put the roll number in a design ticket, a test fixture or a classroom handout, and everyone sees the same set. Change the count or style and the same roll gives a different but equally repeatable set.

Choosing a format

Hex is the most compact and is accepted everywhere, including design tools. rgb() is handy when you later want to add transparency. hsl() is the easiest to edit by hand, because you can lighten a colour by raising its last number or shift it by changing the first. All three are supported in every browser, and the space-separated syntax used here has been standard since 2020.

Tips and pitfalls

Random is not the same as harmonious. Colours picked independently can clash. For a palette you will ship, use a random roll for inspiration, then build the final set from one colour with a palette or harmony tool.

Check contrast before using a colour for text. Many pastel and light colours fail contrast against white, and many dark colours fail against black. Run anything that carries text through a contrast checker.

HSL lightness is not perceived brightness. A yellow and a blue at the same HSL lightness look very different in brightness. If a set must feel even, compare the swatches by eye and re-roll.

Rounding changes the value slightly. Hex and rgb() values are rounded to whole numbers, and hsl() values to whole degrees and percentages, so converting between formats may shift a value by one step. That difference is invisible on screen.

Avoid colour as the only signal. If random colours mark categories in a chart, add labels or patterns as well, because some visitors cannot tell certain hues apart.

Reading the result

The preview shows each colour as a swatch with its value printed on it. The code box lists the values one per line, ready for a spreadsheet or a script, and then the same colours as numbered custom properties, --colour-1 onwards, ready for a stylesheet.

Related tools