Nightmare to A State of Mint Color Palette

About this palette

Nightmare to A State of Mint is a 4-color cool, monochromatic, gradient palette: #001F17 (Nightmare), #007553 (Greasy Greens), #00C79C (Macau), #71FFD3 (A State of Mint). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #001F17 on #71FFD3 with a contrast ratio of 14.02:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(0, 31, 23)	hsl(165, 100%, 6%)
Greasy Greens	rgb(0, 117, 83)	hsl(163, 100%, 23%)
Macau	rgb(0, 199, 156)	hsl(167, 100%, 39%)
A State of Mint	rgb(113, 255, 211)	hsl(161, 100%, 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.

Aa14.02:1 Super#001F17 on #71FFD3
Aa14.02:1 Super#71FFD3 on #001F17
Aa7.99:1 Very good#001F17 on #00C79C
Aa7.99:1 Very good#00C79C on #001F17
Aa4.62:1 Good#007553 on #71FFD3
Aa4.62:1 Good#71FFD3 on #007553
Aa3.04:1 Poor#001F17 on #007553
Aa3.04:1 Poor#007553 on #001F17

Color blindness preview

CSS variables

/* Nightmare to A State of Mint — https://swatchly.xyz/palette/001f17-007553-00c79c-71ffd3 */
:root {
  --nightmare: #001f17;
  --greasy-greens: #007553;
  --macau: #00c79c;
  --a-state-of-mint: #71ffd3;
}

Tailwind CSS v4

/* Nightmare to A State of Mint — https://swatchly.xyz/palette/001f17-007553-00c79c-71ffd3 */
@theme {
  --color-nightmare: #001f17;
  --color-nightmare-50: #e7faf3;
  --color-nightmare-100: #dbf1e9;
  --color-nightmare-200: #c4ded5;
  --color-nightmare-300: #abc9be;
  --color-nightmare-400: #89aa9f;
  --color-nightmare-500: #6c8d82;
  --color-nightmare-600: #517167;
  --color-nightmare-700: #3c594f;
  --color-nightmare-800: #2b443c;
  --color-nightmare-900: #1e322c;
  --color-nightmare-950: #001f17;
  --color-greasy-greens: #007553;
  --color-greasy-greens-50: #dbffee;
  --color-greasy-greens-100: #c1f8de;
  --color-greasy-greens-200: #a2e5c7;
  --color-greasy-greens-300: #81cfad;
  --color-greasy-greens-400: #56af8b;
  --color-greasy-greens-500: #32926e;
  --color-greasy-greens-600: #007553;
  --color-greasy-greens-700: #005d41;
  --color-greasy-greens-800: #004932;
  --color-greasy-greens-900: #003926;
  --color-greasy-greens-950: #002417;
  --color-macau: #00c79c;
  --color-macau-50: #e6fff5;
  --color-macau-100: #c4ffe9;
  --color-macau-200: #94f4d3;
  --color-macau-300: #6de2bc;
  --color-macau-400: #00c79c;
  --color-macau-500: #00a581;
  --color-macau-600: #008567;
  --color-macau-700: #006951;
  --color-macau-800: #00523e;
  --color-macau-900: #003e2f;
  --color-macau-950: #00261c;
  --color-a-state-of-mint: #71ffd3;
  --color-a-state-of-mint-50: #f3fffa;
  --color-a-state-of-mint-100: #d3ffee;
  --color-a-state-of-mint-200: #71ffd3;
  --color-a-state-of-mint-300: #74e1bd;
  --color-a-state-of-mint-400: #34c29b;
  --color-a-state-of-mint-500: #00a37f;
  --color-a-state-of-mint-600: #008265;
  --color-a-state-of-mint-700: #00664f;
  --color-a-state-of-mint-800: #004f3c;
  --color-a-state-of-mint-900: #003d2e;
  --color-a-state-of-mint-950: #00261c;
}