Elite Teal to Windy Color Palette

About this palette

Elite Teal to Windy is a 5-color muted, cool, gradient palette: #1A3534 (Elite Teal), #2F5659 (Enchanting Ivy), #5E7D7E (Stream Burble), #8EB9BC (Summit), #BAD0D2 (Windy). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #1A3534 on #BAD0D2 with a contrast ratio of 8.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(26, 53, 52)	hsl(178, 34%, 15%)
Enchanting Ivy	rgb(47, 86, 89)	hsl(184, 31%, 27%)
Stream Burble	rgb(94, 125, 126)	hsl(182, 15%, 43%)
Summit	rgb(142, 185, 188)	hsl(184, 26%, 65%)
Windy	rgb(186, 208, 210)	hsl(185, 21%, 78%)

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.

Aa8.14:1 Very good#1A3534 on #BAD0D2
Aa8.14:1 Very good#BAD0D2 on #1A3534
Aa6.12:1 Good#1A3534 on #8EB9BC
Aa6.12:1 Good#8EB9BC on #1A3534
Aa5.02:1 Good#2F5659 on #BAD0D2
Aa5.02:1 Good#BAD0D2 on #2F5659
Aa3.78:1 Poor#2F5659 on #8EB9BC
Aa3.78:1 Poor#8EB9BC on #2F5659

Color blindness preview

CSS variables

/* Elite Teal to Windy — https://swatchly.xyz/palette/1a3534-2f5659-5e7d7e-8eb9bc-bad0d2 */
:root {
  --elite-teal: #1a3534;
  --enchanting-ivy: #2f5659;
  --stream-burble: #5e7d7e;
  --summit: #8eb9bc;
  --windy: #bad0d2;
}

Tailwind CSS v4

/* Elite Teal to Windy — https://swatchly.xyz/palette/1a3534-2f5659-5e7d7e-8eb9bc-bad0d2 */
@theme {
  --color-elite-teal: #1a3534;
  --color-elite-teal-50: #e8f9f8;
  --color-elite-teal-100: #dcf0ef;
  --color-elite-teal-200: #c6dddc;
  --color-elite-teal-300: #adc7c6;
  --color-elite-teal-400: #8ba8a6;
  --color-elite-teal-500: #6e8c8a;
  --color-elite-teal-600: #54706f;
  --color-elite-teal-700: #3f5857;
  --color-elite-teal-800: #2f4443;
  --color-elite-teal-900: #1a3534;
  --color-elite-teal-950: #13201f;
  --color-enchanting-ivy: #2f5659;
  --color-enchanting-ivy-50: #e3fafc;
  --color-enchanting-ivy-100: #d7f1f3;
  --color-enchanting-ivy-200: #bedddf;
  --color-enchanting-ivy-300: #a2c6c9;
  --color-enchanting-ivy-400: #7fa6a9;
  --color-enchanting-ivy-500: #628a8d;
  --color-enchanting-ivy-600: #486e71;
  --color-enchanting-ivy-700: #2f5659;
  --color-enchanting-ivy-800: #254345;
  --color-enchanting-ivy-900: #1a3436;
  --color-enchanting-ivy-950: #0e2021;
  --color-stream-burble: #5e7d7e;
  --color-stream-burble-50: #e7f9fa;
  --color-stream-burble-100: #def2f2;
  --color-stream-burble-200: #c9e1e2;
  --color-stream-burble-300: #b2cdce;
  --color-stream-burble-400: #91b0b1;
  --color-stream-burble-500: #779697;
  --color-stream-burble-600: #5e7d7e;
  --color-stream-burble-700: #476465;
  --color-stream-burble-800: #354e4f;
  --color-stream-burble-900: #263c3d;
  --color-stream-burble-950: #162526;
  --color-summit: #8eb9bc;
  --color-summit-50: #eefeff;
  --color-summit-100: #e0f8fa;
  --color-summit-200: #cae8ea;
  --color-summit-300: #b2d5d7;
  --color-summit-400: #8eb9bc;
  --color-summit-500: #719a9d;
  --color-summit-600: #547d80;
  --color-summit-700: #3d6366;
  --color-summit-800: #2b4d4f;
  --color-summit-900: #1e3a3c;
  --color-summit-950: #0f2324;
  --color-windy: #bad0d2;
  --color-windy-50: #f2fdfe;
  --color-windy-100: #e8f5f6;
  --color-windy-200: #d4e4e5;
  --color-windy-300: #bad0d2;
  --color-windy-400: #9aaeb0;
  --color-windy-500: #7c9193;
  --color-windy-600: #617577;
  --color-windy-700: #4a5c5e;
  --color-windy-800: #374749;
  --color-windy-900: #283637;
  --color-windy-950: #182122;
}