Glazed Sugar to Midnight Monarch Color Palette

About this palette

Glazed Sugar to Midnight Monarch is a 5-color cool, earthy palette: #FFDDCE (Glazed Sugar), #FF8833 (Wildfire), #008B5B (Center Field), #4F3589 (Night Fever), #170E35 (Midnight Monarch). It mixes orange, green, purple tones and feels cool overall. The strongest text pairing is #FFDDCE on #170E35 with a contrast ratio of 14.33:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glazed Sugar	rgb(255, 221, 206)	hsl(18, 100%, 90%)
Wildfire	rgb(255, 136, 51)	hsl(25, 100%, 60%)
Center Field	rgb(0, 139, 91)	hsl(159, 100%, 27%)
Night Fever	rgb(79, 53, 137)	hsl(259, 44%, 37%)
Midnight Monarch	rgb(23, 14, 53)	hsl(254, 58%, 13%)

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.33:1 Super#FFDDCE on #170E35
Aa14.33:1 Super#170E35 on #FFDDCE
Aa7.67:1 Very good#FF8833 on #170E35
Aa7.67:1 Very good#170E35 on #FF8833
Aa7.48:1 Very good#FFDDCE on #4F3589
Aa7.48:1 Very good#4F3589 on #FFDDCE
Aa4.21:1 Poor#008B5B on #170E35
Aa4.21:1 Poor#170E35 on #008B5B

Color blindness preview

CSS variables

/* Glazed Sugar to Midnight Monarch — https://swatchly.xyz/palette/ffddce-ff8833-008b5b-4f3589-170e35 */
:root {
  --glazed-sugar: #ffddce;
  --wildfire: #ff8833;
  --center-field: #008b5b;
  --night-fever: #4f3589;
  --midnight-monarch: #170e35;
}

Tailwind CSS v4

/* Glazed Sugar to Midnight Monarch — https://swatchly.xyz/palette/ffddce-ff8833-008b5b-4f3589-170e35 */
@theme {
  --color-glazed-sugar: #ffddce;
  --color-glazed-sugar-50: #ffece3;
  --color-glazed-sugar-100: #ffddce;
  --color-glazed-sugar-200: #e6ccc1;
  --color-glazed-sugar-300: #d3b6aa;
  --color-glazed-sugar-400: #b6978a;
  --color-glazed-sugar-500: #9b7d6f;
  --color-glazed-sugar-600: #806457;
  --color-glazed-sugar-700: #694f43;
  --color-glazed-sugar-800: #533c32;
  --color-glazed-sugar-900: #412e25;
  --color-glazed-sugar-950: #291c15;
  --color-wildfire: #ff8833;
  --color-wildfire-50: #fff7f3;
  --color-wildfire-100: #ffede3;
  --color-wildfire-200: #ffd6be;
  --color-wildfire-300: #ffb88f;
  --color-wildfire-400: #ff8833;
  --color-wildfire-500: #dc6a00;
  --color-wildfire-600: #b25500;
  --color-wildfire-700: #8d4200;
  --color-wildfire-800: #6e3200;
  --color-wildfire-900: #552500;
  --color-wildfire-950: #361400;
  --color-center-field: #008b5b;
  --color-center-field-50: #dcffeb;
  --color-center-field-100: #c0fedc;
  --color-center-field-200: #a5eec7;
  --color-center-field-300: #86dbaf;
  --color-center-field-400: #5abf8e;
  --color-center-field-500: #35a574;
  --color-center-field-600: #008b5b;
  --color-center-field-700: #006f47;
  --color-center-field-800: #005637;
  --color-center-field-900: #004229;
  --color-center-field-950: #002a18;
  --color-night-fever: #4f3589;
  --color-night-fever-50: #f5f3ff;
  --color-night-fever-100: #ece8ff;
  --color-night-fever-200: #d9d0ff;
  --color-night-fever-300: #c5b6ff;
  --color-night-fever-400: #a994ec;
  --color-night-fever-500: #8f78d2;
  --color-night-fever-600: #765fb6;
  --color-night-fever-700: #604a9a;
  --color-night-fever-800: #4f3589;
  --color-night-fever-900: #3c2a68;
  --color-night-fever-950: #261946;
  --color-midnight-monarch: #170e35;
  --color-midnight-monarch-50: #f4f4ff;
  --color-midnight-monarch-100: #eae8ff;
  --color-midnight-monarch-200: #d5d2fa;
  --color-midnight-monarch-300: #bfbbe7;
  --color-midnight-monarch-400: #9f9bcb;
  --color-midnight-monarch-500: #827dae;
  --color-midnight-monarch-600: #67628f;
  --color-midnight-monarch-700: #4f4a72;
  --color-midnight-monarch-800: #3b3759;
  --color-midnight-monarch-900: #2a2742;
  --color-midnight-monarch-950: #170e35;
}