Rooftop Garden to Forestry color palette

9DB392Rooftop Garden F8E8FFPerfume Haze 4F6E4AUnder the Radar D3B4DABlushing Sky 9A78A3Drama Queen 354320Forestry

Open in generator Export PNG, PDF, ASE…

About this palette

Rooftop Garden to Forestry is a 6-color muted, cool palette: #9DB392 (Rooftop Garden), #F8E8FF (Perfume Haze), #4F6E4A (Under the Radar), #D3B4DA (Blushing Sky), #9A78A3 (Drama Queen), #354320 (Forestry). It mixes green, white, purple tones and feels cool overall. The strongest text pairing is #F8E8FF on #354320 with a contrast ratio of 9.10:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rooftop Garden	rgb(157, 179, 146)	hsl(100, 18%, 64%)
Perfume Haze	rgb(248, 232, 255)	hsl(282, 100%, 95%)
Under the Radar	rgb(79, 110, 74)	hsl(112, 20%, 36%)
Blushing Sky	rgb(211, 180, 218)	hsl(289, 34%, 78%)
Drama Queen	rgb(154, 120, 163)	hsl(287, 19%, 55%)
Forestry	rgb(53, 67, 32)	hsl(84, 35%, 19%)

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.

Aa9.10:1 Very good#F8E8FF on #354320
Aa9.10:1 Very good#354320 on #F8E8FF
Aa5.73:1 Good#D3B4DA on #354320
Aa5.73:1 Good#354320 on #D3B4DA
Aa4.91:1 Good#F8E8FF on #4F6E4A
Aa4.91:1 Good#4F6E4A on #F8E8FF
Aa4.71:1 Good#9DB392 on #354320
Aa4.71:1 Good#354320 on #9DB392

Color blindness preview

CSS variables

/* Rooftop Garden to Forestry — https://swatchly.xyz/palette/9db392-f8e8ff-4f6e4a-d3b4da-9a78a3-354320 */
:root {
  --rooftop-garden: #9db392;
  --perfume-haze: #f8e8ff;
  --under-the-radar: #4f6e4a;
  --blushing-sky: #d3b4da;
  --drama-queen: #9a78a3;
  --forestry: #354320;
}

Tailwind CSS v4

/* Rooftop Garden to Forestry — https://swatchly.xyz/palette/9db392-f8e8ff-4f6e4a-d3b4da-9a78a3-354320 */
@theme {
  --color-rooftop-garden: #9db392;
  --color-rooftop-garden-50: #f1fdeb;
  --color-rooftop-garden-100: #e8f5e1;
  --color-rooftop-garden-200: #d4e4cc;
  --color-rooftop-garden-300: #bdd0b4;
  --color-rooftop-garden-400: #9db392;
  --color-rooftop-garden-500: #809576;
  --color-rooftop-garden-600: #65795a;
  --color-rooftop-garden-700: #4e6044;
  --color-rooftop-garden-800: #3b4b32;
  --color-rooftop-garden-900: #2b3924;
  --color-rooftop-garden-950: #192314;
  --color-perfume-haze: #f8e8ff;
  --color-perfume-haze-50: #fcf5ff;
  --color-perfume-haze-100: #f8e8ff;
  --color-perfume-haze-200: #e1d6e6;
  --color-perfume-haze-300: #cbbed0;
  --color-perfume-haze-400: #ab9db2;
  --color-perfume-haze-500: #908196;
  --color-perfume-haze-600: #74667a;
  --color-perfume-haze-700: #5c5062;
  --color-perfume-haze-800: #493e4d;
  --color-perfume-haze-900: #382f3c;
  --color-perfume-haze-950: #231c26;
  --color-under-the-radar: #4f6e4a;
  --color-under-the-radar-50: #e8fce5;
  --color-under-the-radar-100: #dbf1d7;
  --color-under-the-radar-200: #c3ddbf;
  --color-under-the-radar-300: #a9c7a4;
  --color-under-the-radar-400: #86a781;
  --color-under-the-radar-500: #6a8a65;
  --color-under-the-radar-600: #4f6e4a;
  --color-under-the-radar-700: #3d5838;
  --color-under-the-radar-800: #2e452a;
  --color-under-the-radar-900: #22361f;
  --color-under-the-radar-950: #132111;
  --color-blushing-sky: #d3b4da;
  --color-blushing-sky-50: #fcf0ff;
  --color-blushing-sky-100: #f7e3fb;
  --color-blushing-sky-200: #e5ceeb;
  --color-blushing-sky-300: #d3b4da;
  --color-blushing-sky-400: #b295b9;
  --color-blushing-sky-500: #977a9e;
  --color-blushing-sky-600: #7c6082;
  --color-blushing-sky-700: #644b69;
  --color-blushing-sky-800: #4f3954;
  --color-blushing-sky-900: #3d2b42;
  --color-blushing-sky-950: #271a2a;
  --color-drama-queen: #9a78a3;
  --color-drama-queen-50: #fcf1ff;
  --color-drama-queen-100: #f9e2ff;
  --color-drama-queen-200: #e8cdef;
  --color-drama-queen-300: #d3b4db;
  --color-drama-queen-400: #b594be;
  --color-drama-queen-500: #9a78a3;
  --color-drama-queen-600: #7e5e87;
  --color-drama-queen-700: #66496e;
  --color-drama-queen-800: #513758;
  --color-drama-queen-900: #3f2945;
  --color-drama-queen-950: #28182c;
  --color-forestry: #354320;
  --color-forestry-50: #effae3;
  --color-forestry-100: #e5f0d7;
  --color-forestry-200: #d0ddbf;
  --color-forestry-300: #b7c6a4;
  --color-forestry-400: #96a781;
  --color-forestry-500: #7a8a64;
  --color-forestry-600: #5f6e4b;
  --color-forestry-700: #495636;
  --color-forestry-800: #354320;
  --color-forestry-900: #29331b;
  --color-forestry-950: #181f0f;
}