Pastel Color Palettes: 30 Soft Hex Combinations for Modern UI
Soft, dreamy pastel color palettes with copy-ready hex codes — perfect for friendly, modern UI, branding and gradients.
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.
