Black Magic to Let It Snow Color Palette

About this palette

Black Magic to Let It Snow is a 5-color muted, gradient palette: #4F4959 (Black Magic), #5F6751 (Monstera), #77A7B4 (Equanimity), #D5BBB3 (Mothy), #DAF3F8 (Let It Snow). It mixes gray, green, blue, white tones and feels cool overall. The strongest text pairing is #4F4959 on #DAF3F8 with a contrast ratio of 7.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Magic	rgb(79, 73, 89)	hsl(262, 10%, 32%)
Monstera	rgb(95, 103, 81)	hsl(82, 12%, 36%)
Equanimity	rgb(119, 167, 180)	hsl(193, 29%, 59%)
Mothy	rgb(213, 187, 179)	hsl(14, 29%, 77%)
Let It Snow	rgb(218, 243, 248)	hsl(190, 68%, 91%)

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.

Aa7.47:1 Very good#4F4959 on #DAF3F8
Aa7.47:1 Very good#DAF3F8 on #4F4959
Aa5.12:1 Good#5F6751 on #DAF3F8
Aa5.12:1 Good#DAF3F8 on #5F6751
Aa4.77:1 Good#4F4959 on #D5BBB3
Aa4.77:1 Good#D5BBB3 on #4F4959
Aa3.28:1 Poor#4F4959 on #77A7B4
Aa3.28:1 Poor#77A7B4 on #4F4959

Color blindness preview

CSS variables

/* Black Magic to Let It Snow — https://swatchly.xyz/palette/4f4959-5f6751-77a7b4-d5bbb3-daf3f8 */
:root {
  --black-magic: #4f4959;
  --monstera: #5f6751;
  --equanimity: #77a7b4;
  --mothy: #d5bbb3;
  --let-it-snow: #daf3f8;
}

Tailwind CSS v4

/* Black Magic to Let It Snow — https://swatchly.xyz/palette/4f4959-5f6751-77a7b4-d5bbb3-daf3f8 */
@theme {
  --color-black-magic: #4f4959;
  --color-black-magic-50: #f7f3fe;
  --color-black-magic-100: #ede9f5;
  --color-black-magic-200: #d8d3e1;
  --color-black-magic-300: #c0baca;
  --color-black-magic-400: #9f99ab;
  --color-black-magic-500: #837c8e;
  --color-black-magic-600: #676171;
  --color-black-magic-700: #4f4959;
  --color-black-magic-800: #3d3945;
  --color-black-magic-900: #2f2b35;
  --color-black-magic-950: #1d1a21;
  --color-monstera: #5f6751;
  --color-monstera-50: #f2f8ea;
  --color-monstera-100: #e6ecdc;
  --color-monstera-200: #d0d8c5;
  --color-monstera-300: #b8c0ab;
  --color-monstera-400: #979f88;
  --color-monstera-500: #7a836c;
  --color-monstera-600: #5f6751;
  --color-monstera-700: #4b523f;
  --color-monstera-800: #3a402f;
  --color-monstera-900: #2c3123;
  --color-monstera-950: #1b1f15;
  --color-equanimity: #77a7b4;
  --color-equanimity-50: #e2f9ff;
  --color-equanimity-100: #d1f0f8;
  --color-equanimity-200: #b8dce7;
  --color-equanimity-300: #9cc6d2;
  --color-equanimity-400: #77a7b4;
  --color-equanimity-500: #5d8c99;
  --color-equanimity-600: #44727e;
  --color-equanimity-700: #315b66;
  --color-equanimity-800: #224751;
  --color-equanimity-900: #173740;
  --color-equanimity-950: #0b2329;
  --color-mothy: #d5bbb3;
  --color-mothy-50: #fff2ee;
  --color-mothy-100: #f8e7e2;
  --color-mothy-200: #e7d3cd;
  --color-mothy-300: #d5bbb3;
  --color-mothy-400: #b49c95;
  --color-mothy-500: #998079;
  --color-mothy-600: #7d665f;
  --color-mothy-700: #65504a;
  --color-mothy-800: #503e38;
  --color-mothy-900: #3e2f2a;
  --color-mothy-950: #271c19;
  --color-let-it-snow: #daf3f8;
  --color-let-it-snow-50: #edfafd;
  --color-let-it-snow-100: #daf3f8;
  --color-let-it-snow-200: #cbdde1;
  --color-let-it-snow-300: #b2c7cb;
  --color-let-it-snow-400: #91a7ac;
  --color-let-it-snow-500: #758c90;
  --color-let-it-snow-600: #5b7175;
  --color-let-it-snow-700: #45595d;
  --color-let-it-snow-800: #354649;
  --color-let-it-snow-900: #273639;
  --color-let-it-snow-950: #172123;
}