Sweet Mint Pesto to Realm of the Underworld color palette

B6E899Sweet Mint Pesto 82B743Ultra Green 4D872BOvergrown Mausoleum 284100Realm of the Underworld

About this palette

Sweet Mint Pesto to Realm of the Underworld is a 4-color cool, monochromatic, gradient palette: #B6E899 (Sweet Mint Pesto), #82B743 (Ultra Green), #4D872B (Overgrown Mausoleum), #284100 (Realm of the Underworld). It mixes green tones and feels cool overall. The strongest text pairing is #B6E899 on #284100 with a contrast ratio of 8.12:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweet Mint Pesto	rgb(182, 232, 153)	hsl(98, 63%, 75%)
Ultra Green	rgb(130, 183, 67)	hsl(87, 46%, 49%)
Overgrown Mausoleum	rgb(77, 135, 43)	hsl(98, 52%, 35%)
Realm of the Underworld	rgb(40, 65, 0)	hsl(83, 100%, 13%)

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.12:1 Very good#B6E899 on #284100
Aa8.12:1 Very good#284100 on #B6E899
Aa4.77:1 Good#82B743 on #284100
Aa4.77:1 Good#284100 on #82B743
Aa3.11:1 Poor#B6E899 on #4D872B
Aa3.11:1 Poor#4D872B on #B6E899

Color blindness preview

CSS variables

/* Sweet Mint Pesto to Realm of the Underworld — https://swatchly.xyz/palette/b6e899-82b743-4d872b-284100 */
:root {
  --sweet-mint-pesto: #b6e899;
  --ultra-green: #82b743;
  --overgrown-mausoleum: #4d872b;
  --realm-of-the-underworld: #284100;
}

Tailwind CSS v4

/* Sweet Mint Pesto to Realm of the Underworld — https://swatchly.xyz/palette/b6e899-82b743-4d872b-284100 */
@theme {
  --color-sweet-mint-pesto: #b6e899;
  --color-sweet-mint-pesto-50: #e3ffd3;
  --color-sweet-mint-pesto-100: #d6f6c5;
  --color-sweet-mint-pesto-200: #b6e899;
  --color-sweet-mint-pesto-300: #a5cf8d;
  --color-sweet-mint-pesto-400: #83b067;
  --color-sweet-mint-pesto-500: #67954a;
  --color-sweet-mint-pesto-600: #4e7a30;
  --color-sweet-mint-pesto-700: #3a621d;
  --color-sweet-mint-pesto-800: #2a4d0f;
  --color-sweet-mint-pesto-900: #1e3c06;
  --color-sweet-mint-pesto-950: #102601;
  --color-ultra-green: #82b743;
  --color-ultra-green-50: #e9ffd5;
  --color-ultra-green-100: #d7fab7;
  --color-ultra-green-200: #c0e998;
  --color-ultra-green-300: #a6d476;
  --color-ultra-green-400: #82b743;
  --color-ultra-green-500: #679a20;
  --color-ultra-green-600: #4f7d00;
  --color-ultra-green-700: #3e6300;
  --color-ultra-green-800: #2f4d00;
  --color-ultra-green-900: #233b00;
  --color-ultra-green-950: #142500;
  --color-overgrown-mausoleum: #4d872b;
  --color-overgrown-mausoleum-50: #e4ffd7;
  --color-overgrown-mausoleum-100: #d4fbc3;
  --color-overgrown-mausoleum-200: #beeba9;
  --color-overgrown-mausoleum-300: #a4d88c;
  --color-overgrown-mausoleum-400: #82bb66;
  --color-overgrown-mausoleum-500: #66a147;
  --color-overgrown-mausoleum-600: #4d872b;
  --color-overgrown-mausoleum-700: #376d12;
  --color-overgrown-mausoleum-800: #265600;
  --color-overgrown-mausoleum-900: #1c4200;
  --color-overgrown-mausoleum-950: #0f2900;
  --color-realm-of-the-underworld: #284100;
  --color-realm-of-the-underworld-50: #eafdd9;
  --color-realm-of-the-underworld-100: #dff3cc;
  --color-realm-of-the-underworld-200: #c9e1b2;
  --color-realm-of-the-underworld-300: #b0cc96;
  --color-realm-of-the-underworld-400: #91ae73;
  --color-realm-of-the-underworld-500: #769457;
  --color-realm-of-the-underworld-600: #5d793f;
  --color-realm-of-the-underworld-700: #49632c;
  --color-realm-of-the-underworld-800: #394f1e;
  --color-realm-of-the-underworld-900: #284100;
  --color-realm-of-the-underworld-950: #1a2908;
}