Pastel Color Palettes: 30 Soft Hex Combinations for Modern UI

Pastel color palettes use soft, low-saturation hues that feel calm, friendly and modern. They're a favorite for wellness apps, kids' brands, and any UI that wants to feel approachable.

Explore live, copyable pastel schemes in the PaletteCSS color palettes library.

What makes a color "pastel"?

Pastels are created by taking a hue and adding a lot of white — high lightness, low-to-medium saturation. In hsl() terms, think high lightness (85–95%) and gentle saturation.

:root {
  --pastel-pink:   #ffd6e8;
  --pastel-blue:   #d6ecff;
  --pastel-mint:   #d6ffe4;
  --pastel-lilac:  #e8d6ff;
}

Where pastels shine

• Backgrounds — soft tints keep content readable.
• Cards and tags — gentle fills that don't overpower.
• Gradients — pastels blend beautifully; see how to use CSS gradients.

Make a pastel gradient

background: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%);

Browse more soft blends in the CSS gradients gallery.

Accessibility tip

Pastels are light, so use a dark text color on top and confirm contrast with the WCAG AA standard.

Frequently asked questions

Are pastel palettes good for dark mode?

Pastels work best on light UIs. For dark mode, use muted, desaturated tones instead.

Where can I copy pastel hex codes?

Click any swatch on PaletteCSS to copy its hex value instantly.

For more inspiration, see 50 beautiful color palettes for web design.