Start generating

Dawn Patrol to Shadow Play color palette

FFE0DDDawn PatrolF5B78BPeach TaffyBF8B40Peanut ButterA44E53Cherry on Top5D4905Very Coffee2F170EShadow Play
Open in generator Export PNG, PDF, ASE…

About this palette

Dawn Patrol to Shadow Play is a 6-color warm, earthy, vintage, gradient palette: #FFE0DD (Dawn Patrol), #F5B78B (Peach Taffy), #BF8B40 (Peanut Butter), #A44E53 (Cherry on Top), #5D4905 (Very Coffee), #2F170E (Shadow Play). It mixes white, orange, red, brown tones and feels warm overall. The strongest text pairing is #FFE0DD on #2F170E with a contrast ratio of 13.57:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dawn Patrolrgb(255, 224, 221)hsl(5, 100%, 93%)
Peach Taffyrgb(245, 183, 139)hsl(25, 84%, 75%)
Peanut Butterrgb(191, 139, 64)hsl(35, 50%, 50%)
Cherry on Toprgb(164, 78, 83)hsl(357, 36%, 47%)
Very Coffeergb(93, 73, 5)hsl(46, 90%, 19%)
Shadow Playrgb(47, 23, 14)hsl(16, 54%, 12%)

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.

  • Aa13.57:1 Super#FFE0DD on #2F170E
  • Aa13.57:1 Super#2F170E on #FFE0DD
  • Aa9.62:1 Very good#F5B78B on #2F170E
  • Aa9.62:1 Very good#2F170E on #F5B78B
  • Aa7.01:1 Very good#FFE0DD on #5D4905
  • Aa7.01:1 Very good#5D4905 on #FFE0DD
  • Aa5.59:1 Good#BF8B40 on #2F170E
  • Aa5.59:1 Good#2F170E on #BF8B40

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Dawn Patrol to Shadow Play — https://swatchly.xyz/palette/ffe0dd-f5b78b-bf8b40-a44e53-5d4905-2f170e */
:root {
  --dawn-patrol: #ffe0dd;
  --peach-taffy: #f5b78b;
  --peanut-butter: #bf8b40;
  --cherry-on-top: #a44e53;
  --very-coffee: #5d4905;
  --shadow-play: #2f170e;
}

Tailwind CSS v4

/* Dawn Patrol to Shadow Play — https://swatchly.xyz/palette/ffe0dd-f5b78b-bf8b40-a44e53-5d4905-2f170e */
@theme {
  --color-dawn-patrol: #ffe0dd;
  --color-dawn-patrol-50: #ffeeed;
  --color-dawn-patrol-100: #ffe0dd;
  --color-dawn-patrol-200: #e6cfcd;
  --color-dawn-patrol-300: #d2b8b6;
  --color-dawn-patrol-400: #b49996;
  --color-dawn-patrol-500: #997e7b;
  --color-dawn-patrol-600: #7e6462;
  --color-dawn-patrol-700: #664f4c;
  --color-dawn-patrol-800: #513d3b;
  --color-dawn-patrol-900: #3f2e2c;
  --color-dawn-patrol-950: #281c1b;
  --color-peach-taffy: #f5b78b;
  --color-peach-taffy-50: #fff6f0;
  --color-peach-taffy-100: #ffeadc;
  --color-peach-taffy-200: #ffd2b2;
  --color-peach-taffy-300: #f5b78b;
  --color-peach-taffy-400: #d0986f;
  --color-peach-taffy-500: #b47a50;
  --color-peach-taffy-600: #965f36;
  --color-peach-taffy-700: #7b4922;
  --color-peach-taffy-800: #623713;
  --color-peach-taffy-900: #4d2809;
  --color-peach-taffy-950: #321803;
  --color-peanut-butter: #bf8b40;
  --color-peanut-butter-50: #ffeed9;
  --color-peanut-butter-100: #ffe0b7;
  --color-peanut-butter-200: #f2c78f;
  --color-peanut-butter-300: #deae6d;
  --color-peanut-butter-400: #bf8b40;
  --color-peanut-butter-500: #a47223;
  --color-peanut-butter-600: #895a00;
  --color-peanut-butter-700: #6e4700;
  --color-peanut-butter-800: #573800;
  --color-peanut-butter-900: #452b00;
  --color-peanut-butter-950: #2e1b00;
  --color-cherry-on-top: #a44e53;
  --color-cherry-on-top-50: #fff1f1;
  --color-cherry-on-top-100: #ffe4e4;
  --color-cherry-on-top-200: #ffc8c8;
  --color-cherry-on-top-300: #faa8aa;
  --color-cherry-on-top-400: #de8588;
  --color-cherry-on-top-500: #c2696c;
  --color-cherry-on-top-600: #a44e53;
  --color-cherry-on-top-700: #873a3f;
  --color-cherry-on-top-800: #6d2a2f;
  --color-cherry-on-top-900: #561d22;
  --color-cherry-on-top-950: #391013;
  --color-very-coffee: #5d4905;
  --color-very-coffee-50: #fff5d9;
  --color-very-coffee-100: #f8eac5;
  --color-very-coffee-200: #e7d6aa;
  --color-very-coffee-300: #d4c18f;
  --color-very-coffee-400: #b8a36b;
  --color-very-coffee-500: #9f894f;
  --color-very-coffee-600: #857036;
  --color-very-coffee-700: #6e5b23;
  --color-very-coffee-800: #5d4905;
  --color-very-coffee-900: #473809;
  --color-very-coffee-950: #2e2302;
  --color-shadow-play: #2f170e;
  --color-shadow-play-50: #fff2ed;
  --color-shadow-play-100: #fce6de;
  --color-shadow-play-200: #ebd1c8;
  --color-shadow-play-300: #d6baaf;
  --color-shadow-play-400: #b99a8e;
  --color-shadow-play-500: #9d7e73;
  --color-shadow-play-600: #816459;
  --color-shadow-play-700: #684e44;
  --color-shadow-play-800: #523c33;
  --color-shadow-play-900: #402d26;
  --color-shadow-play-950: #2f170e;
}

Similar palettes