Start generating

Nightmare to Fairy Dust color palette

00271ANightmare3D3C00Dark Olive007E49Woodland Soul6C7AF7Pan PurpleCAAB51HaystackFFE6F3Fairy Dust
Open in generator Export PNG, PDF, ASE…

About this palette

Nightmare to Fairy Dust is a 6-color palette: #00271A (Nightmare), #3D3C00 (Dark Olive), #007E49 (Woodland Soul), #6C7AF7 (Pan Purple), #CAAB51 (Haystack), #FFE6F3 (Fairy Dust). It mixes turquoise, brown, green, blue, yellow, white tones and feels cool overall. The strongest text pairing is #00271A on #FFE6F3 with a contrast ratio of 13.69:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nightmarergb(0, 39, 26)hsl(160, 100%, 8%)
Dark Olivergb(61, 60, 0)hsl(59, 100%, 12%)
Woodland Soulrgb(0, 126, 73)hsl(155, 100%, 25%)
Pan Purplergb(108, 122, 247)hsl(234, 90%, 70%)
Haystackrgb(202, 171, 81)hsl(45, 53%, 55%)
Fairy Dustrgb(255, 230, 243)hsl(329, 100%, 95%)

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.69:1 Super#00271A on #FFE6F3
  • Aa13.69:1 Super#FFE6F3 on #00271A
  • Aa9.68:1 Very good#3D3C00 on #FFE6F3
  • Aa9.68:1 Very good#FFE6F3 on #3D3C00
  • Aa7.24:1 Very good#00271A on #CAAB51
  • Aa7.24:1 Very good#CAAB51 on #00271A
  • Aa5.13:1 Good#3D3C00 on #CAAB51
  • Aa5.13:1 Good#CAAB51 on #3D3C00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nightmare to Fairy Dust — https://swatchly.xyz/palette/00271a-3d3c00-007e49-6c7af7-caab51-ffe6f3 */
:root {
  --nightmare: #00271a;
  --dark-olive: #3d3c00;
  --woodland-soul: #007e49;
  --pan-purple: #6c7af7;
  --haystack: #caab51;
  --fairy-dust: #ffe6f3;
}

Tailwind CSS v4

/* Nightmare to Fairy Dust — https://swatchly.xyz/palette/00271a-3d3c00-007e49-6c7af7-caab51-ffe6f3 */
@theme {
  --color-nightmare: #00271a;
  --color-nightmare-50: #e5fbf1;
  --color-nightmare-100: #d9f2e6;
  --color-nightmare-200: #c2e0d2;
  --color-nightmare-300: #a8caba;
  --color-nightmare-400: #86ac9b;
  --color-nightmare-500: #69907f;
  --color-nightmare-600: #507565;
  --color-nightmare-700: #3c5e4f;
  --color-nightmare-800: #2c4a3d;
  --color-nightmare-900: #20392f;
  --color-nightmare-950: #00271a;
  --color-dark-olive: #3d3c00;
  --color-dark-olive-50: #f7f8d9;
  --color-dark-olive-100: #edeecb;
  --color-dark-olive-200: #dadbb1;
  --color-dark-olive-300: #c4c595;
  --color-dark-olive-400: #a6a772;
  --color-dark-olive-500: #8c8d56;
  --color-dark-olive-600: #73733e;
  --color-dark-olive-700: #5d5d2b;
  --color-dark-olive-800: #4b4b1e;
  --color-dark-olive-900: #3d3c00;
  --color-dark-olive-950: #262608;
  --color-woodland-soul: #007e49;
  --color-woodland-soul-50: #deffe8;
  --color-woodland-soul-100: #c1fbd5;
  --color-woodland-soul-200: #a3eabd;
  --color-woodland-soul-300: #82d5a2;
  --color-woodland-soul-400: #57b67f;
  --color-woodland-soul-500: #339a63;
  --color-woodland-soul-600: #007e49;
  --color-woodland-soul-700: #006439;
  --color-woodland-soul-800: #004f2b;
  --color-woodland-soul-900: #003d20;
  --color-woodland-soul-950: #002612;
  --color-pan-purple: #6c7af7;
  --color-pan-purple-50: #f3f5ff;
  --color-pan-purple-100: #e7ecff;
  --color-pan-purple-200: #ced7ff;
  --color-pan-purple-300: #b2bfff;
  --color-pan-purple-400: #8b9bff;
  --color-pan-purple-500: #6c7af7;
  --color-pan-purple-600: #545dd6;
  --color-pan-purple-700: #4046b5;
  --color-pan-purple-800: #303395;
  --color-pan-purple-900: #242578;
  --color-pan-purple-950: #141451;
  --color-haystack: #caab51;
  --color-haystack-50: #fff9ea;
  --color-haystack-100: #fff1cc;
  --color-haystack-200: #f4dfa4;
  --color-haystack-300: #e3ca85;
  --color-haystack-400: #caab51;
  --color-haystack-500: #ab8d31;
  --color-haystack-600: #8d7000;
  --color-haystack-700: #705800;
  --color-haystack-800: #574300;
  --color-haystack-900: #423300;
  --color-haystack-950: #281e00;
  --color-fairy-dust: #ffe6f3;
  --color-fairy-dust-50: #fff4fa;
  --color-fairy-dust-100: #ffe6f3;
  --color-fairy-dust-200: #e6d4dd;
  --color-fairy-dust-300: #d1bcc7;
  --color-fairy-dust-400: #b29ca7;
  --color-fairy-dust-500: #96808b;
  --color-fairy-dust-600: #7a6570;
  --color-fairy-dust-700: #624f59;
  --color-fairy-dust-800: #4d3d46;
  --color-fairy-dust-900: #3c2e36;
  --color-fairy-dust-950: #261c21;
}

Similar palettes