Sugar Milk to Underworld Color Palette

About this palette

Sugar Milk to Underworld is a 5-color muted, cool palette: #FFF6F5 (Sugar Milk), #C4A4C1 (Novel Lilac), #649077 (Kashmir), #2A5864 (Night Shift), #1A251E (Underworld). It mixes white, pink, green, blue, gray tones and feels cool overall. The strongest text pairing is #FFF6F5 on #1A251E with a contrast ratio of 14.88:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Milk	rgb(255, 246, 245)	hsl(6, 100%, 98%)
Novel Lilac	rgb(196, 164, 193)	hsl(306, 21%, 71%)
Kashmir	rgb(100, 144, 119)	hsl(146, 18%, 48%)
Night Shift	rgb(42, 88, 100)	hsl(192, 41%, 28%)
Underworld	rgb(26, 37, 30)	hsl(142, 17%, 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.

Aa14.88:1 Super#FFF6F5 on #1A251E
Aa14.88:1 Super#1A251E on #FFF6F5
Aa7.37:1 Very good#FFF6F5 on #2A5864
Aa7.37:1 Very good#2A5864 on #FFF6F5
Aa7.10:1 Very good#C4A4C1 on #1A251E
Aa7.10:1 Very good#1A251E on #C4A4C1
Aa4.37:1 Poor#649077 on #1A251E
Aa4.37:1 Poor#1A251E on #649077

Color blindness preview

CSS variables

/* Sugar Milk to Underworld — https://swatchly.xyz/palette/fff6f5-c4a4c1-649077-2a5864-1a251e */
:root {
  --sugar-milk: #fff6f5;
  --novel-lilac: #c4a4c1;
  --kashmir: #649077;
  --night-shift: #2a5864;
  --underworld: #1a251e;
}

Tailwind CSS v4

/* Sugar Milk to Underworld — https://swatchly.xyz/palette/fff6f5-c4a4c1-649077-2a5864-1a251e */
@theme {
  --color-sugar-milk: #fff6f5;
  --color-sugar-milk-50: #fff6f5;
  --color-sugar-milk-100: #f2ecec;
  --color-sugar-milk-200: #ded8d7;
  --color-sugar-milk-300: #c8c0c0;
  --color-sugar-milk-400: #a8a09f;
  --color-sugar-milk-500: #8c8484;
  --color-sugar-milk-600: #716a69;
  --color-sugar-milk-700: #5a5353;
  --color-sugar-milk-800: #474140;
  --color-sugar-milk-900: #363131;
  --color-sugar-milk-950: #221e1e;
  --color-novel-lilac: #c4a4c1;
  --color-novel-lilac-50: #fff8fe;
  --color-novel-lilac-100: #ffecfd;
  --color-novel-lilac-200: #f0d9ee;
  --color-novel-lilac-300: #dec4db;
  --color-novel-lilac-400: #c4a4c1;
  --color-novel-lilac-500: #a586a2;
  --color-novel-lilac-600: #876984;
  --color-novel-lilac-700: #6c516a;
  --color-novel-lilac-800: #553d53;
  --color-novel-lilac-900: #412d3f;
  --color-novel-lilac-950: #281a26;
  --color-kashmir: #649077;
  --color-kashmir-50: #e3fced;
  --color-kashmir-100: #d6f3e1;
  --color-kashmir-200: #bee0cc;
  --color-kashmir-300: #a3cbb3;
  --color-kashmir-400: #81ac93;
  --color-kashmir-500: #649077;
  --color-kashmir-600: #4b755e;
  --color-kashmir-700: #375e49;
  --color-kashmir-800: #284a38;
  --color-kashmir-900: #1c392a;
  --color-kashmir-950: #0f2419;
  --color-night-shift: #2a5864;
  --color-night-shift-50: #e5f9ff;
  --color-night-shift-100: #d3f1fa;
  --color-night-shift-200: #badee8;
  --color-night-shift-300: #9ec7d3;
  --color-night-shift-400: #7aa7b4;
  --color-night-shift-500: #5d8b98;
  --color-night-shift-600: #436f7c;
  --color-night-shift-700: #2a5864;
  --color-night-shift-800: #21444e;
  --color-night-shift-900: #16353d;
  --color-night-shift-950: #0b2126;
  --color-underworld: #1a251e;
  --color-underworld-50: #eff7f2;
  --color-underworld-100: #e5eee8;
  --color-underworld-200: #d0dbd3;
  --color-underworld-300: #b8c4bc;
  --color-underworld-400: #98a59d;
  --color-underworld-500: #7d8b82;
  --color-underworld-600: #647168;
  --color-underworld-700: #4f5a53;
  --color-underworld-800: #3d4741;
  --color-underworld-900: #2f3832;
  --color-underworld-950: #1a251e;
}