Colour Palette Generator

Base Colour
#
Palette
Export
How It Works

Pick a base colour and the generator creates 11 Tailwind-compatible shades using the OKLCH colour space for perceptually uniform results.

  • OKLCH colour space
  • Tailwind shade scale (50-950)
  • WCAG contrast checking
  • 8 export formats
Shade Reference
  • 50 - Lightest background
  • 100-200 - Light backgrounds
  • 300-400 - Borders, dividers
  • 500 - Base colour
  • 600-700 - Hover states, accents
  • 800-900 - Dark text, headings
  • 950 - Darkest, near-black
Contrast Info

Each swatch shows WCAG contrast level for the best text colour (white or black).

AA AAA Fail

Colour Palette Generator for Modern Design Systems

Design tokens, Tailwind themes, Bootstrap overrides — every modern frontend starts with a colour scale. This tool generates production-ready shade palettes using the OKLCH colour space, the same perceptual model that powers Tailwind CSS v4, the CSS Color Level 4 spec, and most design tools shipping in 2026.

Why OKLCH Is the Standard Now

HSL had a good run, but it lies about lightness. A yellow and a blue at the same HSL lightness look completely different in brightness — which means HSL-based shade scales always need manual tweaking. OKLCH fixes this. It models how humans actually perceive colour, so each shade step looks evenly spaced without intervention. All major browsers support oklch() natively, Tailwind v4 uses it internally, and Figma's colour picker added OKLCH support. If you're still building palettes in HSL, you're making extra work for yourself.

How the Algorithm Works

Your base colour maps to shade 500. The generator converts it to OKLCH and distributes lightness across 11 steps (50 through 950), matching Tailwind's scale. Chroma scales proportionally to avoid gamut clipping at the extremes — dark shades stay saturated instead of turning muddy grey, and light shades keep their tint instead of washing out to white.

Shade Scale Anatomy

  • 50-100 — surface colours. Page backgrounds, card fills, subtle hover states. In dark mode these become your text colours
  • 200-300 — borders, dividers, disabled states. Subtle enough to separate content without competing
  • 400 — placeholder text, secondary icons, muted UI elements
  • 500 — your base. Primary buttons, links, active indicators. The anchor of your entire scale
  • 600-700 — hover and pressed states. Dark enough for text on light backgrounds while staying on-brand
  • 800-950 — headings, body text on light mode, surfaces in dark mode. High contrast, maximum readability

Design-to-Code Workflow

Pick a brand colour, generate the scale, copy SVG into Figma for design review. Once approved, switch to the export tab — CSS custom properties for vanilla projects, Tailwind v3/v4 config for utility-first stacks, Bootstrap SCSS for enterprise codebases. The same source of truth flows from design to production without manual hex-code transcription.

Accessibility Built In

Every swatch displays its WCAG contrast ratio against white and black text. AAA means 7:1+ (the strictest level, required for small text in some jurisdictions). AA means 4.5:1+ (the baseline for normal text). This eliminates the back-and-forth between designers and accessibility audits — you can see which shades work for text before leaving this page.

Multi-Framework Export

  • CSS Custom Properties — framework-agnostic --color-500 variables, ready for any project
  • Tailwind v4 — @theme block with --color-* tokens for the CSS-first config that replaced tailwind.config.js
  • Tailwind v3 — JS config object for projects that haven't migrated yet
  • Bootstrap 5 — SCSS variables plus --bs-* custom properties mapped to Bootstrap's semantic naming (bg-subtle, border-subtle, emphasis)
  • HEX / RGB / HSL / OKLCH — raw values for Figma variables, design tokens, or any tool that takes colour input

Related Tools

Color Converter QR Code Generator Slug Generator Image ↔ Base64

Colour Palette Questions

HSL lies about brightness - a yellow and a blue at the same L value look completely different to your eyes. OKLCH models human perception, so shade 300 in yellow and shade 300 in blue actually feel equally bright. This is why Tailwind v4, CSS Color Level 4, and Figma all moved to OKLCH. Palettes generated in OKLCH need zero manual tweaking.

Export as Tailwind v4, copy the @theme block into your CSS file. This gives you --color-* tokens that map directly to utility classes like bg-color-500, text-color-200. No JavaScript config needed - Tailwind v4 is CSS-first.

50-100 for page backgrounds and card surfaces. 200-300 for borders and dividers. 500 for primary buttons and links. 600 for hover states. 700-900 for body text and headings. In dark mode, flip it - 900-950 for surfaces, 100-200 for text. The contrast badges on each swatch tell you what's readable.

WCAG contrast levels for text readability. AAA (7:1+ ratio) is the strictest - required for body text in EU accessibility regulations. AA (4.5:1+) is the baseline most projects target. Fail means the colour pair doesn't meet either standard - avoid using it for text.