Smoky Charcoal to Fedora Color Palette

About this palette

Smoky Charcoal to Fedora is a 4-color muted palette: #312628 (Smoky Charcoal), #AD9691 (Cortex), #F3DFEA (Pork Belly), #695968 (Fedora). It mixes gray tones and feels balanced overall. The strongest text pairing is #312628 on #F3DFEA with a contrast ratio of 11.51:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Smoky Charcoal	rgb(49, 38, 40)	hsl(349, 13%, 17%)
Cortex	rgb(173, 150, 145)	hsl(11, 15%, 62%)
Pork Belly	rgb(243, 223, 234)	hsl(327, 45%, 91%)
Fedora	rgb(105, 89, 104)	hsl(304, 8%, 38%)

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.

Aa11.51:1 Very good#312628 on #F3DFEA
Aa11.51:1 Very good#F3DFEA on #312628
Aa5.25:1 Good#312628 on #AD9691
Aa5.25:1 Good#AD9691 on #312628
Aa5.13:1 Good#F3DFEA on #695968
Aa5.13:1 Good#695968 on #F3DFEA

Color blindness preview

CSS variables

/* Smoky Charcoal to Fedora — https://swatchly.xyz/palette/312628-ad9691-f3dfea-695968 */
:root {
  --smoky-charcoal: #312628;
  --cortex: #ad9691;
  --pork-belly: #f3dfea;
  --fedora: #695968;
}

Tailwind CSS v4

/* Smoky Charcoal to Fedora — https://swatchly.xyz/palette/312628-ad9691-f3dfea-695968 */
@theme {
  --color-smoky-charcoal: #312628;
  --color-smoky-charcoal-50: #fbf3f4;
  --color-smoky-charcoal-100: #f2e8ea;
  --color-smoky-charcoal-200: #dfd4d6;
  --color-smoky-charcoal-300: #cabdbf;
  --color-smoky-charcoal-400: #a99c9e;
  --color-smoky-charcoal-500: #8c7e81;
  --color-smoky-charcoal-600: #6f6365;
  --color-smoky-charcoal-700: #564b4d;
  --color-smoky-charcoal-800: #413739;
  --color-smoky-charcoal-900: #312628;
  --color-smoky-charcoal-950: #1b1617;
  --color-cortex: #ad9691;
  --color-cortex-50: #fef0ec;
  --color-cortex-100: #f4e4e1;
  --color-cortex-200: #e2cfcb;
  --color-cortex-300: #ccb7b2;
  --color-cortex-400: #ad9691;
  --color-cortex-500: #927c77;
  --color-cortex-600: #78635e;
  --color-cortex-700: #604e4a;
  --color-cortex-800: #4d3c39;
  --color-cortex-900: #3c2e2b;
  --color-cortex-950: #261d1a;
  --color-pork-belly: #f3dfea;
  --color-pork-belly-50: #f8edf3;
  --color-pork-belly-100: #f3dfea;
  --color-pork-belly-200: #ddced6;
  --color-pork-belly-300: #c9b8c1;
  --color-pork-belly-400: #ab99a3;
  --color-pork-belly-500: #907e88;
  --color-pork-belly-600: #76656f;
  --color-pork-belly-700: #5f5059;
  --color-pork-belly-800: #4b3e45;
  --color-pork-belly-900: #3a2f35;
  --color-pork-belly-950: #251d21;
  --color-fedora: #695968;
  --color-fedora-50: #fcf1fb;
  --color-fedora-100: #f3e7f2;
  --color-fedora-200: #e2d4e1;
  --color-fedora-300: #cebfcd;
  --color-fedora-400: #b2a1b0;
  --color-fedora-500: #988797;
  --color-fedora-600: #7f6e7e;
  --color-fedora-700: #695968;
  --color-fedora-800: #534552;
  --color-fedora-900: #40343f;
  --color-fedora-950: #292028;
}