Random Color Generator

A random color generator that gives you usable colours

The Random Color Generator creates between 1 and 50 random colours at a time and shows each one as a large swatch with its HEX, RGB and HSL codes. Tap any code to copy it, lock the colours you like, and generate again until the whole set works together.

Pure randomness tends to produce muddy browns and olive greens, so you can also steer the result. Choose pastel, vibrant, dark, light or greyscale, or limit the colours to a hue range such as “blues and teals”. Under the hood those styles use the OKLCH colour space, which matches how bright and colourful people actually perceive a colour.

Designers use it to break out of habits, developers to fill placeholder UI and test data, teachers and artists for warm-up exercises, and anyone who just wants a fresh colour for a poster, a slide or a bedroom wall. Everything runs in your browser using its cryptographic random number generator; nothing is uploaded.

How to use the Random Color Generator

1. Choose a Colour style: any colour, pastel, vibrant, dark, light or greyscale.
2. Set How many colours you want, from 1 to 50.
3. Optionally tick Limit to a hue range and drag the From and To sliders — the bar previews the hues you will get.
4. Press Generate colours (or the Space bar). Tap a HEX, RGB or HSL code on a swatch to copy it.
5. Click the padlock on colours you want to keep, then generate again to replace only the unlocked ones.
6. Pick CSS, JSON or HEX list under Export palette and copy or download the code.

Random Color Generator features

Why OKLCH makes better random colours

HSL is convenient but not perceptual: at the same “lightness” value, yellow looks far brighter than blue, and the green part of the hue wheel takes up a huge slice. Random HSL colours therefore look uneven. OKLCH, published by Björn Ottosson in 2020 and now part of CSS Color Level 4, describes a colour by perceived lightness (L), chroma or colourfulness (C) and hue angle (H). Equal steps in L look like equal steps in brightness for every hue.

Each style picks L and C inside a band, then the colour is mapped back into the sRGB gamut your screen can show. Vibrant colours go further: for each random hue the generator finds the lightness where that hue can be most saturated and stays close to it, so yellows come out bright and blues deep instead of washed out.

What each style produces

How the readable text colour is chosen

For every swatch the tool calculates the colour’s relative luminance with the WCAG 2 formula — 0.2126 × R + 0.7152 × G + 0.0722 × B on linearised channel values — and compares the contrast ratio against black and against white. The higher one wins. Because of how the formula works, the better of the two is always at least about 4.58:1, which passes WCAG AA for normal text.

If you plan to put coloured text on a coloured background, check the exact pair in the Contrast Checker. To turn one random colour into a set of tints and shades, use the Color Shades Generator, or build a harmony around it with the Color Palette Generator.

Tips for building a palette from random colours

• Generate with “Vibrant” until one accent colour stands out, lock it, then switch to “Light” or “Dark” to fill in backgrounds around it.
• For brand work, keep one or two saturated colours and let the rest be near-neutrals — too many vivid colours compete for attention.
• Use a narrow hue range (30–60°) for calm analogous palettes, or a wrapped range such as 330° → 30° for warm reds and pinks.
• Convert a favourite into other formats, such as CMYK or OKLCH, with the Color Converter.