Summer of ’82 to Aphrodisiac Color Palette

About this palette

Summer of ’82 to Aphrodisiac is a 5-color cool palette: #66CFE2 (Summer of ’82), #452E5A (Acai), #BE250D (Lobster), #D4EAB3 (Frozen Forest), #E7535A (Aphrodisiac). It mixes turquoise, purple, red, green tones and feels cool overall. The strongest text pairing is #452E5A on #D4EAB3 with a contrast ratio of 9.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Summer of ’82	rgb(102, 207, 226)	hsl(189, 68%, 64%)
Acai	rgb(69, 46, 90)	hsl(271, 32%, 27%)
Lobster	rgb(190, 37, 13)	hsl(8, 87%, 40%)
Frozen Forest	rgb(212, 234, 179)	hsl(84, 57%, 81%)
Aphrodisiac	rgb(231, 83, 90)	hsl(357, 76%, 62%)

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.

Aa9.05:1 Very good#452E5A on #D4EAB3
Aa9.05:1 Very good#D4EAB3 on #452E5A
Aa6.47:1 Good#66CFE2 on #452E5A
Aa6.47:1 Good#452E5A on #66CFE2
Aa4.69:1 Good#BE250D on #D4EAB3
Aa4.69:1 Good#D4EAB3 on #BE250D
Aa3.35:1 Poor#66CFE2 on #BE250D
Aa3.35:1 Poor#BE250D on #66CFE2

Color blindness preview

CSS variables

/* Summer of ’82 to Aphrodisiac — https://swatchly.xyz/palette/66cfe2-452e5a-be250d-d4eab3-e7535a */
:root {
  --summer-of-82: #66cfe2;
  --acai: #452e5a;
  --lobster: #be250d;
  --frozen-forest: #d4eab3;
  --aphrodisiac: #e7535a;
}

Tailwind CSS v4

/* Summer of ’82 to Aphrodisiac — https://swatchly.xyz/palette/66cfe2-452e5a-be250d-d4eab3-e7535a */
@theme {
  --color-summer-of-82: #66cfe2;
  --color-summer-of-82-50: #ddf9ff;
  --color-summer-of-82-100: #bcf4ff;
  --color-summer-of-82-200: #98e3f1;
  --color-summer-of-82-300: #66cfe2;
  --color-summer-of-82-400: #48afc1;
  --color-summer-of-82-500: #1d94a6;
  --color-summer-of-82-600: #007888;
  --color-summer-of-82-700: #005f6d;
  --color-summer-of-82-800: #004b56;
  --color-summer-of-82-900: #003a43;
  --color-summer-of-82-950: #00242a;
  --color-acai: #452e5a;
  --color-acai-50: #f8f2ff;
  --color-acai-100: #f1e5ff;
  --color-acai-200: #e1cef6;
  --color-acai-300: #ccb6e4;
  --color-acai-400: #af97c8;
  --color-acai-500: #957daf;
  --color-acai-600: #7c6494;
  --color-acai-700: #654f7b;
  --color-acai-800: #523e66;
  --color-acai-900: #452e5a;
  --color-acai-950: #2b1e38;
  --color-lobster: #be250d;
  --color-lobster-50: #fff2ef;
  --color-lobster-100: #ffe4de;
  --color-lobster-200: #ffc7bc;
  --color-lobster-300: #ffa492;
  --color-lobster-400: #fd6a52;
  --color-lobster-500: #df4831;
  --color-lobster-600: #be250d;
  --color-lobster-700: #9b1400;
  --color-lobster-800: #7b0e00;
  --color-lobster-900: #610800;
  --color-lobster-950: #400300;
  --color-frozen-forest: #d4eab3;
  --color-frozen-forest-50: #f6ffea;
  --color-frozen-forest-100: #ebf8d9;
  --color-frozen-forest-200: #d4eab3;
  --color-frozen-forest-300: #bed0a4;
  --color-frozen-forest-400: #9cb07e;
  --color-frozen-forest-500: #7f9360;
  --color-frozen-forest-600: #647645;
  --color-frozen-forest-700: #4d5e30;
  --color-frozen-forest-800: #3a4821;
  --color-frozen-forest-900: #2c3816;
  --color-frozen-forest-950: #1a230a;
  --color-aphrodisiac: #e7535a;
  --color-aphrodisiac-50: #fff3f3;
  --color-aphrodisiac-100: #ffe7e6;
  --color-aphrodisiac-200: #ffcdcb;
  --color-aphrodisiac-300: #ffadaa;
  --color-aphrodisiac-400: #ff7678;
  --color-aphrodisiac-500: #e7535a;
  --color-aphrodisiac-600: #c53340;
  --color-aphrodisiac-700: #a4182b;
  --color-aphrodisiac-800: #86011c;
  --color-aphrodisiac-900: #680014;
  --color-aphrodisiac-950: #440009;
}