Puffy Cloud to Cherry Blossom Color Palette

About this palette

Puffy Cloud to Cherry Blossom is a 5-color pastel, light, warm palette: #D1E1FE (Puffy Cloud), #F6D7BD (Sablé), #FFF1FA (Powder Puff), #FBB3A5 (Peach Bud), #F8BDD4 (Cherry Blossom). It mixes blue, orange, white, pink tones and feels warm overall. The strongest text pairing is #FFF1FA on #FBB3A5 with a contrast ratio of 1.59:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puffy Cloud	rgb(209, 225, 254)	hsl(219, 96%, 91%)
Sablé	rgb(246, 215, 189)	hsl(27, 76%, 85%)
Powder Puff	rgb(255, 241, 250)	hsl(321, 100%, 97%)
Peach Bud	rgb(251, 179, 165)	hsl(10, 91%, 82%)
Cherry Blossom	rgb(248, 189, 212)	hsl(337, 81%, 86%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Color blindness preview

CSS variables

/* Puffy Cloud to Cherry Blossom — https://swatchly.xyz/palette/d1e1fe-f6d7bd-fff1fa-fbb3a5-f8bdd4 */
:root {
  --puffy-cloud: #d1e1fe;
  --sabl: #f6d7bd;
  --powder-puff: #fff1fa;
  --peach-bud: #fbb3a5;
  --cherry-blossom: #f8bdd4;
}

Tailwind CSS v4

/* Puffy Cloud to Cherry Blossom — https://swatchly.xyz/palette/d1e1fe-f6d7bd-fff1fa-fbb3a5-f8bdd4 */
@theme {
  --color-puffy-cloud: #d1e1fe;
  --color-puffy-cloud-50: #f9fbff;
  --color-puffy-cloud-100: #ecf3ff;
  --color-puffy-cloud-200: #d1e1fe;
  --color-puffy-cloud-300: #bcc9e0;
  --color-puffy-cloud-400: #99a8c2;
  --color-puffy-cloud-500: #7c8ba5;
  --color-puffy-cloud-600: #616f88;
  --color-puffy-cloud-700: #4a576d;
  --color-puffy-cloud-800: #384356;
  --color-puffy-cloud-900: #2a3344;
  --color-puffy-cloud-950: #191f2b;
  --color-sabl: #f6d7bd;
  --color-sabl-50: #fff8f2;
  --color-sabl-100: #ffeddd;
  --color-sabl-200: #f6d7bd;
  --color-sabl-300: #dac1ab;
  --color-sabl-400: #bb9f88;
  --color-sabl-500: #9f836b;
  --color-sabl-600: #826851;
  --color-sabl-700: #69513c;
  --color-sabl-800: #523e2b;
  --color-sabl-900: #402f1f;
  --color-sabl-950: #291c11;
  --color-powder-puff: #fff1fa;
  --color-powder-puff-50: #fff1fa;
  --color-powder-puff-100: #f1e9ee;
  --color-powder-puff-200: #dfd4db;
  --color-powder-puff-300: #c9bdc5;
  --color-powder-puff-400: #aa9da5;
  --color-powder-puff-500: #8e828a;
  --color-powder-puff-600: #74686f;
  --color-powder-puff-700: #5c5259;
  --color-powder-puff-800: #483f45;
  --color-powder-puff-900: #383035;
  --color-powder-puff-950: #231d21;
  --color-peach-bud: #fbb3a5;
  --color-peach-bud-50: #fff6f5;
  --color-peach-bud-100: #ffebe6;
  --color-peach-bud-200: #ffd1c8;
  --color-peach-bud-300: #fbb3a5;
  --color-peach-bud-400: #d69487;
  --color-peach-bud-500: #b9766a;
  --color-peach-bud-600: #9a5b4f;
  --color-peach-bud-700: #7e453a;
  --color-peach-bud-800: #65332a;
  --color-peach-bud-900: #4f251e;
  --color-peach-bud-950: #331510;
  --color-cherry-blossom: #f8bdd4;
  --color-cherry-blossom-50: #ffeaf1;
  --color-cherry-blossom-100: #ffd9e7;
  --color-cherry-blossom-200: #f8bdd4;
  --color-cherry-blossom-300: #ddaabe;
  --color-cherry-blossom-400: #c18ba0;
  --color-cherry-blossom-500: #a67086;
  --color-cherry-blossom-600: #8a586d;
  --color-cherry-blossom-700: #724457;
  --color-cherry-blossom-800: #5c3445;
  --color-cherry-blossom-900: #482735;
  --color-cherry-blossom-950: #2f1621;
}