Start generating

Nightmare Fuel to Marsh Fog color palette

2B303CNightmare Fuel4D584AVerdant Hush616C84Ashen WhisperB68485Punched PinkB08B8CPunched PinkC4D6C9Marsh Fog
Open in generator Export PNG, PDF, ASE…

About this palette

Nightmare Fuel to Marsh Fog is a 6-color muted palette: #2B303C (Nightmare Fuel), #4D584A (Verdant Hush), #616C84 (Ashen Whisper), #B68485 (Punched Pink), #B08B8C (Punched Pink), #C4D6C9 (Marsh Fog). It mixes gray, blue, red tones and feels warm overall. The strongest text pairing is #2B303C on #C4D6C9 with a contrast ratio of 8.68:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nightmare Fuelrgb(43, 48, 60)hsl(222, 17%, 20%)
Verdant Hushrgb(77, 88, 74)hsl(107, 9%, 32%)
Ashen Whisperrgb(97, 108, 132)hsl(221, 15%, 45%)
Punched Pinkrgb(182, 132, 133)hsl(359, 26%, 62%)
Punched Pinkrgb(176, 139, 140)hsl(358, 19%, 62%)
Marsh Fogrgb(196, 214, 201)hsl(137, 18%, 80%)

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.

  • Aa8.68:1 Very good#2B303C on #C4D6C9
  • Aa8.68:1 Very good#C4D6C9 on #2B303C
  • Aa4.91:1 Good#4D584A on #C4D6C9
  • Aa4.91:1 Good#C4D6C9 on #4D584A
  • Aa4.35:1 Poor#2B303C on #B08B8C
  • Aa4.35:1 Poor#B08B8C on #2B303C
  • Aa4.17:1 Poor#2B303C on #B68485
  • Aa4.17:1 Poor#B68485 on #2B303C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nightmare Fuel to Marsh Fog — https://swatchly.xyz/palette/2b303c-4d584a-616c84-b68485-b08b8c-c4d6c9 */
:root {
  --nightmare-fuel: #2b303c;
  --verdant-hush: #4d584a;
  --ashen-whisper: #616c84;
  --punched-pink: #b68485;
  --punched-pink-2: #b08b8c;
  --marsh-fog: #c4d6c9;
}

Tailwind CSS v4

/* Nightmare Fuel to Marsh Fog — https://swatchly.xyz/palette/2b303c-4d584a-616c84-b68485-b08b8c-c4d6c9 */
@theme {
  --color-nightmare-fuel: #2b303c;
  --color-nightmare-fuel-50: #f1f5fe;
  --color-nightmare-fuel-100: #e7ebf5;
  --color-nightmare-fuel-200: #d2d7e3;
  --color-nightmare-fuel-300: #bbc1ce;
  --color-nightmare-fuel-400: #9ba1af;
  --color-nightmare-fuel-500: #7f8593;
  --color-nightmare-fuel-600: #646a78;
  --color-nightmare-fuel-700: #4e535f;
  --color-nightmare-fuel-800: #3c404a;
  --color-nightmare-fuel-900: #2b303c;
  --color-nightmare-fuel-950: #1b1d23;
  --color-verdant-hush: #4d584a;
  --color-verdant-hush-50: #f0f8ee;
  --color-verdant-hush-100: #e6eee4;
  --color-verdant-hush-200: #d1dbce;
  --color-verdant-hush-300: #b9c4b6;
  --color-verdant-hush-400: #99a596;
  --color-verdant-hush-500: #7e8a7a;
  --color-verdant-hush-600: #646f60;
  --color-verdant-hush-700: #4d584a;
  --color-verdant-hush-800: #3c4539;
  --color-verdant-hush-900: #2d352b;
  --color-verdant-hush-950: #1b211a;
  --color-ashen-whisper: #616c84;
  --color-ashen-whisper-50: #f1f5ff;
  --color-ashen-whisper-100: #e3ebfd;
  --color-ashen-whisper-200: #ced8ec;
  --color-ashen-whisper-300: #b7c1d8;
  --color-ashen-whisper-400: #96a2bb;
  --color-ashen-whisper-500: #7b869f;
  --color-ashen-whisper-600: #616c84;
  --color-ashen-whisper-700: #4c556b;
  --color-ashen-whisper-800: #3a4255;
  --color-ashen-whisper-900: #2c3342;
  --color-ashen-whisper-950: #1a1f2a;
  --color-punched-pink: #b68485;
  --color-punched-pink-50: #fff5f5;
  --color-punched-pink-100: #ffeaea;
  --color-punched-pink-200: #fad4d4;
  --color-punched-pink-300: #e9bebe;
  --color-punched-pink-400: #cf9e9f;
  --color-punched-pink-500: #b68485;
  --color-punched-pink-600: #976769;
  --color-punched-pink-700: #7b5051;
  --color-punched-pink-800: #623c3d;
  --color-punched-pink-900: #4c2c2d;
  --color-punched-pink-950: #301a1a;
  --color-punched-pink-2: #b08b8c;
  --color-punched-pink-2-50: #ffecec;
  --color-punched-pink-2-100: #f8ddde;
  --color-punched-pink-2-200: #e6c6c7;
  --color-punched-pink-2-300: #d0adae;
  --color-punched-pink-2-400: #b08b8c;
  --color-punched-pink-2-500: #967273;
  --color-punched-pink-2-600: #7c5b5c;
  --color-punched-pink-2-700: #654748;
  --color-punched-pink-2-800: #513738;
  --color-punched-pink-2-900: #402a2b;
  --color-punched-pink-2-950: #2a1a1b;
  --color-marsh-fog: #c4d6c9;
  --color-marsh-fog-50: #e9f4ec;
  --color-marsh-fog-100: #dde9e0;
  --color-marsh-fog-200: #c4d6c9;
  --color-marsh-fog-300: #b0c0b5;
  --color-marsh-fog-400: #91a296;
  --color-marsh-fog-500: #77887c;
  --color-marsh-fog-600: #5f6e63;
  --color-marsh-fog-700: #4a584e;
  --color-marsh-fog-800: #39463d;
  --color-marsh-fog-900: #2b362e;
  --color-marsh-fog-950: #1a211c;
}

Similar palettes