Rooftop Garden to Heavy Metal color palette

9AB099Rooftop Garden 767095Bureaucracy D3C5B0Pistachio Shell 1D1C28Night Demons 484433Heavy Metal

About this palette

Rooftop Garden to Heavy Metal is a 5-color muted palette: #9AB099 (Rooftop Garden), #767095 (Bureaucracy), #D3C5B0 (Pistachio Shell), #1D1C28 (Night Demons), #484433 (Heavy Metal). It mixes green, purple, gray tones and feels cool overall. The strongest text pairing is #D3C5B0 on #1D1C28 with a contrast ratio of 9.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rooftop Garden	rgb(154, 176, 153)	hsl(117, 13%, 65%)
Bureaucracy	rgb(118, 112, 149)	hsl(250, 15%, 51%)
Pistachio Shell	rgb(211, 197, 176)	hsl(36, 28%, 76%)
Night Demons	rgb(29, 28, 40)	hsl(245, 18%, 13%)
Heavy Metal	rgb(72, 68, 51)	hsl(49, 17%, 24%)

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.91:1 Very good#D3C5B0 on #1D1C28
Aa9.91:1 Very good#1D1C28 on #D3C5B0
Aa7.24:1 Very good#9AB099 on #1D1C28
Aa7.24:1 Very good#1D1C28 on #9AB099
Aa5.76:1 Good#D3C5B0 on #484433
Aa5.76:1 Good#484433 on #D3C5B0
Aa4.21:1 Poor#9AB099 on #484433
Aa4.21:1 Poor#484433 on #9AB099

Color blindness preview

CSS variables

/* Rooftop Garden to Heavy Metal — https://swatchly.xyz/palette/9ab099-767095-d3c5b0-1d1c28-484433 */
:root {
  --rooftop-garden: #9ab099;
  --bureaucracy: #767095;
  --pistachio-shell: #d3c5b0;
  --night-demons: #1d1c28;
  --heavy-metal: #484433;
}

Tailwind CSS v4

/* Rooftop Garden to Heavy Metal — https://swatchly.xyz/palette/9ab099-767095-d3c5b0-1d1c28-484433 */
@theme {
  --color-rooftop-garden: #9ab099;
  --color-rooftop-garden-50: #f0fcef;
  --color-rooftop-garden-100: #e6f4e5;
  --color-rooftop-garden-200: #d2e2d1;
  --color-rooftop-garden-300: #bbcdba;
  --color-rooftop-garden-400: #9ab099;
  --color-rooftop-garden-500: #7e937d;
  --color-rooftop-garden-600: #627762;
  --color-rooftop-garden-700: #4c5e4b;
  --color-rooftop-garden-800: #394a39;
  --color-rooftop-garden-900: #2a382a;
  --color-rooftop-garden-950: #192218;
  --color-bureaucracy: #767095;
  --color-bureaucracy-50: #f5f3ff;
  --color-bureaucracy-100: #edeaff;
  --color-bureaucracy-200: #dbd7f5;
  --color-bureaucracy-300: #c6c2e3;
  --color-bureaucracy-400: #a9a3c8;
  --color-bureaucracy-500: #8f89af;
  --color-bureaucracy-600: #767095;
  --color-bureaucracy-700: #5e587a;
  --color-bureaucracy-800: #494461;
  --color-bureaucracy-900: #37334c;
  --color-bureaucracy-950: #221f31;
  --color-pistachio-shell: #d3c5b0;
  --color-pistachio-shell-50: #fff7ec;
  --color-pistachio-shell-100: #f7eee1;
  --color-pistachio-shell-200: #e5dbcc;
  --color-pistachio-shell-300: #d3c5b0;
  --color-pistachio-shell-400: #b1a591;
  --color-pistachio-shell-500: #958874;
  --color-pistachio-shell-600: #796d5a;
  --color-pistachio-shell-700: #615544;
  --color-pistachio-shell-800: #4b4233;
  --color-pistachio-shell-900: #3a3125;
  --color-pistachio-shell-950: #241e15;
  --color-night-demons: #1d1c28;
  --color-night-demons-50: #f4f4fd;
  --color-night-demons-100: #eaeaf4;
  --color-night-demons-200: #d7d6e2;
  --color-night-demons-300: #c0bfcd;
  --color-night-demons-400: #a0a0af;
  --color-night-demons-500: #858493;
  --color-night-demons-600: #6a6978;
  --color-night-demons-700: #535360;
  --color-night-demons-800: #40404b;
  --color-night-demons-900: #31303a;
  --color-night-demons-950: #1d1c28;
  --color-heavy-metal: #484433;
  --color-heavy-metal-50: #f8f5ea;
  --color-heavy-metal-100: #eeebdf;
  --color-heavy-metal-200: #dbd8c9;
  --color-heavy-metal-300: #c5c1b0;
  --color-heavy-metal-400: #a7a290;
  --color-heavy-metal-500: #8c8774;
  --color-heavy-metal-600: #716d5b;
  --color-heavy-metal-700: #5b5746;
  --color-heavy-metal-800: #484433;
  --color-heavy-metal-900: #373428;
  --color-heavy-metal-950: #222017;
}