Pastel Dream

Five soft tints at matching lightness, so no single hue dominates. Suited to wellness, baby, and lifestyle brands — pair with a dark neutral for text, since none of these pass contrast on white.

Colors

Export color codes

Powder Sky #b8e6fe

Wisteria #ddd6ff

Petal #fccee8

Buttercream #fef3c6

Seafoam #a4f4cf

Accessibility snapshot

Each color's WCAG contrast ratio against white and black text — AA means it can carry normal-size text (≥4.5:1) on that background. Test your exact pairings in the contrast checker.

#b8e6fe White text: 1.33:1 — Black text: 15.79:1 AA

#ddd6ff White text: 1.39:1 — Black text: 15.14:1 AA

#fccee8 White text: 1.39:1 — Black text: 15.13:1 AA

#fef3c6 White text: 1.11:1 — Black text: 18.85:1 AA

#a4f4cf White text: 1.28:1 — Black text: 16.42:1 AA

Color blindness safety

Every pair in this palette (10 pairs) checked with CIEDE2000 under normal vision plus the four strongest color vision deficiency types. A pair is flagged when it drops below ΔE 10 — the zone where colors get hard to tell apart at a glance.

#ddd6ff vs #fccee8 Achromatopsia ΔE 0 Effectively identical

#b8e6fe vs #ddd6ff Achromatopsia ΔE 0.9 Effectively identical

#b8e6fe vs #fccee8 Achromatopsia ΔE 0.9 Effectively identical

#b8e6fe vs #a4f4cf Achromatopsia ΔE 0.9 Effectively identical

#ddd6ff vs #a4f4cf Achromatopsia ΔE 1.8 Effectively identical

#fccee8 vs #a4f4cf Achromatopsia ΔE 1.8 Effectively identical

#fccee8 vs #fef3c6 Tritanopia ΔE 2.1 Effectively identical

#fef3c6 vs #a4f4cf Achromatopsia ΔE 3.4 Hard to distinguish

#b8e6fe vs #fef3c6 Achromatopsia ΔE 4.3 Hard to distinguish

#b8e6fe vs #a4f4cf Tritanopia ΔE 4.5 Hard to distinguish

#b8e6fe vs #ddd6ff Protanopia ΔE 4.9 Hard to distinguish

#ddd6ff vs #fef3c6 Achromatopsia ΔE 5.2 Hard to distinguish

#fccee8 vs #fef3c6 Achromatopsia ΔE 5.2 Hard to distinguish

#ddd6ff vs #a4f4cf Protanopia ΔE 6.6 Hard to distinguish

#ddd6ff vs #a4f4cf Deuteranopia ΔE 6.6 Hard to distinguish

#b8e6fe vs #a4f4cf Deuteranopia ΔE 6.7 Hard to distinguish

#b8e6fe vs #ddd6ff Deuteranopia ΔE 8 Hard to distinguish

#fccee8 vs #fef3c6 Deuteranopia ΔE 8.1 Hard to distinguish

#b8e6fe vs #a4f4cf Protanopia ΔE 9.7 Hard to distinguish

Swatches show the pair as that viewer would see it. Flagged pairs are fine decoratively — just don’t make them the only difference between two states. Explore any pair in the simulator.

In a real interface

Roles assigned by lightness: the lightest color as background, the darkest as text, the first two palette colors as primary and accent.

Pastel Dream

This is how the palette reads when its colors take on interface roles.

Primary action Secondary Badge

CSS variables

CSS

--color-1: #b8e6fe;
--color-2: #ddd6ff;
--color-3: #fccee8;
--color-4: #fef3c6;
--color-5: #a4f4cf;

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Make this palette your own

Turn it into a gradient with one click, or start fresh from any of its colors.

Build a gradient from these colors → Play Color Match