Color palette generator.

Start from a color you have, or a random one, and get five colors that go together: primary, secondary, tertiary, neutral and surface. Lock the ones you like and generate again for the rest. It runs in your browser, so nothing you pick is uploaded.

Start from a colorHarmony

Press space to generate a new palette.

primary#A8401Foklch(0.51 0.145 37.449)
secondary#008FAAoklch(0.6 0.145 217.449)
tertiary#E5A155oklch(0.76 0.123 67.449)
neutral#62514Boklch(0.45 0.025 37.449)
surface#FFF4F1oklch(0.975 0.012 37.449)

#A8401F
#008FAA
#E5A155
#62514B
#FFF4F1

Runs in your browser. Nothing you add here is uploaded or stored.

How to generate a color palette

Start from a color. Pick one with the swatch, or type it as HEX, rgb(), hsl() or oklch(). It becomes the primary color. Or press Generate to start from a random color that is neither muddy nor neon.
Choose a harmony: analogous, complementary, triadic, split complementary or monochrome. It decides which hues the secondary and tertiary colors take.
Generate again with the button, or with the space bar when no field is selected, for a new variation. Colors you haven’t locked change. If primary is unlocked, Generate also picks a new random starting color, so lock it to keep yours.
Lock what you like. The lock on each swatch keeps that color through every later Generate, so you can build the palette one color at a time.
Copy the result. Each swatch shows its role, its HEX code and its OKLCH value, with a copy button for the HEX. Under the swatches, the three export tabs hold the whole palette in the format you need.

The five colors

primary is your starting color.
secondary and tertiary are accents, with hues set by the harmony. Secondary is a mid-tone and tertiary is lighter. In monochrome they are a darker and a lighter shade of your color.
neutral is a dark gray with a trace of your color’s hue, for secondary text and captions.
surface is a near-white with the same trace of hue, for backgrounds.

What you can copy

HEX: the five codes, one per line, in the order above.
Tailwind v4 @theme: an @theme block that defines --color-primary, --color-secondary, --color-tertiary, --color-neutral and --color-surface as oklch() values. Paste it into your CSS file and use classes such as bg-primary and text-neutral. If your project uses shadcn/ui, which already defines some of those names, use the shadcn theme generator instead.
DESIGN.md colors: a colors: block with the five roles as HEX codes, for the front matter of a DESIGN.md.

Use it with Codex

A palette only helps Codex if it’s written down where Codex looks. DESIGN.md has seven color roles, two more than this tool makes: on-primary, the text color on primary, and on-surface, the main text color. To finish the set:

Copy the DESIGN.md colors into your DESIGN.md, or paste the five HEX codes into the DESIGN.md generator. The generator also asks for on-primary and on-surface, and names any pair of colors below 4.5:1 contrast.
Check the pairs you will use for text in the contrast checker.
Point Codex to the file from AGENTS.md, as the DESIGN.md guide shows.

If you’d rather have Codex finish the set, paste the codes into a prompt:

Palette to DESIGN.md

These are the colors I picked: primary [HEX], secondary [HEX], tertiary [HEX], neutral [HEX] and surface [HEX]. Write them into the colors section of DESIGN.md at the repository root. Add on-primary and on-surface, choosing white or near-black for each so that on-primary on primary and on-surface on surface reach at least 4.5:1 contrast. If a pair can't reach it, don't change my colors; tell me which pair fails and the smallest change that fixes it. Then design the [home] screen using only these colors, and list anything else you needed.

Frequently asked questions

Is it free?

Yes. It’s free, with no sign-up and no limit on how many palettes you generate.

Are my colors uploaded?

No. The palette is made in your browser and isn’t sent or stored anywhere, so copy what you want to keep before you leave the page. The site only counts that the tool was used, never the colors.

How does it make the palette?

It works in OKLCH, a color space where equal steps in lightness look equally different. Your starting color becomes primary, and the harmony decides how far the secondary and tertiary hues sit from it: 30° either side for analogous, 180° and 30° for complementary, 120° and 240° for triadic, 150° and 210° for split complementary, and no shift for monochrome. The accents take about the chroma of your color, within limits, so a muted start gives muted accents. The other four colors also vary a little in lightness and chroma each time, so the same start and harmony give a new variation on every Generate.

Does it check contrast?

No. It doesn’t check how readable one palette color is on another, so test the pairs you use for text in the contrast checker before you commit to them.