Random Color Generator

Generate a fresh palette of random colors with HEX, RGB, HSL, and OKLCH values. Lock the ones you like and regenerate the rest.

Studio · neutral surround
6

Features

Generate 6-12 colors
HEX/RGB/HSL values
Click to copy
Lock colors

How to Use

1. Press Space (or Generate) to fill the stage with random colors.

2. Lock the ones you like — locked tiles survive the next roll. Click any tile to copy its value.

3. Switch the value format (HEX / RGB / HSL / OKLCH) on the rail, or copy the whole set at once.

About this tool

Sometimes the fastest way to find a colour direction is to let chance suggest one. This generator fills the stage with 3 to 12 random colours drawn from the browser's cryptographically secure random number generator, and shows each one as HEX, RGB, HSL or OKLCH along with an approximate colour name. Press Space or Generate to roll again; lock any tile you like and it survives the next roll, so you can build a set step by step. Click a tile to copy its value, or copy the whole set at once. Random colours are great for inspiration, test data, avatar backgrounds and chart placeholders, but for a brand or interface palette, refine the results for harmony and check text contrast before using them.

Frequently Asked Questions

How are the random colours generated?
Values come from crypto.getRandomValues, the browser's secure random source, so every one of the 16.7 million 24-bit RGB colours is equally likely and results are not repeated in a predictable pattern.
How do locked colours work?
Locking a tile keeps its colour when you generate again, while unlocked tiles get new random colours. This lets you keep the colours you like and keep rolling for the rest.
Which value format should I copy?
HEX is the most widely accepted in design tools and CSS. HSL is easier to tweak by hand, and OKLCH is useful when you want to adjust lightness consistently across colours in modern CSS.
Can random colours make an accessible palette?
Not on their own. Random pairs often have poor contrast. Use them as a starting point, then check any text and background combination with a contrast checker against WCAG AA.
How do I get softer or more vivid random colours?
Every RGB value is equally likely here, so results range from muted to vivid. Copy a colour you like into the Color Converter and lower its saturation for softer tones or raise it for more vivid ones, or use the Palette Generator to build a harmonious set from it.

Related Tools