Nebulous December to Italian Grape Color Palette

About this palette

Nebulous December to Italian Grape is a 4-color muted palette: #ACB2C7 (Nebulous December), #5B6B8E (Haunt Mist), #F1E0EB (First Crush), #433D48 (Italian Grape). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #F1E0EB on #433D48 with a contrast ratio of 8.30:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nebulous December	rgb(172, 178, 199)	hsl(227, 19%, 73%)
Haunt Mist	rgb(91, 107, 142)	hsl(221, 22%, 46%)
First Crush	rgb(241, 224, 235)	hsl(321, 38%, 91%)
Italian Grape	rgb(67, 61, 72)	hsl(273, 8%, 26%)

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.

Aa8.30:1 Very good#F1E0EB on #433D48
Aa8.30:1 Very good#433D48 on #F1E0EB
Aa4.97:1 Good#ACB2C7 on #433D48
Aa4.97:1 Good#433D48 on #ACB2C7
Aa4.22:1 Poor#5B6B8E on #F1E0EB
Aa4.22:1 Poor#F1E0EB on #5B6B8E

Color blindness preview

CSS variables

/* Nebulous December to Italian Grape — https://swatchly.xyz/palette/acb2c7-5b6b8e-f1e0eb-433d48 */
:root {
  --nebulous-december: #acb2c7;
  --haunt-mist: #5b6b8e;
  --first-crush: #f1e0eb;
  --italian-grape: #433d48;
}

Tailwind CSS v4

/* Nebulous December to Italian Grape — https://swatchly.xyz/palette/acb2c7-5b6b8e-f1e0eb-433d48 */
@theme {
  --color-nebulous-december: #acb2c7;
  --color-nebulous-december-50: #e9edfb;
  --color-nebulous-december-100: #dce1f0;
  --color-nebulous-december-200: #c6cbdc;
  --color-nebulous-december-300: #acb2c7;
  --color-nebulous-december-400: #9095a9;
  --color-nebulous-december-500: #777d90;
  --color-nebulous-december-600: #606577;
  --color-nebulous-december-700: #4c5061;
  --color-nebulous-december-800: #3c404e;
  --color-nebulous-december-900: #2f323f;
  --color-nebulous-december-950: #1c1f28;
  --color-haunt-mist: #5b6b8e;
  --color-haunt-mist-50: #f0f5ff;
  --color-haunt-mist-100: #e2ebff;
  --color-haunt-mist-200: #cad8f5;
  --color-haunt-mist-300: #b1c1e2;
  --color-haunt-mist-400: #90a1c5;
  --color-haunt-mist-500: #7586aa;
  --color-haunt-mist-600: #5b6b8e;
  --color-haunt-mist-700: #465474;
  --color-haunt-mist-800: #35425d;
  --color-haunt-mist-900: #283249;
  --color-haunt-mist-950: #171f2f;
  --color-first-crush: #f1e0eb;
  --color-first-crush-50: #f7edf4;
  --color-first-crush-100: #f1e0eb;
  --color-first-crush-200: #dbcfd7;
  --color-first-crush-300: #c7b9c2;
  --color-first-crush-400: #a99aa4;
  --color-first-crush-500: #8f7f89;
  --color-first-crush-600: #746670;
  --color-first-crush-700: #5e5159;
  --color-first-crush-800: #4a3e46;
  --color-first-crush-900: #393036;
  --color-first-crush-950: #241d21;
  --color-italian-grape: #433d48;
  --color-italian-grape-50: #f7f3fb;
  --color-italian-grape-100: #eee9f2;
  --color-italian-grape-200: #dad5df;
  --color-italian-grape-300: #c4bdc9;
  --color-italian-grape-400: #a49daa;
  --color-italian-grape-500: #88828e;
  --color-italian-grape-600: #6d6773;
  --color-italian-grape-700: #56505b;
  --color-italian-grape-800: #433d48;
  --color-italian-grape-900: #332f36;
  --color-italian-grape-950: #1f1c22;
}