paletta
PALETTE GALLERY

Pastel color palette

Pastel palettes hold hue while dropping saturation and raising lightness, which is why every swatch in this set fails as a standalone text color and needs a dark ink to carry copy. Blossom, lavender, and mint sit at nearly identical lightness so they read as a coordinated set rather than three competing accents.

Updated 2026-07-15

  • BlossomPrimary
    #E893A6
  • LavenderAccent
    #B69AD8
  • MintHighlight
    #7BC2C4
  • ButterSurface
    #FDE9A8
  • Plum InkText
    #4A4453
  • VanillaBackground
    #FFFBF7

Where this palette works

Baby, kids, and lifestyle products

Soft, low-saturation hues are the established convention for products aimed at a gentle, approachable tone.

Illustration-heavy marketing pages

Pastel backgrounds let illustration and photography carry the saturation while the UI chrome stays quiet.

Wellness and beauty brands

Lavender and mint read as calm without the coldness of a pure blue or gray palette.

Accessible pairings

Every pastel swatch here fails AA as a text color on white, which is expected at this lightness. Plum ink is the fix: it clears AAA against vanilla and butter, and still clears AA against mint, so it is the single required text color for the whole palette.

Aa
Plum ink on vanilla
Contrast 9.09 : 1AAA
Aa
Plum ink on butter
Contrast 7.76 : 1AAA
Aa
Plum ink on mint
Contrast 4.62 : 1AA
EXPORT

Use these tokens

Copy as CSS custom properties or a Tailwind v4 @theme block.

:root {
  --palette-primary: #E893A6; /* Blossom */
  --palette-accent: #B69AD8; /* Lavender */
  --palette-highlight: #7BC2C4; /* Mint */
  --palette-surface: #FDE9A8; /* Butter */
  --palette-text: #4A4453; /* Plum Ink */
  --palette-background: #FFFBF7; /* Vanilla */
}

Frequently asked questions

Related palettes

Neutral minimalist palette

A neutral minimalist color palette built from charcoal, taupe, and warm gray, with hex codes, accessible text pairings, and export-ready CSS variables.

Sunset palette

A sunset color palette built from dusk purple, twilight violet, coral, and gold flare, with hex codes, accessible text pairings, and export-ready CSS variables.

Monochrome palette

A true grayscale monochrome color palette from ink to cloud, six steps, with hex codes, accessible text pairings, and export-ready CSS variables.

Build on this palette

Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.

Generate a palette