Pastel Color Palette Generator

Pastels are high-lightness, low-saturation colors. In OKLCH terms that is roughly L 0.85–0.95 with chroma 0.03–0.09. They feel gentle and airy — and they almost never pass contrast as text on white, so pair them with a dark ink.

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: 1.11:1 AA fail

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-pink: #FFCECB;
  --color-light-gray: #C0DEBE;
  --color-lavender: #D3DFFF;
  --color-misty-rose: #FFD8D5;
  --color-aquamarine: #B8F0BE;
}

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#FFCECB#C0DEBE#D3DFFF#FFD8D5#B8F0BE
#FFCECBAa1.03:1FailAa1.05:1FailAa1.07:1FailAa1.08:1Fail
#C0DEBEAa1.03:1FailAa1.09:1FailAa1.11:1FailAa1.12:1Fail
#D3DFFFAa1.05:1FailAa1.09:1FailAa1.01:1FailAa1.03:1Fail
#FFD8D5Aa1.07:1FailAa1.11:1FailAa1.01:1FailAa1.01:1Fail
#B8F0BEAa1.08:1FailAa1.12:1FailAa1.03:1FailAa1.01: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.

Hand-picked pastel palettes

Sorbet

Nursery

Macaron

Spring

Tips for pastel palettes

  • Use pastels as backgrounds and fills, dark text on top.
  • Add one deeper tone of the same hue for buttons.
  • Mixing warm and cool pastels keeps them from looking washed out.

Want a palette written for your project? Describe it on the palette generator and the AI will suggest one.

Frequently asked questions

What makes a color pastel?

High lightness and low saturation: it looks like the color mixed with plenty of white.

Are pastel colors accessible?

As backgrounds, yes, with dark text. As text or thin icons on white, almost never: most pastels are under 2:1.