Rooftop Garden to Underworld color palette

9BAE96Rooftop Garden C8E2C7Endive 4B6246Muddy Olive 778973Majestic Evergreen 384830Palm Leaf 1D231BUnderworld

Open in generator Export PNG, PDF, ASE…

About this palette

Rooftop Garden to Underworld is a 6-color muted, cool, earthy palette: #9BAE96 (Rooftop Garden), #C8E2C7 (Endive), #4B6246 (Muddy Olive), #778973 (Majestic Evergreen), #384830 (Palm Leaf), #1D231B (Underworld). It mixes green, gray tones and feels cool overall. The strongest text pairing is #C8E2C7 on #1D231B with a contrast ratio of 11.59:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rooftop Garden	rgb(155, 174, 150)	hsl(108, 13%, 64%)
Endive	rgb(200, 226, 199)	hsl(118, 32%, 83%)
Muddy Olive	rgb(75, 98, 70)	hsl(109, 17%, 33%)
Majestic Evergreen	rgb(119, 137, 115)	hsl(109, 9%, 49%)
Palm Leaf	rgb(56, 72, 48)	hsl(100, 20%, 24%)
Underworld	rgb(29, 35, 27)	hsl(105, 13%, 12%)

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.59:1 Very good#C8E2C7 on #1D231B
Aa11.59:1 Very good#1D231B on #C8E2C7
Aa7.09:1 Very good#C8E2C7 on #384830
Aa7.09:1 Very good#384830 on #C8E2C7
Aa6.79:1 Good#9BAE96 on #1D231B
Aa6.79:1 Good#1D231B on #9BAE96
Aa4.84:1 Good#C8E2C7 on #4B6246
Aa4.84:1 Good#4B6246 on #C8E2C7

Color blindness preview

CSS variables

/* Rooftop Garden to Underworld — https://swatchly.xyz/palette/9bae96-c8e2c7-4b6246-778973-384830-1d231b */
:root {
  --rooftop-garden: #9bae96;
  --endive: #c8e2c7;
  --muddy-olive: #4b6246;
  --majestic-evergreen: #778973;
  --palm-leaf: #384830;
  --underworld: #1d231b;
}

Tailwind CSS v4

/* Rooftop Garden to Underworld — https://swatchly.xyz/palette/9bae96-c8e2c7-4b6246-778973-384830-1d231b */
@theme {
  --color-rooftop-garden: #9bae96;
  --color-rooftop-garden-50: #f0fbed;
  --color-rooftop-garden-100: #e7f3e3;
  --color-rooftop-garden-200: #d2e1cf;
  --color-rooftop-garden-300: #bbccb7;
  --color-rooftop-garden-400: #9bae96;
  --color-rooftop-garden-500: #7f917a;
  --color-rooftop-garden-600: #64755f;
  --color-rooftop-garden-700: #4d5d49;
  --color-rooftop-garden-800: #3b4937;
  --color-rooftop-garden-900: #2c3829;
  --color-rooftop-garden-950: #1a2218;
  --color-endive: #c8e2c7;
  --color-endive-50: #edfbec;
  --color-endive-100: #e2f2e2;
  --color-endive-200: #c8e2c7;
  --color-endive-300: #b4cab3;
  --color-endive-400: #93aa92;
  --color-endive-500: #778f76;
  --color-endive-600: #5d745c;
  --color-endive-700: #475c47;
  --color-endive-800: #364835;
  --color-endive-900: #283728;
  --color-endive-950: #182317;
  --color-muddy-olive: #4b6246;
  --color-muddy-olive-50: #ebfae8;
  --color-muddy-olive-100: #e0f1dd;
  --color-muddy-olive-200: #ccdfc7;
  --color-muddy-olive-300: #b4cab0;
  --color-muddy-olive-400: #94ad8f;
  --color-muddy-olive-500: #7a9274;
  --color-muddy-olive-600: #61785b;
  --color-muddy-olive-700: #4b6246;
  --color-muddy-olive-800: #3a4d36;
  --color-muddy-olive-900: #2b3b28;
  --color-muddy-olive-950: #1a2517;
  --color-majestic-evergreen: #778973;
  --color-majestic-evergreen-50: #edf8eb;
  --color-majestic-evergreen-100: #e2eedf;
  --color-majestic-evergreen-200: #ccdbc9;
  --color-majestic-evergreen-300: #b4c4b0;
  --color-majestic-evergreen-400: #93a58f;
  --color-majestic-evergreen-500: #778973;
  --color-majestic-evergreen-600: #5e6f5a;
  --color-majestic-evergreen-700: #495846;
  --color-majestic-evergreen-800: #384535;
  --color-majestic-evergreen-900: #2a3628;
  --color-majestic-evergreen-950: #192118;
  --color-palm-leaf: #384830;
  --color-palm-leaf-50: #eef9e9;
  --color-palm-leaf-100: #e3f0de;
  --color-palm-leaf-200: #ceddc7;
  --color-palm-leaf-300: #b6c7af;
  --color-palm-leaf-400: #96a88e;
  --color-palm-leaf-500: #7b8d72;
  --color-palm-leaf-600: #617259;
  --color-palm-leaf-700: #4b5b44;
  --color-palm-leaf-800: #384830;
  --color-palm-leaf-900: #2c3726;
  --color-palm-leaf-950: #1a2216;
  --color-underworld: #1d231b;
  --color-underworld-50: #f2f7f1;
  --color-underworld-100: #e8ede6;
  --color-underworld-200: #d3dad1;
  --color-underworld-300: #bcc3ba;
  --color-underworld-400: #9da49a;
  --color-underworld-500: #82897f;
  --color-underworld-600: #686f65;
  --color-underworld-700: #525850;
  --color-underworld-800: #40463e;
  --color-underworld-900: #313630;
  --color-underworld-950: #1d231b;
}