Start generating

Fennelly to Nightmare color palette

969F82Fennelly212617Underworld545F3ECypress7A866DWreathB2C4A3Camping Grounds111B04Nightmare
Open in generator Export PNG, PDF, ASE…

About this palette

Fennelly to Nightmare is a 6-color muted, cool, earthy palette: #969F82 (Fennelly), #212617 (Underworld), #545F3E (Cypress), #7A866D (Wreath), #B2C4A3 (Camping Grounds), #111B04 (Nightmare). It mixes green, gray tones and feels cool overall. The strongest text pairing is #B2C4A3 on #111B04 with a contrast ratio of 9.57:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Fennellyrgb(150, 159, 130)hsl(79, 13%, 57%)
Underworldrgb(33, 38, 23)hsl(80, 25%, 12%)
Cypressrgb(84, 95, 62)hsl(80, 21%, 31%)
Wreathrgb(122, 134, 109)hsl(89, 10%, 48%)
Camping Groundsrgb(178, 196, 163)hsl(93, 22%, 70%)
Nightmarergb(17, 27, 4)hsl(86, 74%, 6%)

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.57:1 Very good#B2C4A3 on #111B04
  • Aa9.57:1 Very good#111B04 on #B2C4A3
  • Aa8.36:1 Very good#212617 on #B2C4A3
  • Aa8.36:1 Very good#B2C4A3 on #212617
  • Aa6.41:1 Good#969F82 on #111B04
  • Aa6.41:1 Good#111B04 on #969F82
  • Aa5.60:1 Good#969F82 on #212617
  • Aa5.60:1 Good#212617 on #969F82

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Fennelly to Nightmare — https://swatchly.xyz/palette/969f82-212617-545f3e-7a866d-b2c4a3-111b04 */
:root {
  --fennelly: #969f82;
  --underworld: #212617;
  --cypress: #545f3e;
  --wreath: #7a866d;
  --camping-grounds: #b2c4a3;
  --nightmare: #111b04;
}

Tailwind CSS v4

/* Fennelly to Nightmare — https://swatchly.xyz/palette/969f82-212617-545f3e-7a866d-b2c4a3-111b04 */
@theme {
  --color-fennelly: #969f82;
  --color-fennelly-50: #f0f5e4;
  --color-fennelly-100: #e4ebd7;
  --color-fennelly-200: #cfd6bf;
  --color-fennelly-300: #b7bfa5;
  --color-fennelly-400: #969f82;
  --color-fennelly-500: #7c8569;
  --color-fennelly-600: #636b51;
  --color-fennelly-700: #4f563e;
  --color-fennelly-800: #3d432e;
  --color-fennelly-900: #2f3423;
  --color-fennelly-950: #1d2114;
  --color-underworld: #212617;
  --color-underworld-50: #f3f7ec;
  --color-underworld-100: #e9ede1;
  --color-underworld-200: #d5dacb;
  --color-underworld-300: #bec4b3;
  --color-underworld-400: #9ea593;
  --color-underworld-500: #848a78;
  --color-underworld-600: #6a705f;
  --color-underworld-700: #555a4b;
  --color-underworld-800: #43483a;
  --color-underworld-900: #35392d;
  --color-underworld-950: #212617;
  --color-cypress: #545f3e;
  --color-cypress-50: #f1f9e4;
  --color-cypress-100: #e7efd8;
  --color-cypress-200: #d3ddc2;
  --color-cypress-300: #bdc8a9;
  --color-cypress-400: #9eaa88;
  --color-cypress-500: #838f6c;
  --color-cypress-600: #6a7554;
  --color-cypress-700: #545f3e;
  --color-cypress-800: #414a2f;
  --color-cypress-900: #323922;
  --color-cypress-950: #1e2413;
  --color-wreath: #7a866d;
  --color-wreath-50: #f0f7e8;
  --color-wreath-100: #e4eddb;
  --color-wreath-200: #cfd9c4;
  --color-wreath-300: #b7c2ab;
  --color-wreath-400: #96a289;
  --color-wreath-500: #7a866d;
  --color-wreath-600: #616c55;
  --color-wreath-700: #4c5641;
  --color-wreath-800: #3b4431;
  --color-wreath-900: #2d3425;
  --color-wreath-950: #1b2115;
  --color-camping-grounds: #b2c4a3;
  --color-camping-grounds-50: #edf7e4;
  --color-camping-grounds-100: #e1edd7;
  --color-camping-grounds-200: #ccdac0;
  --color-camping-grounds-300: #b2c4a3;
  --color-camping-grounds-400: #94a586;
  --color-camping-grounds-500: #798a6b;
  --color-camping-grounds-600: #607053;
  --color-camping-grounds-700: #4b5a3f;
  --color-camping-grounds-800: #3a462f;
  --color-camping-grounds-900: #2c3723;
  --color-camping-grounds-950: #1b2214;
  --color-nightmare: #111b04;
  --color-nightmare-50: #f0f9e7;
  --color-nightmare-100: #e6efdc;
  --color-nightmare-200: #d1dcc5;
  --color-nightmare-300: #b9c6ac;
  --color-nightmare-400: #99a78b;
  --color-nightmare-500: #7c8a6e;
  --color-nightmare-600: #616e53;
  --color-nightmare-700: #4a553d;
  --color-nightmare-800: #37402c;
  --color-nightmare-900: #272f1e;
  --color-nightmare-950: #111b04;
}

Similar palettes