Colour Palette Generator

Build complementary, analogous, triadic and other palettes, plus a 50–950 tint and shade scale, from one colour in OKLCH, with contrast shown and CSS variables to copy.

Palette

  • BaseAa 5.70:1
    #3b82f6
  • +120°Aa 5.31:1
    #e24956
  • +240°Aa 6.24:1
    #3ba01b

Tints and shades

  • 50Aa 19.26:1
    #f0f6ff
  • 100Aa 17.09:1
    #dbe9ff
  • 200Aa 14.17:1
    #bcd6ff
  • 300Aa 10.83:1
    #92bcff
  • 400Aa 7.77:1
    #619dff
  • 500Aa 5.41:1
    #377ef1
  • 600Aa 5.68:1
    #1961d2
  • 700Aa 8.04:1
    #004ab2
  • 800Aa 11.15:1
    #003687
  • 900Aa 14.83:1
    #00245f
  • 950Aa 18.23:1
    #00133a

“Aa” shows the text colour that reads better on each swatch, with its WCAG contrast ratio: 4.5 is the minimum for normal text, 3 for large text.

Base colour

Hex, a CSS name, rgb(), hsl() or oklch().
How is this calculated?
Harmonies keep the base’s OKLCH lightness (L) and chroma (C) and add to its hue (H): +180° complementary; ±30° analogous; +120°, +240° triadic; +150°, +210° split; +90°, +180°, +270° tetradic. The scale sets L from 0.97 (50) to 0.20 (950), easing chroma near white and black.

Runs in your browser — nothing you enter leaves this device.

About this tool

What it does

Colour Palette Generator builds a palette from one colour. Choose a harmony — complementary (opposite hue), analogous (neighbours 30° either side), triadic (three evenly spaced), split complementary, tetradic (four evenly spaced) or monochrome (one hue, several lightnesses) — and the colours appear as swatches, each with its hex code and the text colour, black or white, that reads better on it, with the WCAG contrast ratio. Underneath, a tint and shade scale from 50 to 950 gives the range of lightnesses design systems use for backgrounds, borders, text and hover states. The work is done in OKLCH, where equal steps look equally different to the eye, so harmony colours keep the base colour’s lightness and strength instead of some looking much brighter than others. Colours the screen cannot show are brought into range by reducing their colourfulness only. Copy the result as CSS custom properties or JSON.

How to use it
  1. Type or pick the base colour.
  2. Choose a harmony.
  3. Read the swatches and the 50–950 scale; copy any hex code.
  4. Name the variables and copy the palette or scale as CSS or JSON.
Limits and your data
  • Colour harmony rules are a starting point, not a guarantee of a pleasing palette; adjust by eye.
  • Very saturated base colours lose some colourfulness in their harmony colours where sRGB screens cannot show the full chroma at that hue and lightness.
  • The contrast shown is for text in plain black or white on each swatch; text in another palette colour needs its own check with the contrast checker.
  • The 50–950 names follow a common design-system convention; the exact lightness of each step differs between systems such as Tailwind and Material.
  • Everything is worked out in your browser and nothing is sent.

Questions

What is a complementary colour?

The colour opposite on the colour wheel. Here the hue is turned 180° in OKLCH while lightness and strength stay the same, so the pair feels balanced.

Why OKLCH rather than HSL?

In HSL, yellow at 50% lightness looks far brighter than blue at 50%. OKLCH is built so equal numbers look equally light, which keeps palettes even.

How do I use the scale in my CSS?

Copy it as custom properties, then use them: background: var(--brand-100); color: var(--brand-900). Lighter steps suit backgrounds, darker ones text.

Which text colour should I use on a swatch?

The “Aa” sample shows the better of black and white with its contrast ratio. 4.5:1 or more passes WCAG AA for normal text.