Gum Leaf to Nightmare Fuel Color Palette

About this palette

Gum Leaf to Nightmare Fuel is a 4-color muted, gradient palette: #ACCBB8 (Gum Leaf), #A09273 (A Frond in Need), #715C68 (Chimaera), #27313C (Nightmare Fuel). It mixes green, yellow, gray tones and feels balanced overall. The strongest text pairing is #ACCBB8 on #27313C with a contrast ratio of 7.54:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gum Leaf	rgb(172, 203, 184)	hsl(143, 23%, 74%)
A Frond in Need	rgb(160, 146, 115)	hsl(41, 19%, 54%)
Chimaera	rgb(113, 92, 104)	hsl(326, 10%, 40%)
Nightmare Fuel	rgb(39, 49, 60)	hsl(211, 21%, 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.

Aa7.54:1 Very good#ACCBB8 on #27313C
Aa7.54:1 Very good#27313C on #ACCBB8
Aa4.31:1 Poor#A09273 on #27313C
Aa4.31:1 Poor#27313C on #A09273
Aa3.49:1 Poor#ACCBB8 on #715C68
Aa3.49:1 Poor#715C68 on #ACCBB8

Color blindness preview

CSS variables

/* Gum Leaf to Nightmare Fuel — https://swatchly.xyz/palette/accbb8-a09273-715c68-27313c */
:root {
  --gum-leaf: #accbb8;
  --a-frond-in-need: #a09273;
  --chimaera: #715c68;
  --nightmare-fuel: #27313c;
}

Tailwind CSS v4

/* Gum Leaf to Nightmare Fuel — https://swatchly.xyz/palette/accbb8-a09273-715c68-27313c */
@theme {
  --color-gum-leaf: #accbb8;
  --color-gum-leaf-50: #eafbf0;
  --color-gum-leaf-100: #def2e6;
  --color-gum-leaf-200: #c8dfd1;
  --color-gum-leaf-300: #accbb8;
  --color-gum-leaf-400: #8eab99;
  --color-gum-leaf-500: #728f7d;
  --color-gum-leaf-600: #587463;
  --color-gum-leaf-700: #435d4d;
  --color-gum-leaf-800: #32493b;
  --color-gum-leaf-900: #25382d;
  --color-gum-leaf-950: #15231b;
  --color-a-frond-in-need: #a09273;
  --color-a-frond-in-need-50: #fff7e5;
  --color-a-frond-in-need-100: #f8efdc;
  --color-a-frond-in-need-200: #e8dec7;
  --color-a-frond-in-need-300: #d5c9af;
  --color-a-frond-in-need-400: #b9ac8e;
  --color-a-frond-in-need-500: #a09273;
  --color-a-frond-in-need-600: #827557;
  --color-a-frond-in-need-700: #685c40;
  --color-a-frond-in-need-800: #52472e;
  --color-a-frond-in-need-900: #3f3521;
  --color-a-frond-in-need-950: #272011;
  --color-chimaera: #715c68;
  --color-chimaera-50: #fef1f8;
  --color-chimaera-100: #f4e4ed;
  --color-chimaera-200: #e1ced8;
  --color-chimaera-300: #cab5c1;
  --color-chimaera-400: #aa94a0;
  --color-chimaera-500: #8d7784;
  --color-chimaera-600: #715c68;
  --color-chimaera-700: #5a4853;
  --color-chimaera-800: #473841;
  --color-chimaera-900: #382a32;
  --color-chimaera-950: #231a1f;
  --color-nightmare-fuel: #27313c;
  --color-nightmare-fuel-50: #eff6fe;
  --color-nightmare-fuel-100: #e4ecf5;
  --color-nightmare-fuel-200: #cfd9e3;
  --color-nightmare-fuel-300: #b7c2ce;
  --color-nightmare-fuel-400: #97a2af;
  --color-nightmare-fuel-500: #7b8693;
  --color-nightmare-fuel-600: #606b78;
  --color-nightmare-fuel-700: #4a545f;
  --color-nightmare-fuel-800: #38414a;
  --color-nightmare-fuel-900: #27313c;
  --color-nightmare-fuel-950: #191e23;
}