Desert Dessert to Midnight Monarch color palette

FFB66CDesert Dessert BC79E8Illicit Purple 008282Windows 95 Desktop 663E00Very Coffee 1D132AMidnight Monarch

Open in generator Export PNG, PDF, ASE…

About this palette

Desert Dessert to Midnight Monarch is a 5-color cool palette: #FFB66C (Desert Dessert), #BC79E8 (Illicit Purple), #008282 (Windows 95 Desktop), #663E00 (Very Coffee), #1D132A (Midnight Monarch). It mixes orange, purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #FFB66C on #1D132A with a contrast ratio of 10.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Desert Dessert	rgb(255, 182, 108)	hsl(30, 100%, 71%)
Illicit Purple	rgb(188, 121, 232)	hsl(276, 71%, 69%)
Windows 95 Desktop	rgb(0, 130, 130)	hsl(180, 100%, 25%)
Very Coffee	rgb(102, 62, 0)	hsl(36, 100%, 20%)
Midnight Monarch	rgb(29, 19, 42)	hsl(266, 38%, 12%)

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.

Aa10.32:1 Very good#FFB66C on #1D132A
Aa10.32:1 Very good#1D132A on #FFB66C
Aa5.97:1 Good#BC79E8 on #1D132A
Aa5.97:1 Good#1D132A on #BC79E8
Aa5.39:1 Good#FFB66C on #663E00
Aa5.39:1 Good#663E00 on #FFB66C
Aa3.83:1 Poor#008282 on #1D132A
Aa3.83:1 Poor#1D132A on #008282

Color blindness preview

CSS variables

/* Desert Dessert to Midnight Monarch — https://swatchly.xyz/palette/ffb66c-bc79e8-008282-663e00-1d132a */
:root {
  --desert-dessert: #ffb66c;
  --illicit-purple: #bc79e8;
  --windows-95-desktop: #008282;
  --very-coffee: #663e00;
  --midnight-monarch: #1d132a;
}

Tailwind CSS v4

/* Desert Dessert to Midnight Monarch — https://swatchly.xyz/palette/ffb66c-bc79e8-008282-663e00-1d132a */
@theme {
  --color-desert-dessert: #ffb66c;
  --color-desert-dessert-50: #fff7f0;
  --color-desert-dessert-100: #ffecda;
  --color-desert-dessert-200: #ffd4ab;
  --color-desert-dessert-300: #ffb66c;
  --color-desert-dessert-400: #d99651;
  --color-desert-dessert-500: #bd792b;
  --color-desert-dessert-600: #9e5d00;
  --color-desert-dessert-700: #7d4900;
  --color-desert-dessert-800: #623800;
  --color-desert-dessert-900: #4b2a00;
  --color-desert-dessert-950: #301900;
  --color-illicit-purple: #bc79e8;
  --color-illicit-purple-50: #f8efff;
  --color-illicit-purple-100: #f1e0ff;
  --color-illicit-purple-200: #e6c3ff;
  --color-illicit-purple-300: #d8a0ff;
  --color-illicit-purple-400: #bc79e8;
  --color-illicit-purple-500: #a15ecb;
  --color-illicit-purple-600: #8545ad;
  --color-illicit-purple-700: #6d3190;
  --color-illicit-purple-800: #582276;
  --color-illicit-purple-900: #45175f;
  --color-illicit-purple-950: #2d0b40;
  --color-windows-95-desktop: #008282;
  --color-windows-95-desktop-50: #d4fffe;
  --color-windows-95-desktop-100: #c0f9f8;
  --color-windows-95-desktop-200: #a4e8e7;
  --color-windows-95-desktop-300: #84d4d3;
  --color-windows-95-desktop-400: #59b7b6;
  --color-windows-95-desktop-500: #349d9c;
  --color-windows-95-desktop-600: #008282;
  --color-windows-95-desktop-700: #006767;
  --color-windows-95-desktop-800: #005151;
  --color-windows-95-desktop-900: #003e3e;
  --color-windows-95-desktop-950: #002727;
  --color-very-coffee: #663e00;
  --color-very-coffee-50: #fff3e6;
  --color-very-coffee-100: #ffe7cd;
  --color-very-coffee-200: #f4d1aa;
  --color-very-coffee-300: #e2ba8e;
  --color-very-coffee-400: #c69b69;
  --color-very-coffee-500: #ac804c;
  --color-very-coffee-600: #916633;
  --color-very-coffee-700: #785120;
  --color-very-coffee-800: #663e00;
  --color-very-coffee-900: #4e3007;
  --color-very-coffee-950: #331d02;
  --color-midnight-monarch: #1d132a;
  --color-midnight-monarch-50: #f7f3ff;
  --color-midnight-monarch-100: #efe7fb;
  --color-midnight-monarch-200: #dcd3eb;
  --color-midnight-monarch-300: #c6bbd6;
  --color-midnight-monarch-400: #a79bb9;
  --color-midnight-monarch-500: #8a7f9c;
  --color-midnight-monarch-600: #6e637f;
  --color-midnight-monarch-700: #564c65;
  --color-midnight-monarch-800: #41394e;
  --color-midnight-monarch-900: #30293a;
  --color-midnight-monarch-950: #1d132a;
}