Random Color Generator

Press a button for a batch of random colours, as hex, RGB or HSL. You can steer the mood with soft pastels, bright vivid colours or deep dark tones, or leave it open. It's a quick source of ideas and placeholder colours.

How to use it

Choose how many colours you want.
Pick the format and style.
Press Generate colours.
Copy any you like.

When it helps

Finding inspiration for a design.
Placeholder colours for charts or avatars.
Testing a theme with unexpected values.
Picking an accent at random.

Good to know

Pastels are high lightness and moderate saturation; vivid ones are fully saturated at medium lightness.
Press the button again for a fresh set.
Check contrast before using any colour for text, and try the Color Harmony Generator on your favourites.

How the colours are chosen

Each colour picks a random hue from 0 to 360, then a saturation and lightness from a range that depends on the style you choose. Pastels use moderate saturation and high lightness, vivid colours use high saturation and medium lightness, and dark colours use low lightness.

Choosing in HSL rather than RGB avoids the many dull, muddy colours that pure random RGB gives.

Worked example: avatar backgrounds

For default profile pictures, generate a dozen pastel colours, copy the hex values into an array, and choose one based on a hash of the user's name, so each user always gets the same colour. White text with a bit of shadow reads well on most of them.

For charts, choose vivid colours and check them against colour blindness issues.

Random versus designed

Random colours are great for exploration and placeholders, but a finished design needs coherence. Take a few you like and build around them with the Color Harmony Generator and Color Shades Generator.

Avoid using several random vivid colours together, since they clash unless they were chosen to fit.

Formats

Hex is the most common format on the web, RGB is common in code, and HSL is best when you want to adjust lightness or saturation afterwards. You can paste any of these into CSS.

Use the Color Converter to switch between formats.

Using random colours in code

You can generate colours in JavaScript with HSL: pick a random hue, keep saturation and lightness fixed, and the result is always pleasant. Use this tool to experiment with values, then copy the pattern into your code.

For repeatable colours, derive the hue from a hash of a name or id.

Saving your favourites

When you find colours you like, copy them into a note straight away. Generating again replaces the set, and it's hard to find the same combination twice by chance.

Accessibility reminder

Random colours don't guarantee readable pairs. If you use two of them as text and background, check their contrast ratio and adjust the lightness until it passes.