Emerald Oasis to Mana Tree Color Palette

About this palette

Emerald Oasis to Mana Tree is a 4-color cool palette: #6AA38C (Emerald Oasis), #A4C79D (Oh Pistachio), #004245 (Rich Black), #567639 (Mana Tree). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #A4C79D on #004245 with a contrast ratio of 6.02:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Emerald Oasis	rgb(106, 163, 140)	hsl(156, 24%, 53%)
Oh Pistachio	rgb(164, 199, 157)	hsl(110, 27%, 70%)
Rich Black	rgb(0, 66, 69)	hsl(183, 100%, 14%)
Mana Tree	rgb(86, 118, 57)	hsl(91, 35%, 34%)

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.

Aa6.02:1 Good#A4C79D on #004245
Aa6.02:1 Good#004245 on #A4C79D
Aa3.88:1 Poor#6AA38C on #004245
Aa3.88:1 Poor#004245 on #6AA38C

Color blindness preview

CSS variables

/* Emerald Oasis to Mana Tree — https://swatchly.xyz/palette/6aa38c-a4c79d-004245-567639 */
:root {
  --emerald-oasis: #6aa38c;
  --oh-pistachio: #a4c79d;
  --rich-black: #004245;
  --mana-tree: #567639;
}

Tailwind CSS v4

/* Emerald Oasis to Mana Tree — https://swatchly.xyz/palette/6aa38c-a4c79d-004245-567639 */
@theme {
  --color-emerald-oasis: #6aa38c;
  --color-emerald-oasis-50: #d8faeb;
  --color-emerald-oasis-100: #c8efde;
  --color-emerald-oasis-200: #addbc7;
  --color-emerald-oasis-300: #90c3ae;
  --color-emerald-oasis-400: #6aa38c;
  --color-emerald-oasis-500: #518973;
  --color-emerald-oasis-600: #3a705c;
  --color-emerald-oasis-700: #295b48;
  --color-emerald-oasis-800: #1c4838;
  --color-emerald-oasis-900: #13392c;
  --color-emerald-oasis-950: #08251b;
  --color-oh-pistachio: #a4c79d;
  --color-oh-pistachio-50: #e5f9e1;
  --color-oh-pistachio-100: #d8efd3;
  --color-oh-pistachio-200: #c1dcbb;
  --color-oh-pistachio-300: #a4c79d;
  --color-oh-pistachio-400: #87a880;
  --color-oh-pistachio-500: #6c8d66;
  --color-oh-pistachio-600: #54734e;
  --color-oh-pistachio-700: #405d3b;
  --color-oh-pistachio-800: #30492b;
  --color-oh-pistachio-900: #243920;
  --color-oh-pistachio-950: #152412;
  --color-rich-black: #004245;
  --color-rich-black-50: #ddfcfe;
  --color-rich-black-100: #d0f3f5;
  --color-rich-black-200: #b7e1e3;
  --color-rich-black-300: #9bcbce;
  --color-rich-black-400: #79aeb0;
  --color-rich-black-500: #5c9496;
  --color-rich-black-600: #437a7d;
  --color-rich-black-700: #306366;
  --color-rich-black-800: #215053;
  --color-rich-black-900: #004245;
  --color-rich-black-950: #0a292b;
  --color-mana-tree: #567639;
  --color-mana-tree-50: #e8fdd9;
  --color-mana-tree-100: #ddf4cb;
  --color-mana-tree-200: #c6e1b1;
  --color-mana-tree-300: #adcc95;
  --color-mana-tree-400: #8cad70;
  --color-mana-tree-500: #709153;
  --color-mana-tree-600: #567639;
  --color-mana-tree-700: #425e27;
  --color-mana-tree-800: #324a19;
  --color-mana-tree-900: #253910;
  --color-mana-tree-950: #152406;
}