Overgrown Citadel to Darkest Forest color palette

828F49Overgrown Citadel 454D00Godzilla A8B950Sapling E0ECCBBreath of Celery 233000Darkest Forest

About this palette

Overgrown Citadel to Darkest Forest is a 5-color cool, earthy, monochromatic palette: #828F49 (Overgrown Citadel), #454D00 (Godzilla), #A8B950 (Sapling), #E0ECCB (Breath of Celery), #233000 (Darkest Forest). It mixes green tones and feels cool overall. The strongest text pairing is #E0ECCB on #233000 with a contrast ratio of 11.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Overgrown Citadel	rgb(130, 143, 73)	hsl(71, 32%, 42%)
Godzilla	rgb(69, 77, 0)	hsl(66, 100%, 15%)
Sapling	rgb(168, 185, 80)	hsl(70, 43%, 52%)
Breath of Celery	rgb(224, 236, 203)	hsl(82, 46%, 86%)
Darkest Forest	rgb(35, 48, 0)	hsl(76, 100%, 9%)

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.

Aa11.40:1 Very good#E0ECCB on #233000
Aa11.40:1 Very good#233000 on #E0ECCB
Aa7.36:1 Very good#454D00 on #E0ECCB
Aa7.36:1 Very good#E0ECCB on #454D00
Aa6.51:1 Good#A8B950 on #233000
Aa6.51:1 Good#233000 on #A8B950
Aa4.20:1 Poor#454D00 on #A8B950
Aa4.20:1 Poor#A8B950 on #454D00

Color blindness preview

CSS variables

/* Overgrown Citadel to Darkest Forest — https://swatchly.xyz/palette/828f49-454d00-a8b950-e0eccb-233000 */
:root {
  --overgrown-citadel: #828f49;
  --godzilla: #454d00;
  --sapling: #a8b950;
  --breath-of-celery: #e0eccb;
  --darkest-forest: #233000;
}

Tailwind CSS v4

/* Overgrown Citadel to Darkest Forest — https://swatchly.xyz/palette/828f49-454d00-a8b950-e0eccb-233000 */
@theme {
  --color-overgrown-citadel: #828f49;
  --color-overgrown-citadel-50: #f2fbd3;
  --color-overgrown-citadel-100: #e8f2c5;
  --color-overgrown-citadel-200: #d3dfaa;
  --color-overgrown-citadel-300: #bdc98d;
  --color-overgrown-citadel-400: #9daa67;
  --color-overgrown-citadel-500: #828f49;
  --color-overgrown-citadel-600: #68742f;
  --color-overgrown-citadel-700: #525c1b;
  --color-overgrown-citadel-800: #3f480c;
  --color-overgrown-citadel-900: #303804;
  --color-overgrown-citadel-950: #1d2301;
  --color-godzilla: #454d00;
  --color-godzilla-50: #f3fad4;
  --color-godzilla-100: #e8f1c6;
  --color-godzilla-200: #d4deab;
  --color-godzilla-300: #bfc98f;
  --color-godzilla-400: #a0ab6a;
  --color-godzilla-500: #86904d;
  --color-godzilla-600: #6c7634;
  --color-godzilla-700: #575f21;
  --color-godzilla-800: #454d00;
  --color-godzilla-900: #353b08;
  --color-godzilla-950: #212502;
  --color-sapling: #a8b950;
  --color-sapling-50: #f6ffd8;
  --color-sapling-100: #eef9c0;
  --color-sapling-200: #dbe9a4;
  --color-sapling-300: #c6d584;
  --color-sapling-400: #a8b950;
  --color-sapling-500: #8b9a30;
  --color-sapling-600: #6f7d00;
  --color-sapling-700: #576200;
  --color-sapling-800: #434c00;
  --color-sapling-900: #323900;
  --color-sapling-950: #1d2200;
  --color-breath-of-celery: #e0eccb;
  --color-breath-of-celery-50: #edf4e1;
  --color-breath-of-celery-100: #e0eccb;
  --color-breath-of-celery-200: #cfd8bf;
  --color-breath-of-celery-300: #b8c2a7;
  --color-breath-of-celery-400: #9aa486;
  --color-breath-of-celery-500: #7f8a6c;
  --color-breath-of-celery-600: #667053;
  --color-breath-of-celery-700: #50593f;
  --color-breath-of-celery-800: #3e462f;
  --color-breath-of-celery-900: #2f3623;
  --color-breath-of-celery-950: #1d2114;
  --color-darkest-forest: #233000;
  --color-darkest-forest-50: #effade;
  --color-darkest-forest-100: #e5f1d1;
  --color-darkest-forest-200: #d0deb8;
  --color-darkest-forest-300: #b8c89d;
  --color-darkest-forest-400: #96a878;
  --color-darkest-forest-500: #7a8a5a;
  --color-darkest-forest-600: #5e6e40;
  --color-darkest-forest-700: #48552c;
  --color-darkest-forest-800: #35401d;
  --color-darkest-forest-900: #233000;
  --color-darkest-forest-950: #151c08;
}