Nouplo

Colour palette generator

Press space for a new palette; lock the colours you love.

or press the space bar
  1. rgb(237, 221, 187)hsl(41, 58%, 83%)
    White text
    1.34:1AAAAA
    Black text
    15.66:1AAAAA
  2. rgb(143, 173, 255)hsl(224, 100%, 78%)
    White text
    2.19:1AAAAA
    Black text
    9.59:1AAAAA
  3. rgb(92, 123, 230)hsl(227, 73%, 63%)
    White text
    3.87:1AAAAA
    Black text
    5.43:1AAAAA
  4. rgb(59, 91, 219)hsl(228, 69%, 55%)
    White text
    5.67:1AAAAA
    Black text
    3.71:1AAAAA
  5. rgb(60, 52, 31)hsl(43, 32%, 18%)
    White text
    12.33:1AAAAA
    Black text
    1.70:1AAAAA

Nothing leaves your device

This tool runs entirely in your browser. What you type, play or record here stays on your device: nothing is uploaded or saved on a server.

Example

Example: five colours around a terracotta brand colour, #e07a5f, with their contrast

A small café is building its website around its terracotta logo colour. Type #e07a5f as the base colour, choose Complementary and 5 colours. With a base colour typed in, nothing is random: the same colour and scheme give the same palette every time.

  1. Three terracottas — lighter, the base and darker — come first, then two turquoise blues from the opposite side of the colour wheel.
  2. Each swatch shows the contrast of white and of black text on it: 4.5:1 passes AA for body text, 7:1 passes AAA.
  3. Lock the colours you like and press Generate or the space bar: the locked ones stay and the rest are made again around them.
Colour White text Black text
#ffa68e 1.89:111.10:1 (AAA)
#e07a5f (base) 2.95:17.12:1 (AAA)
#b7553c 4.80:1 (AA)4.38:1
#34d5f6 1.75:111.99:1 (AAA)
#00adca 2.68:17.83:1 (AAA)

White text only reaches AA on the darker #b7553c, so buttons with white labels take that one; on the base colour itself use black text (7.12:1). “Copy CSS variables” gives :root { --color-1: #ffa68e; … --color-5: #00adca; } to paste into the site’s stylesheet.

How it works

  1. Press Generate or the space bar for a new palette — or type a base colour and choose a scheme such as complementary or triadic.
  2. Lock the colours you like; the next palette keeps them and builds the rest around them. Click a colour to copy its hex code.
  3. Check the contrast badges, preview how colour-blind people see it, then copy CSS variables or download PNG or SVG.

Frequently asked questions

What are the colour schemes?
Rules from the colour wheel: analogous uses neighbours (±30°), complementary the opposite hue, split complementary the two beside the opposite, triadic three hues 120° apart, square four 90° apart, monochrome one hue in steps of light and dark, pastel soft light colours all round the wheel.
Why do the colours look balanced?
They are worked out in OKLCH, a colour space that matches how bright colours look to the eye, so steps of lightness feel even; colours a screen can’t show are softened until it can.
What do the contrast badges mean?
The WCAG contrast ratio of white and black text on each colour: AA needs 4.5 for normal text, AAA 7. The label is written in whichever reads better.
Can I get a palette from a photo?
Yes — the palette-from-image tool picks the main colours of a picture. This one creates new combinations.
Can I build a palette around my brand colour?
Yes. Type it as the base colour (#e07a5f or rgb(224 122 95) both work) and choose a scheme: the palette is built around it with nothing random, so the same colour and scheme always give the same colours. Generate then varies the lightness and strength of the others, and keeps the hues.
How do I use the palette in my design?
Copy CSS variables gives a :root block with --color-1 to --color-5 (one per colour) for a stylesheet; Copy hex list gives the codes separated by commas for a design app; Download PNG or SVG saves the swatches as a picture; Copy share link opens this exact palette for someone else.
Is anything uploaded?
No. Palettes are made in your browser; a share link carries the colours themselves.

Related tools

◉ Colour palette from an image The picture’s main colours, as hex codes. ◒ Developer tools Colour converter HEX, RGB, HSL and CMYK — plus the contrast ratio that decides readability. ◒ Developer tools CSS gradient generator Colours in, a declaration out. ◐ Developer tools Contrast checker Whether anyone can actually read it.