Random Color Generator
Generate a random color palette in one click. Lock the swatches you like, re-roll the rest, and copy the result as a HEX list or ready CSS variables.
HEX list
#56f498 #56943f #c979a9 #a1774c #926b53 #f8cbf3
CSS variables
:root {
--color-1: #56f498;
--color-2: #56943f;
--color-3: #c979a9;
--color-4: #a1774c;
--color-5: #926b53;
--color-6: #f8cbf3;
}What is the Random Color Generator?
The Random Color Generator creates a grid of random colors — choose how many, from 2 to 12 — each shown as a large swatch with its HEX code.
- Generate 2–12 random colors at once
- Lock individual swatches and re-roll the rest
- Click any swatch to copy its HEX
- Export as HEX list or CSS custom properties
- Large, clear swatch grid
- Fully client-side and free
How to use the Random Color Generator
- 1
Choose how many colors to generate.
- 2
Click Generate to roll a fresh palette.
- 3
Click the lock icon on any swatch you want to keep, then Generate again.
- 4
Copy a single HEX by clicking its swatch, or export the whole palette as a HEX list or CSS variables.
About the Random Color Generator
The Random Color Generator creates a grid of random colors — choose how many, from 2 to 12 — each shown as a large swatch with its HEX code. Found one you love? Lock it, then keep generating: locked swatches stay put while the rest re-roll, letting you evolve a palette piece by piece.
When the set is right, export it your way: copy all HEX codes as a plain list, or copy ready-to-paste CSS custom properties for your stylesheet. Individual swatches copy their own HEX with a click.
Randomization uses your browser's local random number generator — nothing is sent anywhere, and the tool is free with no sign-up.
Frequently asked questions
How do I generate a random color?
Click Generate and the tool picks three random numbers from 0 to 255 for the red, green and blue channels, then combines them into a HEX code. Every one of the 16.7 million possible sRGB colors has an equal chance of appearing, so each roll is a fresh random color.
Do you have a random colour generator (UK spelling)?
Yes — 'colour' is simply the British spelling of 'color', so this random colour generator works exactly the same way. Every generation produces new random colours as HEX codes you can lock, re-roll and copy.
Can I keep some colors and randomize the others?
Yes — that is the lock feature. Toggle the lock on any swatch and it survives every re-roll, so you can anchor a palette around one or two keepers while exploring options for the remaining slots.
How do I use the CSS variables export?
Copy the CSS variables output and paste it inside a :root { } block in your stylesheet. Each color becomes a custom property like --color-1 that you can reference anywhere with var(--color-1).
Why do random colors often clash?
Truly random colors ignore color-harmony rules, so hues can land anywhere on the wheel. Use random generation for inspiration and starting points, then refine with a harmony-based tool like our Color Palette Generator for polished schemes.
How many colors can I generate at once?
Between 2 and 12 per roll. Six is a good default for exploring; larger grids are useful when you are hunting for a specific vibe and want more candidates per generation.
Guides for Random Color Generator
Related tools
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from any base color. Click any swatch to copy its HEX code fast.
Color Picker
Pick any color and get its HEX, RGB and HSL values instantly. Free online color picker with shades, tints and one-click copy for designers and developers.
HSL to HEX Converter
Convert HSL values to HEX and RGB with live hue, saturation and lightness sliders. Watch the color swatch update in real time and copy the color codes.
Contrast Checker
Check the contrast ratio between text and background colors against WCAG AA and AAA standards. Live preview, pass/fail badges and a one-click color swap.