Smoked Black Coffee to Royal Fig color palette

3A3034Smoked Black Coffee FBEADDDogwood A6BFB8Wild Life 6F8F9ACavolo Nero 725860Royal Fig

About this palette

Smoked Black Coffee to Royal Fig is a 5-color muted palette: #3A3034 (Smoked Black Coffee), #FBEADD (Dogwood), #A6BFB8 (Wild Life), #6F8F9A (Cavolo Nero), #725860 (Royal Fig). It mixes gray, white, blue, red tones and feels balanced overall. The strongest text pairing is #3A3034 on #FBEADD with a contrast ratio of 10.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Smoked Black Coffee	rgb(58, 48, 52)	hsl(336, 9%, 21%)
Dogwood	rgb(251, 234, 221)	hsl(26, 79%, 93%)
Wild Life	rgb(166, 191, 184)	hsl(163, 16%, 70%)
Cavolo Nero	rgb(111, 143, 154)	hsl(195, 18%, 52%)
Royal Fig	rgb(114, 88, 96)	hsl(342, 13%, 40%)

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.

Aa10.84:1 Very good#3A3034 on #FBEADD
Aa10.84:1 Very good#FBEADD on #3A3034
Aa6.52:1 Good#3A3034 on #A6BFB8
Aa6.52:1 Good#A6BFB8 on #3A3034
Aa5.46:1 Good#FBEADD on #725860
Aa5.46:1 Good#725860 on #FBEADD
Aa3.67:1 Poor#3A3034 on #6F8F9A
Aa3.67:1 Poor#6F8F9A on #3A3034

Color blindness preview

CSS variables

/* Smoked Black Coffee to Royal Fig — https://swatchly.xyz/palette/3a3034-fbeadd-a6bfb8-6f8f9a-725860 */
:root {
  --smoked-black-coffee: #3a3034;
  --dogwood: #fbeadd;
  --wild-life: #a6bfb8;
  --cavolo-nero: #6f8f9a;
  --royal-fig: #725860;
}

Tailwind CSS v4

/* Smoked Black Coffee to Royal Fig — https://swatchly.xyz/palette/3a3034-fbeadd-a6bfb8-6f8f9a-725860 */
@theme {
  --color-smoked-black-coffee: #3a3034;
  --color-smoked-black-coffee-50: #faf3f6;
  --color-smoked-black-coffee-100: #f1e9ec;
  --color-smoked-black-coffee-200: #ded4d8;
  --color-smoked-black-coffee-300: #c8bdc2;
  --color-smoked-black-coffee-400: #aa9ea2;
  --color-smoked-black-coffee-500: #8e8387;
  --color-smoked-black-coffee-600: #74686d;
  --color-smoked-black-coffee-700: #5c5256;
  --color-smoked-black-coffee-800: #494043;
  --color-smoked-black-coffee-900: #3a3034;
  --color-smoked-black-coffee-950: #231e20;
  --color-dogwood: #fbeadd;
  --color-dogwood-50: #fef5ee;
  --color-dogwood-100: #fbeadd;
  --color-dogwood-200: #e3d7ce;
  --color-dogwood-300: #cdbfb5;
  --color-dogwood-400: #af9f94;
  --color-dogwood-500: #938478;
  --color-dogwood-600: #77695e;
  --color-dogwood-700: #5f5248;
  --color-dogwood-800: #4b4037;
  --color-dogwood-900: #3a3129;
  --color-dogwood-950: #251e18;
  --color-wild-life: #a6bfb8;
  --color-wild-life-50: #e6f5f0;
  --color-wild-life-100: #d9eae5;
  --color-wild-life-200: #c2d6d0;
  --color-wild-life-300: #a6bfb8;
  --color-wild-life-400: #89a19a;
  --color-wild-life-500: #6f8780;
  --color-wild-life-600: #576e68;
  --color-wild-life-700: #445852;
  --color-wild-life-800: #344641;
  --color-wild-life-900: #273733;
  --color-wild-life-950: #17221f;
  --color-cavolo-nero: #6f8f9a;
  --color-cavolo-nero-50: #e8f9ff;
  --color-cavolo-nero-100: #dcf0f8;
  --color-cavolo-nero-200: #c5dee7;
  --color-cavolo-nero-300: #acc8d2;
  --color-cavolo-nero-400: #8baab5;
  --color-cavolo-nero-500: #6f8f9a;
  --color-cavolo-nero-600: #55747e;
  --color-cavolo-nero-700: #405c66;
  --color-cavolo-nero-800: #2f4850;
  --color-cavolo-nero-900: #22373e;
  --color-cavolo-nero-950: #132227;
  --color-royal-fig: #725860;
  --color-royal-fig-50: #fff1f5;
  --color-royal-fig-100: #f9e5eb;
  --color-royal-fig-200: #e9d3d9;
  --color-royal-fig-300: #d7bdc5;
  --color-royal-fig-400: #bb9fa7;
  --color-royal-fig-500: #a1858e;
  --color-royal-fig-600: #886d75;
  --color-royal-fig-700: #725860;
  --color-royal-fig-800: #5a444b;
  --color-royal-fig-900: #463439;
  --color-royal-fig-950: #2d2024;
}