Dawn Patrol to Ethereal Espresso Color Palette

About this palette

Dawn Patrol to Ethereal Espresso is a 5-color warm, vintage palette: #FFDEDD (Dawn Patrol), #A8AD74 (Estragon), #00A1A8 (Baltic), #58528D (Twilight), #3E2322 (Ethereal Espresso). It mixes pink, green, turquoise, purple, brown tones and feels warm overall. The strongest text pairing is #FFDEDD on #3E2322 with a contrast ratio of 11.40:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dawn Patrol	rgb(255, 222, 221)	hsl(2, 100%, 93%)
Estragon	rgb(168, 173, 116)	hsl(65, 26%, 57%)
Baltic	rgb(0, 161, 168)	hsl(183, 100%, 33%)
Twilight	rgb(88, 82, 141)	hsl(246, 26%, 44%)
Ethereal Espresso	rgb(62, 35, 34)	hsl(2, 29%, 19%)

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.

Aa11.40:1 Very good#FFDEDD on #3E2322
Aa11.40:1 Very good#3E2322 on #FFDEDD
Aa6.06:1 Good#A8AD74 on #3E2322
Aa6.06:1 Good#3E2322 on #A8AD74
Aa5.57:1 Good#FFDEDD on #58528D
Aa5.57:1 Good#58528D on #FFDEDD
Aa4.54:1 Good#00A1A8 on #3E2322
Aa4.54:1 Good#3E2322 on #00A1A8

Color blindness preview

CSS variables

/* Dawn Patrol to Ethereal Espresso — https://swatchly.xyz/palette/ffdedd-a8ad74-00a1a8-58528d-3e2322 */
:root {
  --dawn-patrol: #ffdedd;
  --estragon: #a8ad74;
  --baltic: #00a1a8;
  --twilight: #58528d;
  --ethereal-espresso: #3e2322;
}

Tailwind CSS v4

/* Dawn Patrol to Ethereal Espresso — https://swatchly.xyz/palette/ffdedd-a8ad74-00a1a8-58528d-3e2322 */
@theme {
  --color-dawn-patrol: #ffdedd;
  --color-dawn-patrol-50: #ffedec;
  --color-dawn-patrol-100: #ffdedd;
  --color-dawn-patrol-200: #e6cdcd;
  --color-dawn-patrol-300: #d2b7b6;
  --color-dawn-patrol-400: #b59796;
  --color-dawn-patrol-500: #9a7d7c;
  --color-dawn-patrol-600: #7f6363;
  --color-dawn-patrol-700: #674e4d;
  --color-dawn-patrol-800: #523c3c;
  --color-dawn-patrol-900: #402d2d;
  --color-dawn-patrol-950: #281b1b;
  --color-estragon: #a8ad74;
  --color-estragon-50: #f7fbdb;
  --color-estragon-100: #eef2cf;
  --color-estragon-200: #dce0b6;
  --color-estragon-300: #c6cb9b;
  --color-estragon-400: #a8ad74;
  --color-estragon-500: #8c9058;
  --color-estragon-600: #70743e;
  --color-estragon-700: #595c29;
  --color-estragon-800: #45481a;
  --color-estragon-900: #343710;
  --color-estragon-950: #202106;
  --color-baltic: #00a1a8;
  --color-baltic-50: #dffeff;
  --color-baltic-100: #bcfcff;
  --color-baltic-200: #9becf0;
  --color-baltic-300: #79d8de;
  --color-baltic-400: #46bbc2;
  --color-baltic-500: #00a1a8;
  --color-baltic-600: #008287;
  --color-baltic-700: #00676b;
  --color-baltic-800: #005054;
  --color-baltic-900: #003d40;
  --color-baltic-950: #002628;
  --color-twilight: #58528d;
  --color-twilight-50: #f4f4ff;
  --color-twilight-100: #e9e9ff;
  --color-twilight-200: #d5d3ff;
  --color-twilight-300: #bfbcf5;
  --color-twilight-400: #a19dda;
  --color-twilight-500: #8682c0;
  --color-twilight-600: #6d68a4;
  --color-twilight-700: #58528d;
  --color-twilight-800: #443f70;
  --color-twilight-900: #343059;
  --color-twilight-950: #201d3b;
  --color-ethereal-espresso: #3e2322;
  --color-ethereal-espresso-50: #fff2f1;
  --color-ethereal-espresso-100: #fce5e3;
  --color-ethereal-espresso-200: #ebd0ce;
  --color-ethereal-espresso-300: #d7b8b6;
  --color-ethereal-espresso-400: #b89795;
  --color-ethereal-espresso-500: #9b7a78;
  --color-ethereal-espresso-600: #7e5f5d;
  --color-ethereal-espresso-700: #634847;
  --color-ethereal-espresso-800: #4c3534;
  --color-ethereal-espresso-900: #3e2322;
  --color-ethereal-espresso-950: #231615;
}