Nightmare Fuel to Summer Mist color palette

243132Nightmare Fuel 548C8EArctic 3D5254Descent Into the Catacombs 99B3B5Ether CBEAEBSummer Mist

About this palette

Nightmare Fuel to Summer Mist is a 5-color muted palette: #243132 (Nightmare Fuel), #548C8E (Arctic), #3D5254 (Descent Into the Catacombs), #99B3B5 (Ether), #CBEAEB (Summer Mist). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #243132 on #CBEAEB with a contrast ratio of 10.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare Fuel	rgb(36, 49, 50)	hsl(184, 16%, 17%)
Arctic	rgb(84, 140, 142)	hsl(182, 26%, 44%)
Descent Into the Catacombs	rgb(61, 82, 84)	hsl(185, 16%, 28%)
Ether	rgb(153, 179, 181)	hsl(184, 16%, 65%)
Summer Mist	rgb(203, 234, 235)	hsl(182, 44%, 86%)

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.

Aa10.58:1 Very good#243132 on #CBEAEB
Aa10.58:1 Very good#CBEAEB on #243132
Aa6.52:1 Good#3D5254 on #CBEAEB
Aa6.52:1 Good#CBEAEB on #3D5254
Aa6.07:1 Good#243132 on #99B3B5
Aa6.07:1 Good#99B3B5 on #243132
Aa3.74:1 Poor#3D5254 on #99B3B5
Aa3.74:1 Poor#99B3B5 on #3D5254

Color blindness preview

CSS variables

/* Nightmare Fuel to Summer Mist — https://swatchly.xyz/palette/243132-548c8e-3d5254-99b3b5-cbeaeb */
:root {
  --nightmare-fuel: #243132;
  --arctic: #548c8e;
  --descent-into-the-catacombs: #3d5254;
  --ether: #99b3b5;
  --summer-mist: #cbeaeb;
}

Tailwind CSS v4

/* Nightmare Fuel to Summer Mist — https://swatchly.xyz/palette/243132-548c8e-3d5254-99b3b5-cbeaeb */
@theme {
  --color-nightmare-fuel: #243132;
  --color-nightmare-fuel-50: #eef7f8;
  --color-nightmare-fuel-100: #e3edee;
  --color-nightmare-fuel-200: #cedadb;
  --color-nightmare-fuel-300: #b6c4c5;
  --color-nightmare-fuel-400: #95a4a5;
  --color-nightmare-fuel-500: #798889;
  --color-nightmare-fuel-600: #5e6c6d;
  --color-nightmare-fuel-700: #485556;
  --color-nightmare-fuel-800: #364142;
  --color-nightmare-fuel-900: #243132;
  --color-nightmare-fuel-950: #171d1e;
  --color-arctic: #548c8e;
  --color-arctic-50: #dcfbfc;
  --color-arctic-100: #cdf1f2;
  --color-arctic-200: #b3dedf;
  --color-arctic-300: #97c8c9;
  --color-arctic-400: #72a8aa;
  --color-arctic-500: #548c8e;
  --color-arctic-600: #3c7274;
  --color-arctic-700: #295b5d;
  --color-arctic-800: #1b484a;
  --color-arctic-900: #113839;
  --color-arctic-950: #072324;
  --color-descent-into-the-catacombs: #3d5254;
  --color-descent-into-the-catacombs-50: #ebf8f9;
  --color-descent-into-the-catacombs-100: #e0eff0;
  --color-descent-into-the-catacombs-200: #c8dadc;
  --color-descent-into-the-catacombs-300: #aec3c4;
  --color-descent-into-the-catacombs-400: #8ca2a4;
  --color-descent-into-the-catacombs-500: #6f8588;
  --color-descent-into-the-catacombs-600: #556a6c;
  --color-descent-into-the-catacombs-700: #3d5254;
  --color-descent-into-the-catacombs-800: #2f4041;
  --color-descent-into-the-catacombs-900: #233132;
  --color-descent-into-the-catacombs-950: #141e1f;
  --color-ether: #99b3b5;
  --color-ether-50: #effdfe;
  --color-ether-100: #e5f5f6;
  --color-ether-200: #d1e4e5;
  --color-ether-300: #bad0d1;
  --color-ether-400: #99b3b5;
  --color-ether-500: #7c9597;
  --color-ether-600: #60787a;
  --color-ether-700: #495f61;
  --color-ether-800: #364a4b;
  --color-ether-900: #273839;
  --color-ether-950: #162223;
  --color-summer-mist: #cbeaeb;
  --color-summer-mist-50: #e0f2f3;
  --color-summer-mist-100: #cbeaeb;
  --color-summer-mist-200: #bfd6d7;
  --color-summer-mist-300: #a7c2c2;
  --color-summer-mist-400: #88a4a5;
  --color-summer-mist-500: #6d8a8b;
  --color-summer-mist-600: #557171;
  --color-summer-mist-700: #425b5c;
  --color-summer-mist-800: #314748;
  --color-summer-mist-900: #243737;
  --color-summer-mist-950: #152223;
}