Color Palette Generator

Choose a base color and a harmony mode such as analogous, complementary or triadic, and the tool builds 3 to 9 matching colors. Lock the ones you want to keep, check how readable black or white text is on each, then copy HEX, RGB or HSL values, CSS variables or a Tailwind snippet, or download SVG swatches. Everything runs in your browser.

Runs in your browser

Free, no sign-up. Colors are generated and exported in your browser. Nothing is uploaded; a palette link is created only when you press Create palette link and contains only color codes.

Color Palette Generator

Generate harmonious palettes, inspect WCAG contrast, lock colors, and export code.

Controls

Base color

Palette mode (Harmony)

Neighboring hues for calm product UI palettes.

Color count: 5

3 colors59 colors

Copy format

CSS variables

:root {
  --palette-1: #2563EB;
  --palette-2: #27A7E7;
  --palette-3: #4E81EF;
  --palette-4: #1610D1;
  --palette-5: #6E1CF2;
}

Save or share

Nothing is added to the page address until you create a palette link, and you see it before copying.

Base

#2563EB

5.2:1WCAG AA

Copy

Color 2

#27A7E7

7.8:1WCAG AAA

Copy

Color 3

#4E81EF

5.7:1WCAG AA

Copy

Color 4

#1610D1

10.3:1WCAG AAA

Copy

Color 5

#6E1CF2

6.8:1WCAG AA

Copy

Palette details & WCAG readout

#2563EB

AA

White: 5.2:1 · Black: 4.1:1

#27A7E7

AAA

White: 2.7:1 · Black: 7.8:1

#4E81EF

AA

White: 3.7:1 · Black: 5.7:1

#1610D1

AAA

White: 10.3:1 · Black: 2.0:1

#6E1CF2

AA

White: 6.8:1 · Black: 3.1:1

Tailwind snippet

colors: {
  brand: {
    100: "#2563EB",
    200: "#27A7E7",
    300: "#4E81EF",
    400: "#1610D1",
    500: "#6E1CF2",
  },
}

Need this workflow inside your product?

We build calculators, converters and processing steps like this one directly into your web or mobile product, with your rules and branding.

Build it into your product

How to use the Color Palette Generator

Pick a base color with the color picker or type a HEX code. Press Randomize for a new palette, or Reset to return to the defaults.
Choose a Palette mode and use the Color count slider (3 to 9).
Click a lock icon on a swatch to keep that color while you change the base or mode.
Read the Palette details and WCAG readout to see the contrast of the best text color on each swatch.
Copy colors one at a time, copy the HEX list or all values, copy or download the CSS variables, or copy the Tailwind snippet.
To keep the palette, press Download SVG swatches. To share it, press Create palette link, review the preview, then Copy link.

Worked example

Sample data

Input

Base color #7C3AED, mode Analogous, count 5

Output

Palette: #7C3AED, #413EEA, #9865F1, #AC11E8, #F335E7
Best text contrast: all five rate AA (ratios 5.7, 6.77, 5.47, 5.25, 6.47)

:root {
  --palette-1: #7C3AED;
  ...
  --palette-5: #F335E7;
}

The CSS shows the first and last variables; the export lists all five. The contrast figure is for whichever of black or white text reads better on each swatch.

How it works

Harmony modes

Harmony modes pick colors by their position on the color wheel (hue). Analogous uses neighbors, complementary uses the opposite hue, split-complementary uses the two hues beside the opposite, triadic spaces three hues evenly, and tetradic uses four.

Monochrome and Shades keep one hue and vary lightness and saturation. Random picks colors without a rule. Use the mode description under the dropdown as a quick reminder.

Locking colors

A locked swatch keeps its exact color when you change the base color, mode or count. Unlocked swatches are regenerated around the locked ones, so you can lock a brand color and explore the rest.

Contrast and WCAG

WCAG rates text readability by contrast ratio: at least 4.5 to 1 passes AA for normal text and 7 to 1 passes AAA. The readout shows the ratio of the better of black or white text on each swatch.

This is a guide for text placed on a swatch. It does not audit the colors in your own design, which depend on the actual foreground and background pairs you use.

ratio = (L1 + 0.05) / (L2 + 0.05), L1 the lighter luminance

Export formats

Copy values as HEX, RGB or HSL for design tools. CSS variables export as --palette-1 through --palette-N inside :root and can be copied or downloaded as palette.css. The Tailwind snippet gives a colors object to paste into your config. SVG swatches download as palette.svg with each color and its HEX label.

Palette links

A palette link stores only the colors, as hex codes in the address, for example ?p=7C3AED-413EEA-9865F1. It is built only when you press Create palette link, and you see a preview first.

Anyone who opens the link sees those colors with all swatches locked. The link holds no account, image or other data.

Inputs, outputs and limits

Inputs

Base color as a HEX code or from the picker
Palette mode and a color count from 3 to 9
Optional locked swatches

Outputs

Palette swatches with HEX, RGB and HSL values
WCAG contrast readout against the best of black or white text
CSS variables (copy or palette.css), Tailwind snippet and palette.svg
An optional palette link containing only color codes

Limits

3 to 9 colors per palette
Contrast covers black or white text on each swatch, not your own pairs
Palette links accept 3 to 9 valid HEX colors; invalid links are ignored
Palettes are not saved; leaving the page loses them unless you export or share a link

Processing

Colors are generated and exported in your browser. Nothing is uploaded; a palette link is created only when you press Create palette link and contains only color codes.

Frequently asked questions

What does the palette link contain?

Only the hex codes of the colors. It is created only when you press Create palette link, you see a preview of the swatches first, and nothing is sent to a server.

Does the tool check my design for accessibility?

No. The readout shows the contrast of the better of black or white text on each swatch. Check the real text and background pairs in your design separately.

How do I use the colors in CSS or Tailwind?

Copy CSS or download palette.css to get --palette-1 and so on as custom properties inside :root. For Tailwind, copy the snippet and paste it into the colors section of your config.

What does locking a swatch do?

It keeps that exact color when you change the base color, mode or count, so only the unlocked swatches are regenerated around it.

Why do I get different colors when I press Randomize?

Randomize picks a new random base color (unless the first swatch is locked) and reshuffles the unlocked swatches. Locked swatches stay, and the mode and count do not change.

Can I save the palette as an image?

Yes, as an SVG. Press Download SVG swatches to get palette.svg, which lists each color with its HEX label and opens in browsers and design tools.

Need this workflow inside your product?

We build calculators, converters and processing steps like this one directly into your web or mobile product, with your rules and branding.

Build it into your product Web development