Muddy Green to Tropical Forest Color Palette

About this palette

Muddy Green to Tropical Forest is a 4-color earthy, vintage palette: #676D2D (Muddy Green), #9C9E3A (Lazy Lizard), #D7EACA (Breath of Celery), #00493D (Tropical Forest). It mixes green, yellow, turquoise tones and feels balanced overall. The strongest text pairing is #D7EACA on #00493D with a contrast ratio of 8.17:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Green	rgb(103, 109, 45)	hsl(66, 42%, 30%)
Lazy Lizard	rgb(156, 158, 58)	hsl(61, 46%, 42%)
Breath of Celery	rgb(215, 234, 202)	hsl(96, 43%, 85%)
Tropical Forest	rgb(0, 73, 61)	hsl(170, 100%, 14%)

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.17:1 Very good#D7EACA on #00493D
Aa8.17:1 Very good#00493D on #D7EACA
Aa4.34:1 Poor#676D2D on #D7EACA
Aa4.34:1 Poor#D7EACA on #676D2D
Aa3.65:1 Poor#9C9E3A on #00493D
Aa3.65:1 Poor#00493D on #9C9E3A

Color blindness preview

CSS variables

/* Muddy Green to Tropical Forest — https://swatchly.xyz/palette/676d2d-9c9e3a-d7eaca-00493d */
:root {
  --muddy-green: #676d2d;
  --lazy-lizard: #9c9e3a;
  --breath-of-celery: #d7eaca;
  --tropical-forest: #00493d;
}

Tailwind CSS v4

/* Muddy Green to Tropical Forest — https://swatchly.xyz/palette/676d2d-9c9e3a-d7eaca-00493d */
@theme {
  --color-muddy-green: #676d2d;
  --color-muddy-green-50: #f4f9d5;
  --color-muddy-green-100: #e9efc6;
  --color-muddy-green-200: #d5dbaa;
  --color-muddy-green-300: #bdc58c;
  --color-muddy-green-400: #9ea566;
  --color-muddy-green-500: #828849;
  --color-muddy-green-600: #676d2d;
  --color-muddy-green-700: #51571d;
  --color-muddy-green-800: #3f4410;
  --color-muddy-green-900: #313407;
  --color-muddy-green-950: #1e2002;
  --color-lazy-lizard: #9c9e3a;
  --color-lazy-lizard-50: #f4f7c0;
  --color-lazy-lizard-100: #e8ebae;
  --color-lazy-lizard-200: #d3d78d;
  --color-lazy-lizard-300: #bcbf6a;
  --color-lazy-lizard-400: #9c9e3a;
  --color-lazy-lizard-500: #838418;
  --color-lazy-lizard-600: #6a6b00;
  --color-lazy-lizard-700: #545500;
  --color-lazy-lizard-800: #424300;
  --color-lazy-lizard-900: #343400;
  --color-lazy-lizard-950: #212100;
  --color-breath-of-celery: #d7eaca;
  --color-breath-of-celery-50: #e7f2df;
  --color-breath-of-celery-100: #d7eaca;
  --color-breath-of-celery-200: #c8d6be;
  --color-breath-of-celery-300: #b2c2a7;
  --color-breath-of-celery-400: #93a487;
  --color-breath-of-celery-500: #798a6d;
  --color-breath-of-celery-600: #607155;
  --color-breath-of-celery-700: #4c5b42;
  --color-breath-of-celery-800: #3a4731;
  --color-breath-of-celery-900: #2c3724;
  --color-breath-of-celery-950: #1a2215;
  --color-tropical-forest: #00493d;
  --color-tropical-forest-50: #dcfef5;
  --color-tropical-forest-100: #cff5eb;
  --color-tropical-forest-200: #b6e3d7;
  --color-tropical-forest-300: #98cdbf;
  --color-tropical-forest-400: #73ad9f;
  --color-tropical-forest-500: #559183;
  --color-tropical-forest-600: #3a7568;
  --color-tropical-forest-700: #265c51;
  --color-tropical-forest-800: #00493d;
  --color-tropical-forest-900: #0d372f;
  --color-tropical-forest-950: #05221c;
}