Colour Palette Generator

Colour Palette Generator makes sets of colours that belong together. Press the space bar, or the New palette button, and you get a fresh palette in harmony. Like a colour? Lock it, and the next palettes are built around it while it stays exactly where it is.

Prefer to start from a brand colour? Switch the mode to “From a colour”, pick it, and choose a harmony: complementary, analogous, triadic, split complementary, tetradic or monochrome. The maths happens in OKLCH, a colour space built around how people see, so a palette gets an even spread of light, middle and dark shades.

Then it helps you use the palette properly. Each colour gets a 50 to 950 scale of tints and shades for buttons, borders and backgrounds. A contrast grid checks every pair against the WCAG accessibility rules, and a colour-blind view shows which colours some people will struggle to tell apart. Export as CSS variables, Tailwind, SCSS, JSON or a GIMP palette, save a PNG card, or copy a link that rebuilds the palette for anyone you send it to.

1. Press the space bar, or “New palette”, until you see colours you like. Use “Undo” to go back.
2. Press the lock on any colour to keep it. The next palettes are made to suit the locked colours.
3. For a palette from your own colour, set “Mode” to “From a colour”, pick the base colour and choose a “Harmony”.
4. Press the pen to edit a colour as HEX, RGB, HSL or OKLCH. Use the arrows to reorder colours, × to remove one and “Add colour” for more.
5. Check the “Tints and shades”, “Contrast check” and “Colour-blind view” panels below the palette.
6. Choose a format under “Export” and press “Copy code” or the Download button, save a “Palette card (PNG)”, or press “Copy link” to share.

• New palettes with the space bar, from 2 to 10 colours, with locks that keep a colour in its place.
• Six harmonies from any base colour: complementary, analogous, triadic, split complementary, tetradic (square) and monochrome. Random mode picks a harmony for you and often adds a soft neutral.
• Edit any colour as HEX, RGB, HSL or OKLCH, with every field updating together and the closest CSS colour name shown.
• Tints and shades from 50 to 950 for every colour, computed in OKLCH, with your own colour kept unchanged on its step.
• Contrast grid for every pair, plus white and black, with WCAG 2 ratios and AA, AAA and AA large badges.
• Colour-blind view for deuteranopia, protanopia, tritanopia and achromatopsia, with a warning for colours that become hard to tell apart.
• Export to CSS variables, Tailwind CSS v4 theme, Tailwind v3 config, SCSS, JSON and a GIMP .gpl palette (Inkscape and Krita read it too), with or without the 50–950 scales.
• A 1600 × 930 PNG palette card, a share link that holds the whole palette, undo and redo (Ctrl or ⌘ + Z).

• Lock one colour you are sure of first, such as a brand blue, then keep pressing space: the rest of the palette is built around it.
• A useful interface palette usually needs one very light and one very dark colour for backgrounds and text. Check the contrast grid before you commit.
• Body text needs AA (4.5 : 1). Large headings can get away with 3 : 1. Never rely on colour alone for meaning, such as red for an error.
• Export names come from the nearest CSS colour name, so “steelblue” instead of “colour-3”. Names that Tailwind already uses get “-tone” added so they never overwrite Tailwind’s own colours.