Hello Winter to Nightmare Color Palette

About this palette

Hello Winter to Nightmare is a 4-color cool, monochromatic, gradient palette: #94FFE8 (Hello Winter), #00B08F (Hobgoblin), #006156 (Philodendron), #00221C (Nightmare). It mixes turquoise tones and feels cool overall. The strongest text pairing is #94FFE8 on #00221C with a contrast ratio of 14.23:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hello Winter	rgb(148, 255, 232)	hsl(167, 100%, 79%)
Hobgoblin	rgb(0, 176, 143)	hsl(169, 100%, 35%)
Philodendron	rgb(0, 97, 86)	hsl(173, 100%, 19%)
Nightmare	rgb(0, 34, 28)	hsl(169, 100%, 7%)

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.

Aa14.23:1 Super#94FFE8 on #00221C
Aa14.23:1 Super#00221C on #94FFE8
Aa6.23:1 Good#94FFE8 on #006156
Aa6.23:1 Good#006156 on #94FFE8
Aa6.11:1 Good#00B08F on #00221C
Aa6.11:1 Good#00221C on #00B08F

Color blindness preview

CSS variables

/* Hello Winter to Nightmare — https://swatchly.xyz/palette/94ffe8-00b08f-006156-00221c */
:root {
  --hello-winter: #94ffe8;
  --hobgoblin: #00b08f;
  --philodendron: #006156;
  --nightmare: #00221c;
}

Tailwind CSS v4

/* Hello Winter to Nightmare — https://swatchly.xyz/palette/94ffe8-00b08f-006156-00221c */
@theme {
  --color-hello-winter: #94ffe8;
  --color-hello-winter-50: #cbfff2;
  --color-hello-winter-100: #94ffe8;
  --color-hello-winter-200: #9ae6d5;
  --color-hello-winter-300: #79d2bf;
  --color-hello-winter-400: #4cb4a0;
  --color-hello-winter-500: #229985;
  --color-hello-winter-600: #007d6c;
  --color-hello-winter-700: #006456;
  --color-hello-winter-800: #004e43;
  --color-hello-winter-900: #003c33;
  --color-hello-winter-950: #00261f;
  --color-hobgoblin: #00b08f;
  --color-hobgoblin-50: #c9ffed;
  --color-hobgoblin-100: #a9f9e0;
  --color-hobgoblin-200: #85e6c9;
  --color-hobgoblin-300: #5bd0b0;
  --color-hobgoblin-400: #00b08f;
  --color-hobgoblin-500: #009377;
  --color-hobgoblin-600: #007760;
  --color-hobgoblin-700: #005f4c;
  --color-hobgoblin-800: #004b3c;
  --color-hobgoblin-900: #003b2e;
  --color-hobgoblin-950: #00261d;
  --color-philodendron: #006156;
  --color-philodendron-50: #d8fff7;
  --color-philodendron-100: #c8f7ed;
  --color-philodendron-200: #ade4da;
  --color-philodendron-300: #8ecfc3;
  --color-philodendron-400: #67b0a3;
  --color-philodendron-500: #479488;
  --color-philodendron-600: #2a786d;
  --color-philodendron-700: #006156;
  --color-philodendron-800: #034c43;
  --color-philodendron-900: #003b33;
  --color-philodendron-950: #002520;
  --color-nightmare: #00221c;
  --color-nightmare-50: #e6faf5;
  --color-nightmare-100: #daf1eb;
  --color-nightmare-200: #c3dfd8;
  --color-nightmare-300: #aac9c1;
  --color-nightmare-400: #88aaa2;
  --color-nightmare-500: #6b8e86;
  --color-nightmare-600: #51726b;
  --color-nightmare-700: #3c5a53;
  --color-nightmare-800: #2b4640;
  --color-nightmare-900: #1f3530;
  --color-nightmare-950: #00221c;
}