Random Color Generator

Q: Can I lock colours and regenerate the rest of my palette?

Yes. Click the lock icon on any swatch to freeze it. When you click Generate, only the unlocked swatches will change. This is useful when you have a brand colour that must stay fixed and you want to explore complementary or accent options around it. You can lock as many swatches as you like — even four out of five — and regenerate just the remaining one.

Generate random colours with HEX, RGB, HSL, and HSB values. Build harmonious 5-colour palettes using complementary, analogous, triadic, and monochromatic modes. Lock swatches, adjust lightness, and export as CSS variables, Tailwind config, or SCSS. Free. No sign-up.

#4A90D9

HEX#4A90D9

RGBrgb(74, 144, 217)

HSLhsl(211, 65%, 57%)

How it works

1
Choose your mode
Select Single Colour for one random colour with full format details, or Palette to generate a harmonious 5-colour set.
2
Pick a harmony and generate
In palette mode, choose complementary, analogous, triadic, split-complementary, monochromatic, or random, then click Generate.
3
Lock, adjust, and export
Lock colours you like, tweak lightness with the slider, and export as CSS variables, Tailwind config, SCSS, JSON, or plain text.

🎨

Colour Theory Fundamentals

Colour theory is the foundation of every design decision. The colour wheel, first formalised by Isaac Newton in 1666, arranges hues in a circle so that mathematically related colours — those that harmonise naturally — sit at predictable positions. Modern design tools use HSL (Hue, Saturation, Lightness) coordinates to navigate this wheel programmatically. A hue of 0° is red, 120° is green, and 240° is blue. Complementary pairs sit 180° apart, triadic sets are spaced at 120° intervals, and analogous groups cluster within 30° of each other.

🖌

Designing with Harmonious Palettes

A well-chosen palette does more than look attractive — it communicates mood, hierarchy, and brand identity. Monochromatic palettes convey elegance and simplicity, making them popular in luxury branding. Complementary palettes create energy and draw the eye, which is why sports brands and fast-food logos favour them. Analogous schemes feel natural and serene, commonly used in wellness and nature-oriented sites. The key is intentionality: choose a harmony mode that matches the emotion you want to evoke.

♿

Colour Accessibility in Web Design

Approximately 8% of men and 0.5% of women have some form of colour vision deficiency. WCAG 2.1 guidelines mandate a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. When building palettes, always test text-on-background pairs against these ratios. Avoid conveying information through colour alone — use icons, patterns, or labels alongside colour coding. Tools like this generator help by showing HSL values so you can ensure sufficient lightness differences between foreground and background colours.

More tools on Layman SEO

🔐

Password Generator

Generate cryptographically secure passwords and passphrases with customisable length and character sets.

🎲

Random Number Generator

Generate cryptographically secure random numbers, dice rolls, and coin flips.

🌈

Image Color Picker

Pick colours from any image and extract full palettes with HEX, RGB, HSL, and OKLCH values.

Stay ahead

Get GEO & AEO tips every week

The Layman SEO newsletter. Plain English updates on what is changing in search - SEO, AEO, and GEO - and what to do about it. One email a week. Unsubscribe any time.

No spam. No paywall content. Unsubscribe with one click.

Frequently Asked Questions

What are colour harmony modes and when should I use them?+

Colour harmony modes are mathematical relationships between hues on the colour wheel. Complementary colours sit opposite each other (180° apart) and create high contrast — great for call-to-action buttons against backgrounds. Analogous colours are neighbours (within 30°) and feel cohesive and calm — ideal for branding and editorial design. Triadic colours are evenly spaced (120° apart) and offer vibrant variety while staying balanced. Split-complementary softens the contrast of complementary by using the two colours adjacent to the complement. Monochromatic uses a single hue with varied saturation and lightness — the safest choice when you need a palette that cannot clash.

How do I build an accessible colour palette?+

Accessibility starts with contrast ratios. WCAG 2.1 requires at least 4.5:1 contrast between normal text and its background, and 3:1 for large text. When generating a palette, pair your lightest colour with your darkest for text-on-background combinations. Use monochromatic or analogous harmony modes to keep a consistent feel, then verify each pair with a contrast checker. Avoid relying on colour alone to convey meaning — always add text labels, icons, or patterns for colour-blind users.

What is the difference between HEX, RGB, HSL, and HSB colour formats?+

HEX is a compact six-character code (e.g. #C3DB6B) widely used in CSS and design tools. RGB defines colour as red, green, and blue channel values from 0 to 255 — it maps directly to how screens produce colour. HSL (Hue, Saturation, Lightness) and HSB (Hue, Saturation, Brightness) describe colour in human-intuitive terms: hue is the colour angle on the wheel, saturation is how vivid it is, and lightness/brightness is how light or dark. HSL is preferred in CSS because adjusting lightness or saturation produces predictable results.

Can I lock colours and regenerate the rest of my palette?+

How do I export my palette for use in code?+

The export menu offers five formats. CSS Variables outputs custom properties like --color-1: #C3DB6B that you paste into your :root block. Tailwind Config gives you an object you can merge into your tailwind.config.js theme.extend.colors section. SCSS Variables outputs $color-1: #C3DB6B style declarations. JSON Array gives you a machine-readable array of hex strings. Plain Text is a simple newline-separated list you can paste anywhere. Click the format you need and the text is copied to your clipboard instantly.