Nightmare to Seedling Color Palette

About this palette

Nightmare to Seedling is a 5-color muted, cool palette: #191E12 (Nightmare), #647B9D (Misty Harbour), #365677 (Dark Blue), #FFEFF0 (Powder Puff), #B7CCA1 (Seedling). It mixes gray, blue, white, green tones and feels cool overall. The strongest text pairing is #191E12 on #FFEFF0 with a contrast ratio of 15.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(25, 30, 18)	hsl(85, 25%, 9%)
Misty Harbour	rgb(100, 123, 157)	hsl(216, 23%, 50%)
Dark Blue	rgb(54, 86, 119)	hsl(210, 38%, 34%)
Powder Puff	rgb(255, 239, 240)	hsl(356, 100%, 97%)
Seedling	rgb(183, 204, 161)	hsl(89, 30%, 72%)

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.

Aa15.26:1 Super#191E12 on #FFEFF0
Aa15.26:1 Super#FFEFF0 on #191E12
Aa9.84:1 Very good#191E12 on #B7CCA1
Aa9.84:1 Very good#B7CCA1 on #191E12
Aa6.85:1 Good#365677 on #FFEFF0
Aa6.85:1 Good#FFEFF0 on #365677
Aa4.42:1 Poor#365677 on #B7CCA1
Aa4.42:1 Poor#B7CCA1 on #365677

Color blindness preview

CSS variables

/* Nightmare to Seedling — https://swatchly.xyz/palette/191e12-647b9d-365677-ffeff0-b7cca1 */
:root {
  --nightmare: #191e12;
  --misty-harbour: #647b9d;
  --dark-blue: #365677;
  --powder-puff: #ffeff0;
  --seedling: #b7cca1;
}

Tailwind CSS v4

/* Nightmare to Seedling — https://swatchly.xyz/palette/191e12-647b9d-365677-ffeff0-b7cca1 */
@theme {
  --color-nightmare: #191e12;
  --color-nightmare-50: #f3f7ee;
  --color-nightmare-100: #e8ede3;
  --color-nightmare-200: #d4dace;
  --color-nightmare-300: #bdc3b6;
  --color-nightmare-400: #9ea495;
  --color-nightmare-500: #828879;
  --color-nightmare-600: #676d5f;
  --color-nightmare-700: #505649;
  --color-nightmare-800: #3d4237;
  --color-nightmare-900: #2e3228;
  --color-nightmare-950: #191e12;
  --color-misty-harbour: #647b9d;
  --color-misty-harbour-50: #ecf3ff;
  --color-misty-harbour-100: #d8e8ff;
  --color-misty-harbour-200: #bed2ef;
  --color-misty-harbour-300: #a3bada;
  --color-misty-harbour-400: #8198bb;
  --color-misty-harbour-500: #647b9d;
  --color-misty-harbour-600: #4e6382;
  --color-misty-harbour-700: #3b4e6b;
  --color-misty-harbour-800: #2d3e56;
  --color-misty-harbour-900: #223045;
  --color-misty-harbour-950: #141e2d;
  --color-dark-blue: #365677;
  --color-dark-blue-50: #eef6ff;
  --color-dark-blue-100: #ddedff;
  --color-dark-blue-200: #bfdaf7;
  --color-dark-blue-300: #a5c4e4;
  --color-dark-blue-400: #83a4c7;
  --color-dark-blue-500: #6688ac;
  --color-dark-blue-600: #4d6d8f;
  --color-dark-blue-700: #365677;
  --color-dark-blue-800: #29435d;
  --color-dark-blue-900: #1e334a;
  --color-dark-blue-950: #102030;
  --color-powder-puff: #ffeff0;
  --color-powder-puff-50: #ffeff0;
  --color-powder-puff-100: #f1e7e8;
  --color-powder-puff-200: #dfd3d4;
  --color-powder-puff-300: #cabcbd;
  --color-powder-puff-400: #ab9d9e;
  --color-powder-puff-500: #908283;
  --color-powder-puff-600: #756869;
  --color-powder-puff-700: #5e5253;
  --color-powder-puff-800: #4a3f40;
  --color-powder-puff-900: #393031;
  --color-powder-puff-950: #241d1e;
  --color-seedling: #b7cca1;
  --color-seedling-50: #effbe4;
  --color-seedling-100: #e5f2d8;
  --color-seedling-200: #d0e0c0;
  --color-seedling-300: #b7cca1;
  --color-seedling-400: #98ab84;
  --color-seedling-500: #7c9067;
  --color-seedling-600: #62744d;
  --color-seedling-700: #4c5c39;
  --color-seedling-800: #3a4829;
  --color-seedling-900: #2b371d;
  --color-seedling-950: #1a2310;
}