Fog Syringa to Black Magic color palette

C3BBD0Fog Syringa 529197Martian Cerulean 1B2116Underworld FFF1EDIvory Tower 504358Black Magic

About this palette

Fog Syringa to Black Magic is a 5-color muted palette: #C3BBD0 (Fog Syringa), #529197 (Martian Cerulean), #1B2116 (Underworld), #FFF1ED (Ivory Tower), #504358 (Black Magic). It mixes gray, turquoise, white, purple tones and feels cool overall. The strongest text pairing is #1B2116 on #FFF1ED with a contrast ratio of 14.94:1, and 5 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fog Syringa	rgb(195, 187, 208)	hsl(263, 18%, 77%)
Martian Cerulean	rgb(82, 145, 151)	hsl(185, 30%, 46%)
Underworld	rgb(27, 33, 22)	hsl(93, 20%, 11%)
Ivory Tower	rgb(255, 241, 237)	hsl(13, 100%, 96%)
Black Magic	rgb(80, 67, 88)	hsl(277, 14%, 30%)

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.94:1 Super#1B2116 on #FFF1ED
Aa14.94:1 Super#FFF1ED on #1B2116
Aa8.89:1 Very good#C3BBD0 on #1B2116
Aa8.89:1 Very good#1B2116 on #C3BBD0
Aa8.34:1 Very good#FFF1ED on #504358
Aa8.34:1 Very good#504358 on #FFF1ED
Aa4.96:1 Good#C3BBD0 on #504358
Aa4.96:1 Good#504358 on #C3BBD0

Color blindness preview

CSS variables

/* Fog Syringa to Black Magic — https://swatchly.xyz/palette/c3bbd0-529197-1b2116-fff1ed-504358 */
:root {
  --fog-syringa: #c3bbd0;
  --martian-cerulean: #529197;
  --underworld: #1b2116;
  --ivory-tower: #fff1ed;
  --black-magic: #504358;
}

Tailwind CSS v4

/* Fog Syringa to Black Magic — https://swatchly.xyz/palette/c3bbd0-529197-1b2116-fff1ed-504358 */
@theme {
  --color-fog-syringa: #c3bbd0;
  --color-fog-syringa-50: #f6f2fe;
  --color-fog-syringa-100: #ece7f5;
  --color-fog-syringa-200: #d9d3e3;
  --color-fog-syringa-300: #c3bbd0;
  --color-fog-syringa-400: #a49cb0;
  --color-fog-syringa-500: #898195;
  --color-fog-syringa-600: #6e677a;
  --color-fog-syringa-700: #585162;
  --color-fog-syringa-800: #453f4e;
  --color-fog-syringa-900: #35303d;
  --color-fog-syringa-950: #211d26;
  --color-martian-cerulean: #529197;
  --color-martian-cerulean-50: #dcfcff;
  --color-martian-cerulean-100: #ccf3f7;
  --color-martian-cerulean-200: #b2e1e5;
  --color-martian-cerulean-300: #96cbd1;
  --color-martian-cerulean-400: #70adb2;
  --color-martian-cerulean-500: #529197;
  --color-martian-cerulean-600: #38767c;
  --color-martian-cerulean-700: #245e64;
  --color-martian-cerulean-800: #154a4f;
  --color-martian-cerulean-900: #0b3a3e;
  --color-martian-cerulean-950: #042427;
  --color-underworld: #1b2116;
  --color-underworld-50: #f2f7ef;
  --color-underworld-100: #e8ede4;
  --color-underworld-200: #d4dacf;
  --color-underworld-300: #bdc4b7;
  --color-underworld-400: #9da497;
  --color-underworld-500: #81897b;
  --color-underworld-600: #676e61;
  --color-underworld-700: #51574c;
  --color-underworld-800: #3e443a;
  --color-underworld-900: #2f342c;
  --color-underworld-950: #1b2116;
  --color-ivory-tower: #fff1ed;
  --color-ivory-tower-50: #fff1ed;
  --color-ivory-tower-100: #f1e8e6;
  --color-ivory-tower-200: #dfd4d2;
  --color-ivory-tower-300: #c9beba;
  --color-ivory-tower-400: #ab9e9b;
  --color-ivory-tower-500: #8f837f;
  --color-ivory-tower-600: #756965;
  --color-ivory-tower-700: #5d5350;
  --color-ivory-tower-800: #49403d;
  --color-ivory-tower-900: #39312f;
  --color-ivory-tower-950: #231e1c;
  --color-black-magic: #504358;
  --color-black-magic-50: #faf2ff;
  --color-black-magic-100: #f1e7f7;
  --color-black-magic-200: #ded2e5;
  --color-black-magic-300: #c9bdd2;
  --color-black-magic-400: #ac9eb5;
  --color-black-magic-500: #92839b;
  --color-black-magic-600: #786a81;
  --color-black-magic-700: #62556a;
  --color-black-magic-800: #504358;
  --color-black-magic-900: #3d3443;
  --color-black-magic-950: #27202b;
}