Dawn Patrol to Nightly Voyager color palette

FFE2E1Dawn Patrol E797B9Passion Potion AB6063Dried Tomatoes 72351FFreshly Roasted Coffee 3A192ENightly Voyager

Open in generator Export PNG, PDF, ASE…

About this palette

Dawn Patrol to Nightly Voyager is a 5-color warm, vintage, gradient palette: #FFE2E1 (Dawn Patrol), #E797B9 (Passion Potion), #AB6063 (Dried Tomatoes), #72351F (Freshly Roasted Coffee), #3A192E (Nightly Voyager). It mixes white, pink, red, brown tones and feels warm overall. The strongest text pairing is #FFE2E1 on #3A192E with a contrast ratio of 12.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dawn Patrol	rgb(255, 226, 225)	hsl(2, 100%, 94%)
Passion Potion	rgb(231, 151, 185)	hsl(334, 62%, 75%)
Dried Tomatoes	rgb(171, 96, 99)	hsl(358, 31%, 52%)
Freshly Roasted Coffee	rgb(114, 53, 31)	hsl(16, 57%, 28%)
Nightly Voyager	rgb(58, 25, 46)	hsl(322, 40%, 16%)

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.

Aa12.67:1 Super#FFE2E1 on #3A192E
Aa12.67:1 Super#3A192E on #FFE2E1
Aa7.67:1 Very good#FFE2E1 on #72351F
Aa7.67:1 Very good#72351F on #FFE2E1
Aa7.01:1 Very good#E797B9 on #3A192E
Aa7.01:1 Very good#3A192E on #E797B9
Aa4.24:1 Poor#E797B9 on #72351F
Aa4.24:1 Poor#72351F on #E797B9

Color blindness preview

CSS variables

/* Dawn Patrol to Nightly Voyager — https://swatchly.xyz/palette/ffe2e1-e797b9-ab6063-72351f-3a192e */
:root {
  --dawn-patrol: #ffe2e1;
  --passion-potion: #e797b9;
  --dried-tomatoes: #ab6063;
  --freshly-roasted-coffee: #72351f;
  --nightly-voyager: #3a192e;
}

Tailwind CSS v4

/* Dawn Patrol to Nightly Voyager — https://swatchly.xyz/palette/ffe2e1-e797b9-ab6063-72351f-3a192e */
@theme {
  --color-dawn-patrol: #ffe2e1;
  --color-dawn-patrol-50: #fff0ef;
  --color-dawn-patrol-100: #ffe2e1;
  --color-dawn-patrol-200: #e6d1d0;
  --color-dawn-patrol-300: #d1bab9;
  --color-dawn-patrol-400: #b49a99;
  --color-dawn-patrol-500: #987f7e;
  --color-dawn-patrol-600: #7d6564;
  --color-dawn-patrol-700: #654f4e;
  --color-dawn-patrol-800: #503d3c;
  --color-dawn-patrol-900: #3e2e2e;
  --color-dawn-patrol-950: #271c1c;
  --color-passion-potion: #e797b9;
  --color-passion-potion-50: #ffe6f0;
  --color-passion-potion-100: #ffd4e5;
  --color-passion-potion-200: #f8b5d1;
  --color-passion-potion-300: #e797b9;
  --color-passion-potion-400: #c77b9c;
  --color-passion-potion-500: #ad6283;
  --color-passion-potion-600: #914b6b;
  --color-passion-potion-700: #783956;
  --color-passion-potion-800: #622b45;
  --color-passion-potion-900: #502036;
  --color-passion-potion-950: #341122;
  --color-dried-tomatoes: #ab6063;
  --color-dried-tomatoes-50: #ffeeee;
  --color-dried-tomatoes-100: #ffdddd;
  --color-dried-tomatoes-200: #febdbd;
  --color-dried-tomatoes-300: #eaa1a2;
  --color-dried-tomatoes-400: #ca7d80;
  --color-dried-tomatoes-500: #ab6063;
  --color-dried-tomatoes-600: #8f494d;
  --color-dried-tomatoes-700: #75373b;
  --color-dried-tomatoes-800: #5f292d;
  --color-dried-tomatoes-900: #4c1e22;
  --color-dried-tomatoes-950: #331114;
  --color-freshly-roasted-coffee: #72351f;
  --color-freshly-roasted-coffee-50: #fff2ed;
  --color-freshly-roasted-coffee-100: #ffe5dc;
  --color-freshly-roasted-coffee-200: #ffcab7;
  --color-freshly-roasted-coffee-300: #efb29c;
  --color-freshly-roasted-coffee-400: #d4917a;
  --color-freshly-roasted-coffee-500: #ba765f;
  --color-freshly-roasted-coffee-600: #9e5d47;
  --color-freshly-roasted-coffee-700: #844934;
  --color-freshly-roasted-coffee-800: #72351f;
  --color-freshly-roasted-coffee-900: #572a19;
  --color-freshly-roasted-coffee-950: #3a180d;
  --color-nightly-voyager: #3a192e;
  --color-nightly-voyager-50: #fff0f8;
  --color-nightly-voyager-100: #fee2f2;
  --color-nightly-voyager-200: #eeccdf;
  --color-nightly-voyager-300: #dab4ca;
  --color-nightly-voyager-400: #bc94ab;
  --color-nightly-voyager-500: #a27991;
  --color-nightly-voyager-600: #886178;
  --color-nightly-voyager-700: #704d62;
  --color-nightly-voyager-800: #5c3c4f;
  --color-nightly-voyager-900: #4b2f40;
  --color-nightly-voyager-950: #3a192e;
}