Woodhaven to Film Noir Color Palette

About this palette

Woodhaven to Film Noir is a 5-color muted, warm, vintage palette: #9D7970 (Woodhaven), #785148 (Roasted), #F7D9D2 (Bloodthirsty Beige), #D5ADA2 (Borlotti Bean), #4D3C35 (Film Noir). It mixes red, gray, pink tones and feels warm overall. The strongest text pairing is #F7D9D2 on #4D3C35 with a contrast ratio of 7.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Woodhaven	rgb(157, 121, 112)	hsl(12, 19%, 53%)
Roasted	rgb(120, 81, 72)	hsl(11, 25%, 38%)
Bloodthirsty Beige	rgb(247, 217, 210)	hsl(11, 70%, 90%)
Borlotti Bean	rgb(213, 173, 162)	hsl(13, 38%, 74%)
Film Noir	rgb(77, 60, 53)	hsl(17, 18%, 25%)

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.85:1 Very good#F7D9D2 on #4D3C35
Aa7.85:1 Very good#4D3C35 on #F7D9D2
Aa5.15:1 Good#785148 on #F7D9D2
Aa5.15:1 Good#F7D9D2 on #785148
Aa5.13:1 Good#D5ADA2 on #4D3C35
Aa5.13:1 Good#4D3C35 on #D5ADA2
Aa3.37:1 Poor#785148 on #D5ADA2
Aa3.37:1 Poor#D5ADA2 on #785148

Color blindness preview

CSS variables

/* Woodhaven to Film Noir — https://swatchly.xyz/palette/9d7970-785148-f7d9d2-d5ada2-4d3c35 */
:root {
  --woodhaven: #9d7970;
  --roasted: #785148;
  --bloodthirsty-beige: #f7d9d2;
  --borlotti-bean: #d5ada2;
  --film-noir: #4d3c35;
}

Tailwind CSS v4

/* Woodhaven to Film Noir — https://swatchly.xyz/palette/9d7970-785148-f7d9d2-d5ada2-4d3c35 */
@theme {
  --color-woodhaven: #9d7970;
  --color-woodhaven-50: #fff1ed;
  --color-woodhaven-100: #fde3dd;
  --color-woodhaven-200: #eccec6;
  --color-woodhaven-300: #d7b6ad;
  --color-woodhaven-400: #b9958c;
  --color-woodhaven-500: #9d7970;
  --color-woodhaven-600: #826057;
  --color-woodhaven-700: #694b43;
  --color-woodhaven-800: #543933;
  --color-woodhaven-900: #422c26;
  --color-woodhaven-950: #2a1a16;
  --color-roasted: #785148;
  --color-roasted-50: #fff2ef;
  --color-roasted-100: #ffe4de;
  --color-roasted-200: #f2d0c8;
  --color-roasted-300: #e0b9b0;
  --color-roasted-400: #c49a90;
  --color-roasted-500: #aa8076;
  --color-roasted-600: #8f675d;
  --color-roasted-700: #785148;
  --color-roasted-800: #5f3f37;
  --color-roasted-900: #4b2f29;
  --color-roasted-950: #301c18;
  --color-bloodthirsty-beige: #f7d9d2;
  --color-bloodthirsty-beige-50: #fffaf9;
  --color-bloodthirsty-beige-100: #ffefeb;
  --color-bloodthirsty-beige-200: #f7d9d2;
  --color-bloodthirsty-beige-300: #dac2bd;
  --color-bloodthirsty-beige-400: #bba09a;
  --color-bloodthirsty-beige-500: #9e837d;
  --color-bloodthirsty-beige-600: #816862;
  --color-bloodthirsty-beige-700: #67504b;
  --color-bloodthirsty-beige-800: #513d38;
  --color-bloodthirsty-beige-900: #3f2e2a;
  --color-bloodthirsty-beige-950: #281c19;
  --color-borlotti-bean: #d5ada2;
  --color-borlotti-bean-50: #ffebe6;
  --color-borlotti-bean-100: #faded6;
  --color-borlotti-bean-200: #e8c7be;
  --color-borlotti-bean-300: #d5ada2;
  --color-borlotti-bean-400: #b69086;
  --color-borlotti-bean-500: #9b766c;
  --color-borlotti-bean-600: #815e54;
  --color-borlotti-bean-700: #694a41;
  --color-borlotti-bean-800: #553932;
  --color-borlotti-bean-900: #442c26;
  --color-borlotti-bean-950: #2b1a16;
  --color-film-noir: #4d3c35;
  --color-film-noir-50: #fef2ed;
  --color-film-noir-100: #f5e8e2;
  --color-film-noir-200: #e4d4cd;
  --color-film-noir-300: #cebcb5;
  --color-film-noir-400: #af9c94;
  --color-film-noir-500: #948078;
  --color-film-noir-600: #78665e;
  --color-film-noir-700: #604f49;
  --color-film-noir-800: #4d3c35;
  --color-film-noir-900: #3a2e29;
  --color-film-noir-950: #241c18;
}