Nightmare to Piglet Color Palette

About this palette

Nightmare to Piglet is a 5-color cool, vintage palette: #00221E (Nightmare), #643F00 (Very Coffee), #008279 (Windows 95 Desktop), #6A99FF (Polar Glow), #FFC2C3 (Piglet). It mixes turquoise, brown, blue, pink tones and feels cool overall. The strongest text pairing is #00221E on #FFC2C3 with a contrast ratio of 11.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(0, 34, 30)	hsl(173, 100%, 7%)
Very Coffee	rgb(100, 63, 0)	hsl(38, 100%, 20%)
Windows 95 Desktop	rgb(0, 130, 121)	hsl(176, 100%, 25%)
Polar Glow	rgb(106, 153, 255)	hsl(221, 100%, 71%)
Piglet	rgb(255, 194, 195)	hsl(359, 100%, 88%)

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.

Aa11.03:1 Very good#00221E on #FFC2C3
Aa11.03:1 Very good#FFC2C3 on #00221E
Aa6.11:1 Good#643F00 on #FFC2C3
Aa6.11:1 Good#FFC2C3 on #643F00
Aa6.10:1 Good#00221E on #6A99FF
Aa6.10:1 Good#6A99FF on #00221E
Aa3.58:1 Poor#00221E on #008279
Aa3.58:1 Poor#008279 on #00221E

Color blindness preview

CSS variables

/* Nightmare to Piglet — https://swatchly.xyz/palette/00221e-643f00-008279-6a99ff-ffc2c3 */
:root {
  --nightmare: #00221e;
  --very-coffee: #643f00;
  --windows-95-desktop: #008279;
  --polar-glow: #6a99ff;
  --piglet: #ffc2c3;
}

Tailwind CSS v4

/* Nightmare to Piglet — https://swatchly.xyz/palette/00221e-643f00-008279-6a99ff-ffc2c3 */
@theme {
  --color-nightmare: #00221e;
  --color-nightmare-50: #e6faf7;
  --color-nightmare-100: #daf1ed;
  --color-nightmare-200: #c3ded9;
  --color-nightmare-300: #a9c9c3;
  --color-nightmare-400: #87aaa4;
  --color-nightmare-500: #6b8e88;
  --color-nightmare-600: #51726d;
  --color-nightmare-700: #3c5a55;
  --color-nightmare-800: #2b4642;
  --color-nightmare-900: #1f3531;
  --color-nightmare-950: #00221e;
  --color-very-coffee: #643f00;
  --color-very-coffee-50: #fff3e5;
  --color-very-coffee-100: #ffe7ca;
  --color-very-coffee-200: #f2d1aa;
  --color-very-coffee-300: #e0bb8e;
  --color-very-coffee-400: #c49c69;
  --color-very-coffee-500: #aa814d;
  --color-very-coffee-600: #8e6733;
  --color-very-coffee-700: #765220;
  --color-very-coffee-800: #643f00;
  --color-very-coffee-900: #4c3107;
  --color-very-coffee-950: #321e02;
  --color-windows-95-desktop: #008279;
  --color-windows-95-desktop-50: #d6fff9;
  --color-windows-95-desktop-100: #c0f9f2;
  --color-windows-95-desktop-200: #a4e9e0;
  --color-windows-95-desktop-300: #84d5cb;
  --color-windows-95-desktop-400: #59b7ae;
  --color-windows-95-desktop-500: #349d93;
  --color-windows-95-desktop-600: #008279;
  --color-windows-95-desktop-700: #006760;
  --color-windows-95-desktop-800: #00514b;
  --color-windows-95-desktop-900: #003e39;
  --color-windows-95-desktop-950: #002724;
  --color-polar-glow: #6a99ff;
  --color-polar-glow-50: #eef4ff;
  --color-polar-glow-100: #dee9ff;
  --color-polar-glow-200: #c0d5ff;
  --color-polar-glow-300: #9cbdff;
  --color-polar-glow-400: #6a99ff;
  --color-polar-glow-500: #517de1;
  --color-polar-glow-600: #3a63c1;
  --color-polar-glow-700: #284da3;
  --color-polar-glow-800: #1b3a86;
  --color-polar-glow-900: #122c6d;
  --color-polar-glow-950: #081b49;
  --color-piglet: #ffc2c3;
  --color-piglet-50: #ffeeee;
  --color-piglet-100: #ffdfe0;
  --color-piglet-200: #ffc2c3;
  --color-piglet-300: #e3afb0;
  --color-piglet-400: #c68f90;
  --color-piglet-500: #ab7375;
  --color-piglet-600: #8e5a5c;
  --color-piglet-700: #754647;
  --color-piglet-800: #5e3537;
  --color-piglet-900: #4a2729;
  --color-piglet-950: #301718;
}