Free tool
Random Colour Generator With Moods and Locked Colours
Get a fresh colour or a set of up to twelve each time you press the space bar. Pick a mood to narrow the result, lock the ones you like, and copy the codes.
Press Space for new colours. Click a code to copy it. Lock a colour to keep it.
Colours are chosen in your browser from its secure random generator and nothing is sent anywhere. Your last count and mood are kept on this device only.
When a random colour is the right tool
Sometimes a designer has no brief yet, only a blank board. A random roll breaks the habit of reaching for the same blue every time. It is also handy for placeholder data, a quick test of a layout, or picking a colour for a tag, a chart series or an avatar background.
Press New colors or the space bar and the set refreshes. Every card shows the colour with its HEX, RGB and HSL values, and a click on a code copies it. If one card is close to what you want, lock it. The next roll then replaces only the unlocked ones, so you can keep nudging towards a set that works without losing the good one.
Count and mood
| Control | Choices |
|---|---|
| How many | 1, 3, 5, 8 or 12 colours |
| Mood | Any colour, Pastel, Vivid, Dark, Light, Warm, Cool, Greys |
With Any colour the roll is wide open. The other moods limit how light, how strong or which side of the colour wheel a colour can come from, so a Pastel roll will not return a deep navy, and a Dark roll will not return a pale yellow.
Moods are worked out in OKLCH, a colour model where lightness is more even to the eye, and the result is then fitted into the range a normal screen can show.
Taking the colours with you
- Copy as CSS gives you the set as CSS variables.
- Save PNG downloads the cards as a colour strip image for a mood board or a chat message.
- Copy link makes a web address that opens the same set, so you can send it to a teammate.
- Clicking a single code copies just that value.
A random set is a starting point, not a finished palette. If you like a set and want to refine the harmony, move it into the colour palette generator and check text contrast there.
What random colours will not do for you
A roll gives you colours that are valid, not colours that work together or read well as text. Keep these points in mind.
- Two colours from one roll can look close together. Spread them out before using them side by side.
- A pleasant colour on a swatch can still fail as a text colour on white. Test the pair before use.
- Greys are a mood too, which helps when you want a neutral base for a page.
When you do pick a set for a real site, an extra look at your hero area helps. Our guide on hero section design shows how colour supports the first screen.
Ways designers put a roll to use
- Roll a set of five with the Any colour mood and lock the one that surprises you.
- Switch the mood to Cool or Warm and roll again, so the new cards lean the same way as your locked colour.
- Copy the set as CSS, drop it into a test page, and see whether any pair reads badly together.
Another use is data. A chart with eight series needs eight colours that can be told apart, and the How many menu offers exactly that. Roll, lock the ones that stand out from each other, and roll the rest again until the set is clear.
Dark and Light moods suit backgrounds for cards or sections, since their lightness stays in a narrow band. Vivid suits buttons, badges and highlights, where a strong colour is the point.
Frequently asked questions
Is the colour really random?
The numbers come from your browser's secure random generator. The mood you pick then limits the range, so the result is random within that mood.
How do I keep a colour I like?
Lock its card. Rolling again only replaces the colours that are not locked.
What does the Greys mood give me?
It returns neutral colours with little or no tint, handy for backgrounds, borders and text.
Can I get more than twelve colours?
Not in one roll. The choices are 1, 3, 5, 8 and 12, and you can roll again to see more.
What do I get when I copy as CSS?
The set is written as CSS custom properties you can paste into a stylesheet. You can then rename them to match your project.
Does the tool remember my settings?
It remembers your last count and mood on your own device. Nothing is stored anywhere else.
More free tools
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- HEX to RGB converter: Convert a colour between HEX, RGB, HSL, HWB, OKLCH and CMYK, singly or as a list.
- Lighten and darken colour tool: Lighten or darken a colour, build 50 to 950 scales, and copy them as CSS, Tailwind, SCSS or JSON.
- CSS gradient generator: Build linear, radial and conic CSS gradients with colour stops and copy CSS or a Tailwind class.