Film Noir to Slightly in Love Color Palette

About this palette

Film Noir to Slightly in Love is a 5-color muted, warm, earthy, vintage palette: #49392F (Film Noir), #684C3B (Black Power), #9F7156 (Pecan), #D7B8A4 (Soba), #FCE7DA (Slightly in Love). It mixes gray, brown, orange, white tones and feels warm overall. The strongest text pairing is #49392F on #FCE7DA with a contrast ratio of 9.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Film Noir	rgb(73, 57, 47)	hsl(23, 22%, 24%)
Black Power	rgb(104, 76, 59)	hsl(23, 28%, 32%)
Pecan	rgb(159, 113, 86)	hsl(22, 30%, 48%)
Soba	rgb(215, 184, 164)	hsl(24, 39%, 74%)
Slightly in Love	rgb(252, 231, 218)	hsl(23, 85%, 92%)

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.

Aa9.21:1 Very good#49392F on #FCE7DA
Aa9.21:1 Very good#FCE7DA on #49392F
Aa6.55:1 Good#684C3B on #FCE7DA
Aa6.55:1 Good#FCE7DA on #684C3B
Aa5.91:1 Good#49392F on #D7B8A4
Aa5.91:1 Good#D7B8A4 on #49392F
Aa4.20:1 Poor#684C3B on #D7B8A4
Aa4.20:1 Poor#D7B8A4 on #684C3B

Color blindness preview

CSS variables

/* Film Noir to Slightly in Love — https://swatchly.xyz/palette/49392f-684c3b-9f7156-d7b8a4-fce7da */
:root {
  --film-noir: #49392f;
  --black-power: #684c3b;
  --pecan: #9f7156;
  --soba: #d7b8a4;
  --slightly-in-love: #fce7da;
}

Tailwind CSS v4

/* Film Noir to Slightly in Love — https://swatchly.xyz/palette/49392f-684c3b-9f7156-d7b8a4-fce7da */
@theme {
  --color-film-noir: #49392f;
  --color-film-noir-50: #fef3ec;
  --color-film-noir-100: #f5e8e1;
  --color-film-noir-200: #e3d4cb;
  --color-film-noir-300: #cdbcb2;
  --color-film-noir-400: #ae9b90;
  --color-film-noir-500: #917f74;
  --color-film-noir-600: #756459;
  --color-film-noir-700: #5c4d43;
  --color-film-noir-800: #49392f;
  --color-film-noir-900: #372c25;
  --color-film-noir-950: #221a15;
  --color-black-power: #684c3b;
  --color-black-power-50: #fff2eb;
  --color-black-power-100: #fce6da;
  --color-black-power-200: #ead1c3;
  --color-black-power-300: #d6baa9;
  --color-black-power-400: #b89987;
  --color-black-power-500: #9c7d6b;
  --color-black-power-600: #806352;
  --color-black-power-700: #684c3b;
  --color-black-power-800: #513b2d;
  --color-black-power-900: #3f2d21;
  --color-black-power-950: #281b13;
  --color-pecan: #9f7156;
  --color-pecan-50: #fff0e8;
  --color-pecan-100: #ffe1d0;
  --color-pecan-200: #f1c9b3;
  --color-pecan-300: #dcb096;
  --color-pecan-400: #bd8e73;
  --color-pecan-500: #9f7156;
  --color-pecan-600: #845940;
  --color-pecan-700: #6b452e;
  --color-pecan-800: #563521;
  --color-pecan-900: #452817;
  --color-pecan-950: #2d180c;
  --color-soba: #d7b8a4;
  --color-soba-50: #fff1e8;
  --color-soba-100: #fae5d8;
  --color-soba-200: #e8d1c1;
  --color-soba-300: #d7b8a4;
  --color-soba-400: #b69987;
  --color-soba-500: #9b7e6b;
  --color-soba-600: #806453;
  --color-soba-700: #674f3f;
  --color-soba-800: #523d2f;
  --color-soba-900: #402e22;
  --color-soba-950: #291c13;
  --color-slightly-in-love: #fce7da;
  --color-slightly-in-love-50: #fff3ec;
  --color-slightly-in-love-100: #fce7da;
  --color-slightly-in-love-200: #e4d4cb;
  --color-slightly-in-love-300: #cfbdb3;
  --color-slightly-in-love-400: #b09e92;
  --color-slightly-in-love-500: #958276;
  --color-slightly-in-love-600: #7a685d;
  --color-slightly-in-love-700: #625247;
  --color-slightly-in-love-800: #4d3f36;
  --color-slightly-in-love-900: #3c3029;
  --color-slightly-in-love-950: #261d18;
}