Colour Palette Generator
Generate beautiful colour palettes with 18 harmony modes. Lock colours, adjust hue/saturation/lightness, check WCAG contrast, and export as CSS variables, Tailwind tokens, PNG, SVG, or ASE.
How to use this tool
- 1Generate a palette
Click Generate or press spacebar to create a new random palette. Choose from 18 harmony modes like complementary, analogous, triadic, or monochromatic.
- 2Lock colours you like
Click the lock icon on any swatch to keep it fixed. When you regenerate, only unlocked colours change — perfect for building around a brand colour.
- 3Adjust and refine
Fine-tune hue, saturation, and lightness with sliders. All hex, RGB, HSL, and OKLCH values update in real time along with WCAG contrast ratios.
- 4Export your palette
Copy individual values or export the entire palette as CSS custom properties, Tailwind tokens, PNG, SVG, or ASE for Adobe apps.
Colour harmony explained
Analogous
Analogous palettes use colours that sit next to each other on the colour wheel, typically within a 30–60° range. They create a calm, cohesive feel and are ideal for backgrounds, gradients, and brands that want to feel unified. Nature is full of analogous colour schemes — autumn leaves, ocean sunsets, forest canopies.
Complementary
Complementary colours sit directly opposite each other on the wheel (180° apart). This creates maximum contrast and visual tension, making elements pop. Use a complementary accent sparingly against a dominant colour for call-to-action buttons, alerts, or hero sections that need to grab attention.
Triadic & beyond
Triadic schemes use three colours evenly spaced at 120° intervals. They are vibrant and balanced. Tetradic (rectangle) and square schemes add a fourth colour for richer compositions. Split-complementary softens the tension of complementary by shifting one side 30°. Each mode suits different design goals.
Export formats for every workflow
CSS & Tailwind
Export your palette as CSS custom properties (--primary: #3b82f6;) ready to paste into any stylesheet, or as a Tailwind config object you can merge into tailwind.config.js. Both formats include hex and OKLCH values so you can choose whichever colour model your project uses.
PNG & SVG
Download a swatch image as a PNG for presentations, mood boards, or client approvals. The SVG export gives you a scalable vector with labelled colour rectangles that you can open in Figma, Sketch, or Illustrator and edit directly.
ASE (Adobe Swatch Exchange)
The ASE format is natively supported by Photoshop, Illustrator, and InDesign. Import your palette as a swatch group and use it across all your Adobe projects without manually entering hex codes. The exported file preserves colour names for easy identification.
Colour accessibility and WCAG contrast
The Web Content Accessibility Guidelines (WCAG) 2.1 define contrast ratios that ensure text is readable by people with low vision or colour deficiencies. Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA raises the bar to 7:1 and 4.5:1 respectively.
This palette generator checks every foreground/background combination against WCAG thresholds and shows a pass/fail badge. If a pair fails, try increasing the lightness difference between the two colours or switching to a darker/lighter variant. Building accessibility into your colour choices from the start saves costly redesign later.
What is OKLCH?
OKLCH (Oklab Lightness, Chroma, Hue) is a perceptually uniform colour space that became available in CSS via the oklch() function. Unlike HSL, where lightness 50% can look dramatically different between yellow and blue, OKLCH ensures that equal lightness values appear equally bright to the human eye. This makes it ideal for generating consistent tint/shade scales and design tokens.
Chroma in OKLCH replaces saturation and represents colourfulness on an unbounded scale (typically 0–0.4 for screen colours). Hue is measured in degrees, similar to HSL. Because OKLCH is perceptual, you can interpolate between two OKLCH colours and get visually smooth gradients without the muddy midpoints that plague RGB or HSL interpolation.
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.