Pastel color palettes

Where pastel palettes work

• Category chips and calendar labels, where many soft fills must stay distinguishable
• Onboarding illustrations and empty states with a short line of dark text
• Stationery, bakery, baby, and wellness brands where a soft tone suits the product
• Highlight bands behind table rows, quotes, or code lines

What makes a palette pastel

Pastel is about lightness, not about removing color. Across the 392 palettes in this collection, about half of all swatches have an HSL lightness above 80%, and very few drop below 40%. Saturation stays moderate (around 50% on average), which is why #ffbe98 still reads as peach and #b5c0d0 as a blue-grey rather than as two greys.

The collection leans warm. Peach, salmon, and pink tints make up more than a third of the swatches, with blue-greys, sage, and lavender as the usual counterweights.

Add the dark color the palette leaves out

Only about one in six palettes here contains any pair of swatches that reaches 4.5:1, the WCAG AA minimum for body text. Plan on adding one ink color. Take it from a hue already in the palette rather than reaching for black: it keeps the softness while giving text a clear edge.

For the pink-to-violet palette #ffe6e6, #e1afd1, #ad88c6, #7469b6, a deep violet such as #2f2a4a measures 11.42:1 on #ffe6e6 and 7.26:1 on #e1afd1. The palette's own darkest swatch, #7469b6, reaches 3.99:1 on the pale pink, so it suits large headings, icons, and borders, but not paragraphs.

:root {
  --surface: #ffe6e6;      /* page background */
  --surface-alt: #e1afd1;  /* chips, selected rows */
  --accent: #7469b6;       /* icons, large headings, focus ring */
  --accent-soft: #ad88c6;  /* illustration, dividers */
  --ink: #2f2a4a;          /* added: body text */
}

.button-primary {
  background: var(--accent);
  color: #ffffff; /* 4.73:1 */
}

Where pastel interfaces go wrong

• White labels on pastel buttons. White on #e1afd1 is 1.87:1. Use the dark ink for the label, or move the button to the palette's deepest swatch.
• Relying on two tints to separate a card from the page. #ffe6e6 and #e1afd1 differ by only 1.57:1, so inputs and other controls whose edge matters need a darker border.
• Giving all four tints equal area. Pick one as the page surface and keep the others to smaller roles, or the layout loses its focal point.

Pairing the colors

Mix one cool pastel into a warm set: blue-grey #b5c0d0 or sage #ccd3ca beside peach #f5e8dd and blush #eed3d9 keeps the page from reading as uniformly sweet. Then add one dark ink from the palette's hue family, such as a deep violet for a pink and lavender set.

Contrast and readability

About 93% of the swatches here pass 4.5:1 with black text; only about 8% pass with white. Even a mid lavender like #ad88c6 gives white text just 2.95:1, against 7.11:1 for black. Plan a dark ink for text, and use white only on the deepest swatch in a palette after checking it.

Questions

What colors go with pastel pink?

Lavender and blue-grey are common partners in this collection, for example #eed3d9 alongside #b5c0d0 and #ccd3ca. Peach works for a warmer set. For text and actions, add a deep plum, violet, or navy rather than black.

Can pastel colors be used for text?

Rarely for body text. On a light background, even the darker pastels tend to land below 4.5:1, the minimum for normal text; some reach the 3:1 large-text threshold. Use pastels for fills, and use a dark ink for words.

Do pastels work in dark mode?

Yes, as foreground colors. Pastel tints become text and accent colors on a dark surface: #e1afd1 on #2f2a4a measures 7.26:1. Avoid large pastel panels in dark mode, as they look very bright next to the dark surface.