Dawn Patrol to Ariel Color Palette

About this palette

Dawn Patrol to Ariel is a 4-color pastel, light, cool palette: #FFDFE0 (Dawn Patrol), #BBCFAA (Seedling), #DAD2FF (Icy Plains), #ADD9EA (Ariel). It mixes pink, green, purple, blue tones and feels cool overall. The strongest text pairing is #FFDFE0 on #BBCFAA with a contrast ratio of 1.34:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dawn Patrol	rgb(255, 223, 224)	hsl(358, 100%, 94%)
Seedling	rgb(187, 207, 170)	hsl(92, 28%, 74%)
Icy Plains	rgb(218, 210, 255)	hsl(251, 100%, 91%)
Ariel	rgb(173, 217, 234)	hsl(197, 59%, 80%)

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

/* Dawn Patrol to Ariel — https://swatchly.xyz/palette/ffdfe0-bbcfaa-dad2ff-add9ea */
:root {
  --dawn-patrol: #ffdfe0;
  --seedling: #bbcfaa;
  --icy-plains: #dad2ff;
  --ariel: #add9ea;
}

Tailwind CSS v4

/* Dawn Patrol to Ariel — https://swatchly.xyz/palette/ffdfe0-bbcfaa-dad2ff-add9ea */
@theme {
  --color-dawn-patrol: #ffdfe0;
  --color-dawn-patrol-50: #ffeeee;
  --color-dawn-patrol-100: #ffdfe0;
  --color-dawn-patrol-200: #e6cecf;
  --color-dawn-patrol-300: #d2b7b8;
  --color-dawn-patrol-400: #b49899;
  --color-dawn-patrol-500: #997d7e;
  --color-dawn-patrol-600: #7e6365;
  --color-dawn-patrol-700: #664e4f;
  --color-dawn-patrol-800: #513c3d;
  --color-dawn-patrol-900: #3f2d2e;
  --color-dawn-patrol-950: #281b1c;
  --color-seedling: #bbcfaa;
  --color-seedling-50: #f2fde9;
  --color-seedling-100: #e8f4de;
  --color-seedling-200: #d4e3c8;
  --color-seedling-300: #bbcfaa;
  --color-seedling-400: #9bae8c;
  --color-seedling-500: #7f916f;
  --color-seedling-600: #647554;
  --color-seedling-700: #4d5d3f;
  --color-seedling-800: #3b482e;
  --color-seedling-900: #2c3721;
  --color-seedling-950: #1a2212;
  --color-icy-plains: #dad2ff;
  --color-icy-plains-50: #f6f5ff;
  --color-icy-plains-100: #ede9ff;
  --color-icy-plains-200: #dad2ff;
  --color-icy-plains-300: #c3bce2;
  --color-icy-plains-400: #a39cc5;
  --color-icy-plains-500: #8880a9;
  --color-icy-plains-600: #6d668d;
  --color-icy-plains-700: #574f73;
  --color-icy-plains-800: #433d5c;
  --color-icy-plains-900: #342e48;
  --color-icy-plains-950: #201c2f;
  --color-ariel: #add9ea;
  --color-ariel-50: #ddf5ff;
  --color-ariel-100: #ceebf6;
  --color-ariel-200: #add9ea;
  --color-ariel-300: #9dc3d1;
  --color-ariel-400: #7ca5b4;
  --color-ariel-500: #618a9a;
  --color-ariel-600: #48717f;
  --color-ariel-700: #355a68;
  --color-ariel-800: #274853;
  --color-ariel-900: #1b3741;
  --color-ariel-950: #0e222a;
}