Midnight Monarch to Nude Flamingo color palette

21103AMidnight Monarch BBD883Wasabi 404400Green Not Found 008386Windows 95 Desktop 004C57Nocturnal Expedition E58D77Nude Flamingo

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Monarch to Nude Flamingo is a 6-color cool palette: #21103A (Midnight Monarch), #BBD883 (Wasabi), #404400 (Green Not Found), #008386 (Windows 95 Desktop), #004C57 (Nocturnal Expedition), #E58D77 (Nude Flamingo). It mixes purple, green, turquoise, red tones and feels cool overall. The strongest text pairing is #21103A on #BBD883 with a contrast ratio of 11.05:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Monarch	rgb(33, 16, 58)	hsl(264, 57%, 15%)
Wasabi	rgb(187, 216, 131)	hsl(80, 52%, 68%)
Green Not Found	rgb(64, 68, 0)	hsl(64, 100%, 13%)
Windows 95 Desktop	rgb(0, 131, 134)	hsl(181, 100%, 26%)
Nocturnal Expedition	rgb(0, 76, 87)	hsl(188, 100%, 17%)
Nude Flamingo	rgb(229, 141, 119)	hsl(12, 68%, 68%)

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.05:1 Very good#21103A on #BBD883
Aa11.05:1 Very good#BBD883 on #21103A
Aa7.01:1 Very good#21103A on #E58D77
Aa7.01:1 Very good#E58D77 on #21103A
Aa6.49:1 Good#BBD883 on #404400
Aa6.49:1 Good#404400 on #BBD883
Aa6.11:1 Good#BBD883 on #004C57
Aa6.11:1 Good#004C57 on #BBD883

Color blindness preview

CSS variables

/* Midnight Monarch to Nude Flamingo — https://swatchly.xyz/palette/21103a-bbd883-404400-008386-004c57-e58d77 */
:root {
  --midnight-monarch: #21103a;
  --wasabi: #bbd883;
  --green-not-found: #404400;
  --windows-95-desktop: #008386;
  --nocturnal-expedition: #004c57;
  --nude-flamingo: #e58d77;
}

Tailwind CSS v4

/* Midnight Monarch to Nude Flamingo — https://swatchly.xyz/palette/21103a-bbd883-404400-008386-004c57-e58d77 */
@theme {
  --color-midnight-monarch: #21103a;
  --color-midnight-monarch-50: #f6f3ff;
  --color-midnight-monarch-100: #eee7ff;
  --color-midnight-monarch-200: #dcd0f9;
  --color-midnight-monarch-300: #c6b8e7;
  --color-midnight-monarch-400: #a798ca;
  --color-midnight-monarch-500: #8b7bae;
  --color-midnight-monarch-600: #706091;
  --color-midnight-monarch-700: #584a75;
  --color-midnight-monarch-800: #44385d;
  --color-midnight-monarch-900: #332948;
  --color-midnight-monarch-950: #21103a;
  --color-wasabi: #bbd883;
  --color-wasabi-50: #f5ffe5;
  --color-wasabi-100: #e9faca;
  --color-wasabi-200: #d5eab0;
  --color-wasabi-300: #bbd883;
  --color-wasabi-400: #9bb567;
  --color-wasabi-500: #7e9845;
  --color-wasabi-600: #627b27;
  --color-wasabi-700: #4c620e;
  --color-wasabi-800: #394c00;
  --color-wasabi-900: #2a3900;
  --color-wasabi-950: #192400;
  --color-green-not-found: #404400;
  --color-green-not-found-50: #f4f9d7;
  --color-green-not-found-100: #eaf0c9;
  --color-green-not-found-200: #d7ddae;
  --color-green-not-found-300: #c0c691;
  --color-green-not-found-400: #a0a66c;
  --color-green-not-found-500: #848a4e;
  --color-green-not-found-600: #6a6f35;
  --color-green-not-found-700: #535721;
  --color-green-not-found-800: #404400;
  --color-green-not-found-900: #31340a;
  --color-green-not-found-950: #1e2004;
  --color-windows-95-desktop: #008386;
  --color-windows-95-desktop-50: #d6feff;
  --color-windows-95-desktop-100: #c0f9fa;
  --color-windows-95-desktop-200: #a4e9ea;
  --color-windows-95-desktop-300: #85d5d7;
  --color-windows-95-desktop-400: #59b8ba;
  --color-windows-95-desktop-500: #349da0;
  --color-windows-95-desktop-600: #008386;
  --color-windows-95-desktop-700: #00686b;
  --color-windows-95-desktop-800: #005153;
  --color-windows-95-desktop-900: #003e40;
  --color-windows-95-desktop-950: #002728;
  --color-nocturnal-expedition: #004c57;
  --color-nocturnal-expedition-50: #e3faff;
  --color-nocturnal-expedition-100: #cdf3fb;
  --color-nocturnal-expedition-200: #b3e1ea;
  --color-nocturnal-expedition-300: #97cbd6;
  --color-nocturnal-expedition-400: #71adb8;
  --color-nocturnal-expedition-500: #54919d;
  --color-nocturnal-expedition-600: #397682;
  --color-nocturnal-expedition-700: #255f69;
  --color-nocturnal-expedition-800: #004c57;
  --color-nocturnal-expedition-900: #0c3a42;
  --color-nocturnal-expedition-950: #04242a;
  --color-nude-flamingo: #e58d77;
  --color-nude-flamingo-50: #fff5f2;
  --color-nude-flamingo-100: #ffe9e3;
  --color-nude-flamingo-200: #ffcfc3;
  --color-nude-flamingo-300: #fcb19d;
  --color-nude-flamingo-400: #e58d77;
  --color-nude-flamingo-500: #c5715c;
  --color-nude-flamingo-600: #a65541;
  --color-nude-flamingo-700: #893f2d;
  --color-nude-flamingo-800: #6e2e1e;
  --color-nude-flamingo-900: #572013;
  --color-nude-flamingo-950: #381108;
}