PaletteForge

Color palette generator

Shuffle harmonious palettes, lock what you like, or describe your project and let AI mix it. Every palette is checked for WCAG contrast and exports straight to CSS, Tailwind or JSON.

Try:

See it on a page

Lightest color becomes the background, darkest the text, the most saturated one the button.

NorthwindPricing · Docs · Blog

Ship the release notes your users actually read.

Body text in your darkest color on your lightest: 15.03:1 AA pass

Start freeSee a demo
Surface card with a secondary accent

Export

CSS custom properties, Tailwind v4 @theme (in OKLCH), Tailwind v3 config, JSON or SCSS.

:root {
  --color-midnight-blue: #1B1B3A;
  --color-rebecca-purple: #693668;
  --color-chocolate: #E4572E;
  --color-khaki: #F3C969;
  --color-whitesmoke: #F7F3EE;
}

Contrast between every pair

WCAG 2.2: 4.5:1 for body text (AA), 3:1 for large text and UI parts, 7:1 for AAA.

Contrast ratio of every text color (rows) on every background (columns)
Text / background#1B1B3A#693668#E4572E#F3C969#F7F3EE
#1B1B3AAa1.84:1FailAa4.50:1AAAa10.57:1AAAAa15.03:1AAA
#693668Aa1.84:1FailAa2.44:1FailAa5.74:1AAAa8.16:1AAA
#E4572EAa4.50:1AAAa2.44:1FailAa2.34:1FailAa3.33:1Large
#F3C969Aa10.57:1AAAAa5.74:1AAAa2.34:1FailAa1.42:1Fail
#F7F3EEAa15.03:1AAAAa8.16:1AAAAa3.33:1LargeAa1.42:1Fail

Get an AI critique of this palette

The contrast numbers are calculated exactly in your browser and passed to the AI, so its advice starts from real ratios.

How a good palette is put together

Most usable palettes follow a simple structure: one or two dark colors for text, one or two light colors for backgrounds and surfaces, and one saturated color for buttons and links. The generator keeps that shape by stepping lightness from dark to light, then picks hues with a harmony rule from the color wheel.

It works in OKLCH, a perceptual color space, so two colors with the same lightness really do look equally bright. In HSL a yellow and a blue at “50% lightness” differ enormously in how light they look — and in contrast.

Harmony rules in one line each

Balance the amounts

A palette is also about proportions. The 60-30-10 rule — 60% dominant, 30% secondary, 10% accent — is the quickest way to stop five good colors from fighting each other.

Frequently asked questions

How does the color palette generator work?

Press Generate (or the space bar) to get a new palette. Each palette is built in the OKLCH color space from a harmony rule (complementary, analogous, triadic, split-complementary, tetradic or monochromatic) with a spread of lightness, so there is always a dark color for text and a light one for backgrounds. Lock colors you like and they stay put on the next shuffle.

What does the AI palette feature do?

Type a sentence about your project, such as “calm fintech app for retirees”, and the AI proposes a named palette with a role for each color. Everything else on the page — contrast checks, exports, the UI preview — is calculated instantly in your browser without AI.

Can I export a palette to Tailwind CSS?

Yes. The export box produces a Tailwind v4 @theme block (in oklch()), a Tailwind v3 tailwind.config.js colors object, plain CSS custom properties, SCSS variables and JSON. For a full 50–950 shade scale from one color use the Tailwind color generator.

Is the palette accessible?

The contrast grid shows the WCAG 2.2 ratio of every color on every other color and marks AA, AAA and large-text passes. Body text needs 4.5:1; large text and UI components need 3:1.

Is PaletteForge free? Do I need an account?

It is free and there is no account. Saved palettes are stored only in your browser’s localStorage.