Vive le Vent to Creamy Cloud Dreams Color Palette

About this palette

Vive le Vent to Creamy Cloud Dreams is a 4-color pastel, light palette: #AAD3E4 (Vive le Vent), #FFD2BE (Dainty Peach), #B0EDF1 (Gentle Cold), #FFF6DE (Creamy Cloud Dreams). It mixes blue, orange, turquoise, white tones and feels cool overall. The strongest text pairing is #AAD3E4 on #FFF6DE with a contrast ratio of 1.48:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vive le Vent	rgb(170, 211, 228)	hsl(198, 52%, 78%)
Dainty Peach	rgb(255, 210, 190)	hsl(18, 100%, 87%)
Gentle Cold	rgb(176, 237, 241)	hsl(184, 70%, 82%)
Creamy Cloud Dreams	rgb(255, 246, 222)	hsl(44, 100%, 94%)

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

/* Vive le Vent to Creamy Cloud Dreams — https://swatchly.xyz/palette/aad3e4-ffd2be-b0edf1-fff6de */
:root {
  --vive-le-vent: #aad3e4;
  --dainty-peach: #ffd2be;
  --gentle-cold: #b0edf1;
  --creamy-cloud-dreams: #fff6de;
}

Tailwind CSS v4

/* Vive le Vent to Creamy Cloud Dreams — https://swatchly.xyz/palette/aad3e4-ffd2be-b0edf1-fff6de */
@theme {
  --color-vive-le-vent: #aad3e4;
  --color-vive-le-vent-50: #f5fcff;
  --color-vive-le-vent-100: #e2f6ff;
  --color-vive-le-vent-200: #cae6f2;
  --color-vive-le-vent-300: #aad3e4;
  --color-vive-le-vent-400: #8bb1c0;
  --color-vive-le-vent-500: #6d94a3;
  --color-vive-le-vent-600: #517786;
  --color-vive-le-vent-700: #3b5e6c;
  --color-vive-le-vent-800: #2a4955;
  --color-vive-le-vent-900: #1d3741;
  --color-vive-le-vent-950: #0f2229;
  --color-dainty-peach: #ffd2be;
  --color-dainty-peach-50: #fff7f4;
  --color-dainty-peach-100: #ffebe3;
  --color-dainty-peach-200: #ffd2be;
  --color-dainty-peach-300: #e1bcac;
  --color-dainty-peach-400: #c39b89;
  --color-dainty-peach-500: #a77e6c;
  --color-dainty-peach-600: #8a6352;
  --color-dainty-peach-700: #6f4d3d;
  --color-dainty-peach-800: #583a2c;
  --color-dainty-peach-900: #452c20;
  --color-dainty-peach-950: #2c1a12;
  --color-gentle-cold: #b0edf1;
  --color-gentle-cold-50: #f0feff;
  --color-gentle-cold-100: #d8fafc;
  --color-gentle-cold-200: #b0edf1;
  --color-gentle-cold-300: #a2d2d6;
  --color-gentle-cold-400: #7bb2b6;
  --color-gentle-cold-500: #5b9699;
  --color-gentle-cold-600: #3f797d;
  --color-gentle-cold-700: #2a6064;
  --color-gentle-cold-800: #1a4b4e;
  --color-gentle-cold-900: #0f3a3c;
  --color-gentle-cold-950: #062426;
  --color-creamy-cloud-dreams: #fff6de;
  --color-creamy-cloud-dreams-50: #fff6de;
  --color-creamy-cloud-dreams-100: #f1ecdd;
  --color-creamy-cloud-dreams-200: #ded8c7;
  --color-creamy-cloud-dreams-300: #c8c1ae;
  --color-creamy-cloud-dreams-400: #a9a18c;
  --color-creamy-cloud-dreams-500: #8e8670;
  --color-creamy-cloud-dreams-600: #736b57;
  --color-creamy-cloud-dreams-700: #5c5542;
  --color-creamy-cloud-dreams-800: #484232;
  --color-creamy-cloud-dreams-900: #383225;
  --color-creamy-cloud-dreams-950: #231f15;
}