Random Color Palettes: How Designers Use Them (HEX, RGB & HSL)
Designers fall into habits — the same blues, the same greys. Random colors break those habits and often reveal palettes you’d never choose deliberately. Here’s how to turn randomness into usable design.
HEX, RGB and HSL
- HEX (
#FF5A1F): compact, used everywhere in CSS and design tools. - RGB: red, green, blue channels from 0–255.
- HSL: hue, saturation, lightness — the easiest to adjust by hand.
Palette modes that work
- Pastel: high lightness, soft saturation — calm brands and illustrations.
- Vivid: maximum punch for highlights and CTAs.
- Dark: backgrounds and dark-mode surfaces.
- Harmonious: hues spaced evenly around the wheel for balanced schemes.
Make it accessible
Check text contrast: WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Use the lightest and darkest colors from your palette for text and backgrounds, and the vivid ones for accents.
Pro tips
- Click a swatch to copy its HEX code.
- Generate several harmonious palettes and combine favourites.
- Use HSL to make lighter/darker variations of one color.