Start generating

Nightmare to Kissed by Mist color palette

001E0CNightmare6D2E6AWineberry177C2FPharmaceutical Green4E9B63Bulma HairE2A8D9Candy FlossFBD4F9Kissed by Mist
Open in generator Export PNG, PDF, ASE…

About this palette

Nightmare to Kissed by Mist is a 6-color cool palette: #001E0C (Nightmare), #6D2E6A (Wineberry), #177C2F (Pharmaceutical Green), #4E9B63 (Bulma Hair), #E2A8D9 (Candy Floss), #FBD4F9 (Kissed by Mist). It mixes green, purple, pink tones and feels cool overall. The strongest text pairing is #001E0C on #FBD4F9 with a contrast ratio of 13.34:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nightmarergb(0, 30, 12)hsl(144, 100%, 6%)
Wineberryrgb(109, 46, 106)hsl(303, 41%, 30%)
Pharmaceutical Greenrgb(23, 124, 47)hsl(134, 69%, 29%)
Bulma Hairrgb(78, 155, 99)hsl(136, 33%, 46%)
Candy Flossrgb(226, 168, 217)hsl(309, 50%, 77%)
Kissed by Mistrgb(251, 212, 249)hsl(303, 83%, 91%)

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.

  • Aa13.34:1 Super#001E0C on #FBD4F9
  • Aa13.34:1 Super#FBD4F9 on #001E0C
  • Aa9.10:1 Very good#001E0C on #E2A8D9
  • Aa9.10:1 Very good#E2A8D9 on #001E0C
  • Aa7.06:1 Very good#6D2E6A on #FBD4F9
  • Aa7.06:1 Very good#FBD4F9 on #6D2E6A
  • Aa5.20:1 Good#001E0C on #4E9B63
  • Aa5.20:1 Good#4E9B63 on #001E0C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nightmare to Kissed by Mist — https://swatchly.xyz/palette/001e0c-6d2e6a-177c2f-4e9b63-e2a8d9-fbd4f9 */
:root {
  --nightmare: #001e0c;
  --wineberry: #6d2e6a;
  --pharmaceutical-green: #177c2f;
  --bulma-hair: #4e9b63;
  --candy-floss: #e2a8d9;
  --kissed-by-mist: #fbd4f9;
}

Tailwind CSS v4

/* Nightmare to Kissed by Mist — https://swatchly.xyz/palette/001e0c-6d2e6a-177c2f-4e9b63-e2a8d9-fbd4f9 */
@theme {
  --color-nightmare: #001e0c;
  --color-nightmare-50: #e7fbed;
  --color-nightmare-100: #dcf2e2;
  --color-nightmare-200: #c5dfcc;
  --color-nightmare-300: #accab4;
  --color-nightmare-400: #8aab94;
  --color-nightmare-500: #6c8e77;
  --color-nightmare-600: #52715b;
  --color-nightmare-700: #3c5845;
  --color-nightmare-800: #2b4333;
  --color-nightmare-900: #1d3124;
  --color-nightmare-950: #001e0c;
  --color-wineberry: #6d2e6a;
  --color-wineberry-50: #fff0fd;
  --color-wineberry-100: #ffe0fc;
  --color-wineberry-200: #f9c3f4;
  --color-wineberry-300: #e8abe3;
  --color-wineberry-400: #cd8ac8;
  --color-wineberry-500: #b36fae;
  --color-wineberry-600: #985694;
  --color-wineberry-700: #7f427c;
  --color-wineberry-800: #6d2e6a;
  --color-wineberry-900: #542451;
  --color-wineberry-950: #371436;
  --color-pharmaceutical-green: #177c2f;
  --color-pharmaceutical-green-50: #e0ffe2;
  --color-pharmaceutical-green-100: #c3fbc7;
  --color-pharmaceutical-green-200: #a6e9ac;
  --color-pharmaceutical-green-300: #86d48e;
  --color-pharmaceutical-green-400: #5db568;
  --color-pharmaceutical-green-500: #3b984b;
  --color-pharmaceutical-green-600: #177c2f;
  --color-pharmaceutical-green-700: #00641f;
  --color-pharmaceutical-green-800: #004e16;
  --color-pharmaceutical-green-900: #003d0f;
  --color-pharmaceutical-green-950: #002607;
  --color-bulma-hair: #4e9b63;
  --color-bulma-hair-50: #e0ffe6;
  --color-bulma-hair-100: #cbfad4;
  --color-bulma-hair-200: #b0e9bc;
  --color-bulma-hair-300: #93d4a2;
  --color-bulma-hair-400: #6db67f;
  --color-bulma-hair-500: #4e9b63;
  --color-bulma-hair-600: #327f4a;
  --color-bulma-hair-700: #1d6636;
  --color-bulma-hair-800: #0c5126;
  --color-bulma-hair-900: #033f1b;
  --color-bulma-hair-950: #00280e;
  --color-candy-floss: #e2a8d9;
  --color-candy-floss-50: #ffedfc;
  --color-candy-floss-100: #ffddf9;
  --color-candy-floss-200: #f1c5ea;
  --color-candy-floss-300: #e2a8d9;
  --color-candy-floss-400: #c18ab8;
  --color-candy-floss-500: #a56f9d;
  --color-candy-floss-600: #895682;
  --color-candy-floss-700: #70416a;
  --color-candy-floss-800: #5a3154;
  --color-candy-floss-900: #472442;
  --color-candy-floss-950: #2e152a;
  --color-kissed-by-mist: #fbd4f9;
  --color-kissed-by-mist-50: #fde5fc;
  --color-kissed-by-mist-100: #fbd4f9;
  --color-kissed-by-mist-200: #e3c5e2;
  --color-kissed-by-mist-300: #d0afce;
  --color-kissed-by-mist-400: #b390b2;
  --color-kissed-by-mist-500: #997698;
  --color-kissed-by-mist-600: #7f5d7d;
  --color-kissed-by-mist-700: #674966;
  --color-kissed-by-mist-800: #523851;
  --color-kissed-by-mist-900: #402a3f;
  --color-kissed-by-mist-950: #291928;
}

Similar palettes