Nature to Elite Teal Color Palette

About this palette

Nature to Elite Teal is a 5-color muted, cool, gradient palette: #C0D5B5 (Nature), #90B5AE (Treetop), #789475 (Paying Mantis), #3E5F59 (Rosemary), #1C2F33 (Elite Teal). It mixes green, turquoise, gray tones and feels cool overall. The strongest text pairing is #C0D5B5 on #1C2F33 with a contrast ratio of 8.93:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nature	rgb(192, 213, 181)	hsl(99, 28%, 77%)
Treetop	rgb(144, 181, 174)	hsl(169, 20%, 64%)
Paying Mantis	rgb(120, 148, 117)	hsl(114, 13%, 52%)
Rosemary	rgb(62, 95, 89)	hsl(169, 21%, 31%)
Elite Teal	rgb(28, 47, 51)	hsl(190, 29%, 15%)

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.93:1 Very good#C0D5B5 on #1C2F33
Aa8.93:1 Very good#1C2F33 on #C0D5B5
Aa6.26:1 Good#90B5AE on #1C2F33
Aa6.26:1 Good#1C2F33 on #90B5AE
Aa4.50:1 Poor#C0D5B5 on #3E5F59
Aa4.50:1 Poor#3E5F59 on #C0D5B5
Aa4.18:1 Poor#789475 on #1C2F33
Aa4.18:1 Poor#1C2F33 on #789475

Color blindness preview

CSS variables

/* Nature to Elite Teal — https://swatchly.xyz/palette/c0d5b5-90b5ae-789475-3e5f59-1c2f33 */
:root {
  --nature: #c0d5b5;
  --treetop: #90b5ae;
  --paying-mantis: #789475;
  --rosemary: #3e5f59;
  --elite-teal: #1c2f33;
}

Tailwind CSS v4

/* Nature to Elite Teal — https://swatchly.xyz/palette/c0d5b5-90b5ae-789475-3e5f59-1c2f33 */
@theme {
  --color-nature: #c0d5b5;
  --color-nature-50: #e6f3df;
  --color-nature-100: #d9e8d2;
  --color-nature-200: #c0d5b5;
  --color-nature-300: #adbfa3;
  --color-nature-400: #8fa284;
  --color-nature-500: #75886b;
  --color-nature-600: #5d6f53;
  --color-nature-700: #495a40;
  --color-nature-800: #394731;
  --color-nature-900: #2b3724;
  --color-nature-950: #1a2215;
  --color-treetop: #90b5ae;
  --color-treetop-50: #eafefa;
  --color-treetop-100: #e0f6f2;
  --color-treetop-200: #cbe5e0;
  --color-treetop-300: #b3d2cc;
  --color-treetop-400: #90b5ae;
  --color-treetop-500: #739791;
  --color-treetop-600: #587a74;
  --color-treetop-700: #41615c;
  --color-treetop-800: #2f4c47;
  --color-treetop-900: #223a35;
  --color-treetop-950: #122320;
  --color-paying-mantis: #789475;
  --color-paying-mantis-50: #ebfce9;
  --color-paying-mantis-100: #e1f3df;
  --color-paying-mantis-200: #cce1c9;
  --color-paying-mantis-300: #b4cdb1;
  --color-paying-mantis-400: #93af90;
  --color-paying-mantis-500: #789475;
  --color-paying-mantis-600: #5d785b;
  --color-paying-mantis-700: #476045;
  --color-paying-mantis-800: #364b34;
  --color-paying-mantis-900: #283a26;
  --color-paying-mantis-950: #172416;
  --color-rosemary: #3e5f59;
  --color-rosemary-50: #e6faf6;
  --color-rosemary-100: #daf1ec;
  --color-rosemary-200: #c4dfd9;
  --color-rosemary-300: #abc9c3;
  --color-rosemary-400: #89aba4;
  --color-rosemary-500: #6e9089;
  --color-rosemary-600: #54756f;
  --color-rosemary-700: #3e5f59;
  --color-rosemary-800: #2f4a45;
  --color-rosemary-900: #223935;
  --color-rosemary-950: #132421;
  --color-elite-teal: #1c2f33;
  --color-elite-teal-50: #ebf8fb;
  --color-elite-teal-100: #e0eef1;
  --color-elite-teal-200: #cadbdf;
  --color-elite-teal-300: #b2c5c9;
  --color-elite-teal-400: #8fa4a9;
  --color-elite-teal-500: #72888c;
  --color-elite-teal-600: #576c70;
  --color-elite-teal-700: #415457;
  --color-elite-teal-800: #303f42;
  --color-elite-teal-900: #1c2f33;
  --color-elite-teal-950: #131b1d;
}