Summer of ’82 to Dawn Patrol color palette

About this palette

Summer of ’82 to Dawn Patrol is a 5-color cool palette: #53D3DF (Summer of ’82), #BB5651 (Tandoori), #009FB5 (Blue Ocean), #005661 (Abyssal Waters), #FFE1E1 (Dawn Patrol). It mixes turquoise, red, white tones and feels cool overall. The strongest text pairing is #005661 on #FFE1E1 with a contrast ratio of 6.83:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Summer of ’82rgb(83, 211, 223)hsl(185, 69%, 60%)
Tandoorirgb(187, 86, 81)hsl(3, 44%, 53%)
Blue Oceanrgb(0, 159, 181)hsl(187, 100%, 35%)
Abyssal Watersrgb(0, 86, 97)hsl(187, 100%, 19%)
Dawn Patrolrgb(255, 225, 225)hsl(0, 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.

  • Aa6.83:1 Good#005661 on #FFE1E1
  • Aa6.83:1 Good#FFE1E1 on #005661
  • Aa4.69:1 Good#53D3DF on #005661
  • Aa4.69:1 Good#005661 on #53D3DF
  • Aa3.75:1 Poor#BB5651 on #FFE1E1
  • Aa3.75:1 Poor#FFE1E1 on #BB5651

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Summer of ’82 to Dawn Patrol — https://swatchly.xyz/palette/53d3df-bb5651-009fb5-005661-ffe1e1 */
:root {
  --summer-of-82: #53d3df;
  --tandoori: #bb5651;
  --blue-ocean: #009fb5;
  --abyssal-waters: #005661;
  --dawn-patrol: #ffe1e1;
}

Tailwind CSS v4

/* Summer of ’82 to Dawn Patrol — https://swatchly.xyz/palette/53d3df-bb5651-009fb5-005661-ffe1e1 */
@theme {
  --color-summer-of-82: #53d3df;
  --color-summer-of-82-50: #d8fcff;
  --color-summer-of-82-100: #b1f8ff;
  --color-summer-of-82-200: #8fe6ef;
  --color-summer-of-82-300: #53d3df;
  --color-summer-of-82-400: #31b2be;
  --color-summer-of-82-500: #0096a1;
  --color-summer-of-82-600: #007982;
  --color-summer-of-82-700: #006068;
  --color-summer-of-82-800: #004c52;
  --color-summer-of-82-900: #003b40;
  --color-summer-of-82-950: #002528;
  --color-tandoori: #bb5651;
  --color-tandoori-50: #ffeeed;
  --color-tandoori-100: #ffdeda;
  --color-tandoori-200: #ffbeb8;
  --color-tandoori-300: #fa9a92;
  --color-tandoori-400: #db746e;
  --color-tandoori-500: #bb5651;
  --color-tandoori-600: #9d3f3c;
  --color-tandoori-700: #822d2b;
  --color-tandoori-800: #6a1f1f;
  --color-tandoori-900: #551615;
  --color-tandoori-950: #390b0b;
  --color-blue-ocean: #009fb5;
  --color-blue-ocean-50: #e7fbff;
  --color-blue-ocean-100: #cef6ff;
  --color-blue-ocean-200: #9beafb;
  --color-blue-ocean-300: #78d7e9;
  --color-blue-ocean-400: #46b9ce;
  --color-blue-ocean-500: #009fb5;
  --color-blue-ocean-600: #008092;
  --color-blue-ocean-700: #006574;
  --color-blue-ocean-800: #004f5b;
  --color-blue-ocean-900: #003c46;
  --color-blue-ocean-950: #00252c;
  --color-abyssal-waters: #005661;
  --color-abyssal-waters-50: #e2fbff;
  --color-abyssal-waters-100: #caf4fc;
  --color-abyssal-waters-200: #ade0e9;
  --color-abyssal-waters-300: #8ec9d3;
  --color-abyssal-waters-400: #66a8b4;
  --color-abyssal-waters-500: #468b97;
  --color-abyssal-waters-600: #2a6e79;
  --color-abyssal-waters-700: #005661;
  --color-abyssal-waters-800: #08434b;
  --color-abyssal-waters-900: #02343b;
  --color-abyssal-waters-950: #002025;
  --color-dawn-patrol: #ffe1e1;
  --color-dawn-patrol-50: #ffefef;
  --color-dawn-patrol-100: #ffe1e1;
  --color-dawn-patrol-200: #e6d0d0;
  --color-dawn-patrol-300: #d2b9b9;
  --color-dawn-patrol-400: #b49999;
  --color-dawn-patrol-500: #997e7e;
  --color-dawn-patrol-600: #7d6464;
  --color-dawn-patrol-700: #654f4f;
  --color-dawn-patrol-800: #503d3d;
  --color-dawn-patrol-900: #3f2e2e;
  --color-dawn-patrol-950: #281c1c;
}

Similar palettes