Start generating

Elite Teal to Snow White color palette

003735Elite Teal005937Moor-Monster788538Pesto di Rucola8CAD4ELime It or Leave It70E1D1Sea FoamE9FFF0Snow White
Open in generator Export PNG, PDF, ASE…

About this palette

Elite Teal to Snow White is a 6-color cool, gradient palette: #003735 (Elite Teal), #005937 (Moor-Monster), #788538 (Pesto di Rucola), #8CAD4E (Lime It or Leave It), #70E1D1 (Sea Foam), #E9FFF0 (Snow White). It mixes turquoise, green, white tones and feels cool overall. The strongest text pairing is #003735 on #E9FFF0 with a contrast ratio of 12.53:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Elite Tealrgb(0, 55, 53)hsl(178, 100%, 11%)
Moor-Monsterrgb(0, 89, 55)hsl(157, 100%, 17%)
Pesto di Rucolargb(120, 133, 56)hsl(70, 41%, 37%)
Lime It or Leave Itrgb(140, 173, 78)hsl(81, 38%, 49%)
Sea Foamrgb(112, 225, 209)hsl(172, 65%, 66%)
Snow Whitergb(233, 255, 240)hsl(139, 100%, 96%)

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.

  • Aa12.53:1 Super#003735 on #E9FFF0
  • Aa12.53:1 Super#E9FFF0 on #003735
  • Aa8.37:1 Very good#003735 on #70E1D1
  • Aa8.37:1 Very good#70E1D1 on #003735
  • Aa8.06:1 Very good#005937 on #E9FFF0
  • Aa8.06:1 Very good#E9FFF0 on #005937
  • Aa5.39:1 Good#005937 on #70E1D1
  • Aa5.39:1 Good#70E1D1 on #005937

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Elite Teal to Snow White — https://swatchly.xyz/palette/003735-005937-788538-8cad4e-70e1d1-e9fff0 */
:root {
  --elite-teal: #003735;
  --moor-monster: #005937;
  --pesto-di-rucola: #788538;
  --lime-it-or-leave-it: #8cad4e;
  --sea-foam: #70e1d1;
  --snow-white: #e9fff0;
}

Tailwind CSS v4

/* Elite Teal to Snow White — https://swatchly.xyz/palette/003735-005937-788538-8cad4e-70e1d1-e9fff0 */
@theme {
  --color-elite-teal: #003735;
  --color-elite-teal-50: #e0fcfa;
  --color-elite-teal-100: #d4f3f0;
  --color-elite-teal-200: #bbe0dd;
  --color-elite-teal-300: #a0cbc8;
  --color-elite-teal-400: #7caba8;
  --color-elite-teal-500: #5f8f8c;
  --color-elite-teal-600: #457370;
  --color-elite-teal-700: #305b59;
  --color-elite-teal-800: #214644;
  --color-elite-teal-900: #003735;
  --color-elite-teal-950: #0a201f;
  --color-moor-monster: #005937;
  --color-moor-monster-50: #ddffea;
  --color-moor-monster-100: #cbf8dd;
  --color-moor-monster-200: #b1e6c7;
  --color-moor-monster-300: #96d3b0;
  --color-moor-monster-400: #71b690;
  --color-moor-monster-500: #549c76;
  --color-moor-monster-600: #3a825d;
  --color-moor-monster-700: #256b4a;
  --color-moor-monster-800: #005937;
  --color-moor-monster-900: #09442b;
  --color-moor-monster-950: #022c19;
  --color-pesto-di-rucola: #788538;
  --color-pesto-di-rucola-50: #f0f9ce;
  --color-pesto-di-rucola-100: #e4eebd;
  --color-pesto-di-rucola-200: #ceda9f;
  --color-pesto-di-rucola-300: #b5c37f;
  --color-pesto-di-rucola-400: #94a257;
  --color-pesto-di-rucola-500: #788538;
  --color-pesto-di-rucola-600: #606c20;
  --color-pesto-di-rucola-700: #4c560c;
  --color-pesto-di-rucola-800: #3b4401;
  --color-pesto-di-rucola-900: #2d3500;
  --color-pesto-di-rucola-950: #1c2100;
  --color-lime-it-or-leave-it: #8cad4e;
  --color-lime-it-or-leave-it-50: #e9feca;
  --color-lime-it-or-leave-it-100: #ddf4b9;
  --color-lime-it-or-leave-it-200: #c7e29c;
  --color-lime-it-or-leave-it-300: #aecc7b;
  --color-lime-it-or-leave-it-400: #8cad4e;
  --color-lime-it-or-leave-it-500: #729131;
  --color-lime-it-or-leave-it-600: #597610;
  --color-lime-it-or-leave-it-700: #455e00;
  --color-lime-it-or-leave-it-800: #364a00;
  --color-lime-it-or-leave-it-900: #293900;
  --color-lime-it-or-leave-it-950: #182400;
  --color-sea-foam: #70e1d1;
  --color-sea-foam-50: #ebfffb;
  --color-sea-foam-100: #c7fff5;
  --color-sea-foam-200: #a7f0e4;
  --color-sea-foam-300: #70e1d1;
  --color-sea-foam-400: #54beaf;
  --color-sea-foam-500: #23a192;
  --color-sea-foam-600: #008276;
  --color-sea-foam-700: #00665c;
  --color-sea-foam-800: #004f47;
  --color-sea-foam-900: #003c36;
  --color-sea-foam-950: #002621;
  --color-snow-white: #e9fff0;
  --color-snow-white-50: #e9fff0;
  --color-snow-white-100: #e5f2e9;
  --color-snow-white-200: #cfded4;
  --color-snow-white-300: #b6c8bc;
  --color-snow-white-400: #95a89b;
  --color-snow-white-500: #798c7f;
  --color-snow-white-600: #5e7165;
  --color-snow-white-700: #495a4f;
  --color-snow-white-800: #38473d;
  --color-snow-white-900: #2a362e;
  --color-snow-white-950: #19221c;
}

Similar palettes