Fog Syringa to Pitch-Black Forests Color Palette

About this palette

Fog Syringa to Pitch-Black Forests is a 4-color cool palette: #C2B8D7 (Fog Syringa), #988DBB (Wizard’s Brew), #78451D (Walnut), #0B362A (Pitch-Black Forests). It mixes purple, brown, turquoise tones and feels cool overall. The strongest text pairing is #C2B8D7 on #0B362A with a contrast ratio of 7.07:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fog Syringa	rgb(194, 184, 215)	hsl(259, 28%, 78%)
Wizard’s Brew	rgb(152, 141, 187)	hsl(254, 25%, 64%)
Walnut	rgb(120, 69, 29)	hsl(26, 61%, 29%)
Pitch-Black Forests	rgb(11, 54, 42)	hsl(163, 66%, 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.

Aa7.07:1 Very good#C2B8D7 on #0B362A
Aa7.07:1 Very good#0B362A on #C2B8D7
Aa4.36:1 Poor#988DBB on #0B362A
Aa4.36:1 Poor#0B362A on #988DBB
Aa4.17:1 Poor#C2B8D7 on #78451D
Aa4.17:1 Poor#78451D on #C2B8D7

Color blindness preview

CSS variables

/* Fog Syringa to Pitch-Black Forests — https://swatchly.xyz/palette/c2b8d7-988dbb-78451d-0b362a */
:root {
  --fog-syringa: #c2b8d7;
  --wizard-s-brew: #988dbb;
  --walnut: #78451d;
  --pitch-black-forests: #0b362a;
}

Tailwind CSS v4

/* Fog Syringa to Pitch-Black Forests — https://swatchly.xyz/palette/c2b8d7-988dbb-78451d-0b362a */
@theme {
  --color-fog-syringa: #c2b8d7;
  --color-fog-syringa-50: #f5f1ff;
  --color-fog-syringa-100: #ece5fa;
  --color-fog-syringa-200: #d8d0e8;
  --color-fog-syringa-300: #c2b8d7;
  --color-fog-syringa-400: #a39ab6;
  --color-fog-syringa-500: #887f9c;
  --color-fog-syringa-600: #6e6580;
  --color-fog-syringa-700: #584f68;
  --color-fog-syringa-800: #453e53;
  --color-fog-syringa-900: #352f41;
  --color-fog-syringa-950: #211d2a;
  --color-wizard-s-brew: #988dbb;
  --color-wizard-s-brew-50: #f1eeff;
  --color-wizard-s-brew-100: #e6dfff;
  --color-wizard-s-brew-200: #d1c8ef;
  --color-wizard-s-brew-300: #b9afda;
  --color-wizard-s-brew-400: #988dbb;
  --color-wizard-s-brew-500: #7f74a1;
  --color-wizard-s-brew-600: #675c86;
  --color-wizard-s-brew-700: #52496e;
  --color-wizard-s-brew-800: #413959;
  --color-wizard-s-brew-900: #332c48;
  --color-wizard-s-brew-950: #211b30;
  --color-walnut: #78451d;
  --color-walnut-50: #fff2ea;
  --color-walnut-100: #ffe6d5;
  --color-walnut-200: #facdae;
  --color-walnut-300: #e7b491;
  --color-walnut-400: #ca936c;
  --color-walnut-500: #ae774f;
  --color-walnut-600: #905c36;
  --color-walnut-700: #78451d;
  --color-walnut-800: #5e3516;
  --color-walnut-900: #4a280c;
  --color-walnut-950: #301705;
  --color-pitch-black-forests: #0b362a;
  --color-pitch-black-forests-50: #e3fcf2;
  --color-pitch-black-forests-100: #d7f3e8;
  --color-pitch-black-forests-200: #c0e0d4;
  --color-pitch-black-forests-300: #a6cbbd;
  --color-pitch-black-forests-400: #82ab9c;
  --color-pitch-black-forests-500: #658f80;
  --color-pitch-black-forests-600: #4b7365;
  --color-pitch-black-forests-700: #365a4e;
  --color-pitch-black-forests-800: #26453b;
  --color-pitch-black-forests-900: #0b362a;
  --color-pitch-black-forests-950: #0d2019;
}