Bell Tower to Café Noir Color Palette

About this palette

Bell Tower to Café Noir is a 5-color muted, warm, earthy, vintage, gradient palette: #DBD2BC (Bell Tower), #AE9B79 (Incense), #827153 (Chocolate Velvet), #645B43 (Tree of Life), #47371B (Café Noir). It mixes gray, yellow, brown tones and feels warm overall. The strongest text pairing is #DBD2BC on #47371B with a contrast ratio of 7.63:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bell Tower	rgb(219, 210, 188)	hsl(43, 30%, 80%)
Incense	rgb(174, 155, 121)	hsl(38, 25%, 58%)
Chocolate Velvet	rgb(130, 113, 83)	hsl(38, 22%, 42%)
Tree of Life	rgb(100, 91, 67)	hsl(44, 20%, 33%)
Café Noir	rgb(71, 55, 27)	hsl(38, 45%, 19%)

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.63:1 Very good#DBD2BC on #47371B
Aa7.63:1 Very good#47371B on #DBD2BC
Aa4.47:1 Poor#DBD2BC on #645B43
Aa4.47:1 Poor#645B43 on #DBD2BC
Aa4.24:1 Poor#AE9B79 on #47371B
Aa4.24:1 Poor#47371B on #AE9B79
Aa3.15:1 Poor#DBD2BC on #827153
Aa3.15:1 Poor#827153 on #DBD2BC

Color blindness preview

CSS variables

/* Bell Tower to Café Noir — https://swatchly.xyz/palette/dbd2bc-ae9b79-827153-645b43-47371b */
:root {
  --bell-tower: #dbd2bc;
  --incense: #ae9b79;
  --chocolate-velvet: #827153;
  --tree-of-life: #645b43;
  --caf-noir: #47371b;
}

Tailwind CSS v4

/* Bell Tower to Café Noir — https://swatchly.xyz/palette/dbd2bc-ae9b79-827153-645b43-47371b */
@theme {
  --color-bell-tower: #dbd2bc;
  --color-bell-tower-50: #f7f1e5;
  --color-bell-tower-100: #ede7d8;
  --color-bell-tower-200: #dbd2bc;
  --color-bell-tower-300: #c4bcaa;
  --color-bell-tower-400: #a69e8a;
  --color-bell-tower-500: #8c836f;
  --color-bell-tower-600: #726a56;
  --color-bell-tower-700: #5b5442;
  --color-bell-tower-800: #484232;
  --color-bell-tower-900: #383225;
  --color-bell-tower-950: #231f16;
  --color-incense: #ae9b79;
  --color-incense-50: #fef2de;
  --color-incense-100: #f4e8d1;
  --color-incense-200: #e2d3b8;
  --color-incense-300: #ccbb9d;
  --color-incense-400: #ae9b79;
  --color-incense-500: #93805f;
  --color-incense-600: #786747;
  --color-incense-700: #615134;
  --color-incense-800: #4d3f26;
  --color-incense-900: #3c301b;
  --color-incense-950: #261e0e;
  --color-chocolate-velvet: #827153;
  --color-chocolate-velvet-50: #fef4e2;
  --color-chocolate-velvet-100: #f7ebd7;
  --color-chocolate-velvet-200: #e6d9c1;
  --color-chocolate-velvet-300: #d3c3a8;
  --color-chocolate-velvet-400: #b6a587;
  --color-chocolate-velvet-500: #9c8a6c;
  --color-chocolate-velvet-600: #827153;
  --color-chocolate-velvet-700: #69593e;
  --color-chocolate-velvet-800: #53452d;
  --color-chocolate-velvet-900: #403420;
  --color-chocolate-velvet-950: #282011;
  --color-tree-of-life: #645b43;
  --color-tree-of-life-50: #fbf5e6;
  --color-tree-of-life-100: #f1ebda;
  --color-tree-of-life-200: #e0d8c4;
  --color-tree-of-life-300: #cbc3ac;
  --color-tree-of-life-400: #aea58c;
  --color-tree-of-life-500: #948a71;
  --color-tree-of-life-600: #7a7158;
  --color-tree-of-life-700: #645b43;
  --color-tree-of-life-800: #4e4733;
  --color-tree-of-life-900: #3d3625;
  --color-tree-of-life-950: #262215;
  --color-caf-noir: #47371b;
  --color-caf-noir-50: #fff4e2;
  --color-caf-noir-100: #f6ead5;
  --color-caf-noir-200: #e4d5be;
  --color-caf-noir-300: #cfbfa4;
  --color-caf-noir-400: #b2a083;
  --color-caf-noir-500: #988668;
  --color-caf-noir-600: #7e6d50;
  --color-caf-noir-700: #68583d;
  --color-caf-noir-800: #54462e;
  --color-caf-noir-900: #47371b;
  --color-caf-noir-950: #2c2313;
}