Stax

Random Color Generator

Generate random colour palettes in pastel, vivid, dark, or monochrome.

#352079
#7DD9A6
#A1C20F
#BD9ECC
#0D92BA
#352079
rgb(53, 32, 121)
#7DD9A6
rgb(125, 217, 166)
#A1C20F
rgb(161, 194, 15)
#BD9ECC
rgb(189, 158, 204)
#0D92BA
rgb(13, 146, 186)

🔒 Lock individual colours before regenerating to keep them in the palette. Click any swatch or the palette strip to copy its hex code.

When to use random colour generation

Random colour generators are a starting point for design exploration. They break creative blocks, spark unexpected combinations, and can reveal colour relationships you would not have chosen deliberately. Use them for: mood boards, brand colour exploration, data visualisation palettes, and quick prototyping.

Building a usable palette from random colours

A working design palette typically needs one primary colour, one or two accent colours, and neutral backgrounds. Generate a vivid palette, lock the one colour that resonates most as your primary, then switch to pastel mode and regenerate to find matching backgrounds and surfaces. The lock feature makes this workflow smooth.

Colour accessibility

Random colours do not guarantee accessible contrast ratios. After choosing your palette, check foreground/background pairs in the Colour Contrast Checker to ensure WCAG AA compliance (4.5:1 for normal text, 3:1 for large text). Vivid and dark palettes are more likely to pass; pastel backgrounds with white text often fail.

Frequently asked questions

How are the colour palettes generated?
Each colour is generated in HSL colour space with randomised hue (0–359°), and saturation/lightness ranges tuned for the selected style. Pastel colours have high lightness (75–90%) and low-medium saturation. Vivid colours have high saturation (80–100%) and medium lightness. Dark colours have low lightness (15–35%).
What does the lock feature do?
Clicking the lock icon on a colour swatch locks that colour in place. When you click Generate, locked colours stay unchanged while unlocked colours are randomised. This lets you build on a colour you like — keep your brand primary colour locked and explore complementary accent colours.
How do I use random colours in my design?
Copy the hex code by clicking the swatch or the Copy button. Paste directly into Figma, Sketch, Adobe XD, CSS, or any design tool. The 'Copy All' button copies all hex codes as a comma-separated list, useful for pasting into design token files.
What is the difference between pastel and vivid colours?
Pastel colours have high lightness and low saturation — they appear soft, light, and muted. Good for backgrounds, cards, and gentle UI. Vivid colours have high saturation and medium lightness — bold, energetic, and eye-catching. Good for CTAs, badges, and highlights.
Can I generate a monochromatic palette?
Yes — select the 'Monochrome' style. This generates colours with nearly zero saturation (grey tones). Combined with the count selector, you can create a full greyscale palette from very light to very dark for neutral UI components.

Related tools