Free tool
Colour Palette Generator With Contrast Grid and Code Export
Press the space bar for a new palette, lock the colours you want to keep, and see the set on a sample page before you commit to it. The contrast rule quoted below was read from the W3C on 22 October 2026.
Space new colours Z undo Y redo S save. Click a code to copy it. Paste HEX codes to use them. Drag the dotted handle to move a colour.
Shades and tints
Click a step to use it. A colour you change is locked, so new palettes are built around it.
Each row is a background, each column a text colour. AA needs 4.5 for normal text and 3 for large text; AAA needs 7.
Save
Code
Colours are made in your browser and nothing is uploaded. The palette lives in the page address, and your saved palettes and last settings stay on this device only.
Start from one colour you already trust
A site owner usually arrives with one fixed colour, the one in the logo. The rest of the palette has to be built around it. Type or paste that colour into the first swatch and it becomes locked. Every new palette you roll after that is made around it, in the harmony you chose in the controls.
Each swatch accepts a HEX, RGB or HSL value, or you can use the colour picker. You can also paste a list of HEX codes into the page and they become the palette. Drag the dotted handle to move a colour along the strip, or use the Move left and Move right buttons, since order matters when you map colours to roles such as background, text and accent.
Under any swatch the shades and tints panel offers a row of lighter and darker versions. Click a step to swap it in. A colour you change by hand is locked automatically, so a fresh roll will not undo your edit.
Picking a harmony and a size
The Harmony menu decides how the colours relate on the colour wheel. Count can be anywhere from 3 to 10 colours.
| Mode | What you get | Suits |
|---|---|---|
| Mixed | A loose spread with no strict rule | Exploring ideas |
| Analogous | Neighbours on the wheel | Calm, related tones |
| Complementary | Opposites on the wheel | One strong accent on a base |
| Split complementary | A colour and the two beside its opposite | Contrast with less tension |
| Triadic | Three colours spaced evenly | Playful, varied layouts |
| One hue | A single hue in many lightness steps | Minimal, product-led pages |
| Pastel, Vivid, Earthy | A mood for the whole set | Brand tone first, rules second |
Colours are worked out in OKLCH, where equal steps look equal, and are then brought into the range a screen can show.
Checking the palette before a designer hands it over
A palette that looks good as a strip can fail once text sits on it. Three views under the strip help you find that out early.
- On a page places the colours on a sample layout, in a light or a dark version, with a button that swaps the main colours.
- Text contrast shows a grid. Each row is a background, each column a text colour, and the cell shows the ratio between them.
- Saved lists palettes you stored on this device, so you can compare two directions.
The W3C asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text at level AA. Large text means at least 18 point, or 14 point if bold. The grid also marks the stricter level, which needs 7. Source: W3C Understanding Success Criterion 1.4.3, read 22 October 2026, page dated 6 September 2026.
The See it as menu previews the strip as seen with red-blind, green-blind or blue-blind vision, or with no colour vision, which catches pairs that differ only in hue.
Getting the colours into your build
The Code box under the palette writes the colours in the shape your project needs. Pick a format, then press Copy code.
- CSS variables in HEX, or in OKLCH.
- SCSS variables.
- Tailwind v4 with an @theme block, or a Tailwind v3 config.
- A JSON object, or a plain HEX list.
Beyond code, you can download the strip as a PNG or SVG, save an ASE file for Adobe tools, or copy a link. The link holds the palette itself, so a teammate who opens it sees the same colours without any account.
If you are planning a new build, our web design and UI/UX page explains where palette decisions fit in the design stage.
Palette choices that cause trouble later
- Too many accents. Three to five colours with clear roles are easier to keep consistent than ten.
- No dark text option. Check the contrast grid for the colour you plan to use on body copy, not just on headings.
- Judging on white only. Switch the sample page to dark and see which colours fall apart.
- Relying on hue alone. Use the colour vision preview on charts, links and status badges.
This tool builds and tests colour sets. It does not know your brand rules or your printer, so treat the result as a draft for the people who own the brand.
Frequently asked questions
How do I keep one colour and change the rest?
Change that swatch yourself, or click its lock. Locked colours stay put while the other swatches are rolled again around them.
What are the keyboard shortcuts?
Space makes a new palette, Z undoes, Y redoes and S saves the current palette. Click any code to copy it.
Can I paste in colours I already have?
Yes. Paste HEX codes into the page and they become the palette. You can also type a HEX, RGB or HSL value into a single swatch.
Which export is right for a Tailwind project?
Use Tailwind v4 with the @theme block for a current setup, or the Tailwind v3 config if your project still uses a config file. Both give you named colours you can paste straight in.
How many colours can one palette hold?
From 3 to 10 colours, chosen in the Colours menu.
Is my palette saved on a server?
No. Saved palettes stay in this browser on your own device, and the share link carries the colours inside the address.
More free tools
- Color contrast checker: Test colours against WCAG 2.2, fix them, check a palette and share a link.
- Random colour generator: Roll random colours by mood, lock favourites and copy HEX, RGB, HSL, CSS or a PNG strip.
- Lighten and darken colour tool: Lighten or darken a colour, build 50 to 950 scales, and copy them as CSS, Tailwind, SCSS or JSON.
- Colour blindness simulator: See a picture or colour list as protanopia, deuteranopia, tritanopia or greyscale, with a strength slider.
- CSS gradient generator: Build linear, radial and conic CSS gradients with colour stops and copy CSS or a Tailwind class.