Elite Teal to Winter Wizard Color Palette

About this palette

Elite Teal to Winter Wizard is a 5-color cool palette: #00373E (Elite Teal), #7A301B (Drip Coffee), #917D00 (Olive), #858DFF (Periwinkle), #81E6FA (Winter Wizard). It mixes turquoise, brown, yellow, purple tones and feels cool overall. The strongest text pairing is #00373E on #81E6FA with a contrast ratio of 9.05:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 55, 62)	hsl(187, 100%, 12%)
Drip Coffee	rgb(122, 48, 27)	hsl(13, 64%, 29%)
Olive	rgb(145, 125, 0)	hsl(52, 100%, 28%)
Periwinkle	rgb(133, 141, 255)	hsl(236, 100%, 76%)
Winter Wizard	rgb(129, 230, 250)	hsl(190, 92%, 74%)

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#00373E on #81E6FA
Aa9.05:1 Very good#81E6FA on #00373E
Aa6.46:1 Good#7A301B on #81E6FA
Aa6.46:1 Good#81E6FA on #7A301B
Aa4.49:1 Poor#00373E on #858DFF
Aa4.49:1 Poor#858DFF on #00373E
Aa3.20:1 Poor#7A301B on #858DFF
Aa3.20:1 Poor#858DFF on #7A301B

Color blindness preview

CSS variables

/* Elite Teal to Winter Wizard — https://swatchly.xyz/palette/00373e-7a301b-917d00-858dff-81e6fa */
:root {
  --elite-teal: #00373e;
  --drip-coffee: #7a301b;
  --olive: #917d00;
  --periwinkle: #858dff;
  --winter-wizard: #81e6fa;
}

Tailwind CSS v4

/* Elite Teal to Winter Wizard — https://swatchly.xyz/palette/00373e-7a301b-917d00-858dff-81e6fa */
@theme {
  --color-elite-teal: #00373e;
  --color-elite-teal-50: #e1fbff;
  --color-elite-teal-100: #d3f2f7;
  --color-elite-teal-200: #bbdfe5;
  --color-elite-teal-300: #a0cad0;
  --color-elite-teal-400: #7baab2;
  --color-elite-teal-500: #5e8e96;
  --color-elite-teal-600: #44737a;
  --color-elite-teal-700: #305b61;
  --color-elite-teal-800: #21464c;
  --color-elite-teal-900: #00373e;
  --color-elite-teal-950: #0a2124;
  --color-drip-coffee: #7a301b;
  --color-drip-coffee-50: #fff2ee;
  --color-drip-coffee-100: #ffe5dd;
  --color-drip-coffee-200: #ffc9ba;
  --color-drip-coffee-300: #f8ae99;
  --color-drip-coffee-400: #dd8d76;
  --color-drip-coffee-500: #c3725b;
  --color-drip-coffee-600: #a75943;
  --color-drip-coffee-700: #8c4430;
  --color-drip-coffee-800: #7a301b;
  --color-drip-coffee-900: #5d2616;
  --color-drip-coffee-950: #3e160a;
  --color-olive: #917d00;
  --color-olive-50: #fff5c2;
  --color-olive-100: #f5e9ad;
  --color-olive-200: #e3d48b;
  --color-olive-300: #cdbb67;
  --color-olive-400: #ae9a37;
  --color-olive-500: #917d00;
  --color-olive-600: #756400;
  --color-olive-700: #5d5000;
  --color-olive-800: #493e00;
  --color-olive-900: #393000;
  --color-olive-950: #241e00;
  --color-periwinkle: #858dff;
  --color-periwinkle-50: #f0f2ff;
  --color-periwinkle-100: #e2e6ff;
  --color-periwinkle-200: #c8cfff;
  --color-periwinkle-300: #abb5ff;
  --color-periwinkle-400: #858dff;
  --color-periwinkle-500: #6c72e1;
  --color-periwinkle-600: #5558c2;
  --color-periwinkle-700: #4343a3;
  --color-periwinkle-800: #333287;
  --color-periwinkle-900: #27256d;
  --color-periwinkle-950: #17164a;
  --color-winter-wizard: #81e6fa;
  --color-winter-wizard-50: #ddf9ff;
  --color-winter-wizard-100: #bdf4ff;
  --color-winter-wizard-200: #81e6fa;
  --color-winter-wizard-300: #79cdde;
  --color-winter-wizard-400: #4dafc2;
  --color-winter-wizard-500: #2494a7;
  --color-winter-wizard-600: #00788a;
  --color-winter-wizard-700: #00606e;
  --color-winter-wizard-800: #004b57;
  --color-winter-wizard-900: #003a43;
  --color-winter-wizard-950: #00242b;
}