Noir Mystique to Incense color palette

1F170FNoir Mystique 3F3125Cola 8C745AMink EDD5BCWriter’s Parchment 6D6050Kabul B29A81Incense

About this palette

Noir Mystique to Incense is a 6-color muted palette: #1F170F (Noir Mystique), #3F3125 (Cola), #8C745A (Mink), #EDD5BC (Writer’s Parchment), #6D6050 (Kabul), #B29A81 (Incense). It mixes black, gray, brown, orange tones and feels warm overall. The strongest text pairing is #1F170F on #EDD5BC with a contrast ratio of 12.50:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noir Mystique	rgb(31, 23, 15)	hsl(30, 35%, 9%)
Cola	rgb(63, 49, 37)	hsl(28, 26%, 20%)
Mink	rgb(140, 116, 90)	hsl(31, 22%, 45%)
Writer’s Parchment	rgb(237, 213, 188)	hsl(31, 58%, 83%)
Kabul	rgb(109, 96, 80)	hsl(33, 15%, 37%)
Incense	rgb(178, 154, 129)	hsl(31, 24%, 60%)

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.

Aa12.50:1 Super#1F170F on #EDD5BC
Aa12.50:1 Super#EDD5BC on #1F170F
Aa8.85:1 Very good#3F3125 on #EDD5BC
Aa8.85:1 Very good#EDD5BC on #3F3125
Aa6.59:1 Good#1F170F on #B29A81
Aa6.59:1 Good#B29A81 on #1F170F
Aa4.67:1 Good#3F3125 on #B29A81
Aa4.67:1 Good#B29A81 on #3F3125

Color blindness preview

CSS variables

/* Noir Mystique to Incense — https://swatchly.xyz/palette/1f170f-3f3125-8c745a-edd5bc-6d6050-b29a81 */
:root {
  --noir-mystique: #1f170f;
  --cola: #3f3125;
  --mink: #8c745a;
  --writer-s-parchment: #edd5bc;
  --kabul: #6d6050;
  --incense: #b29a81;
}

Tailwind CSS v4

/* Noir Mystique to Incense — https://swatchly.xyz/palette/1f170f-3f3125-8c745a-edd5bc-6d6050-b29a81 */
@theme {
  --color-noir-mystique: #1f170f;
  --color-noir-mystique-50: #faf4ee;
  --color-noir-mystique-100: #f1eae3;
  --color-noir-mystique-200: #ded6ce;
  --color-noir-mystique-300: #c9bfb6;
  --color-noir-mystique-400: #aa9f95;
  --color-noir-mystique-500: #8d8379;
  --color-noir-mystique-600: #71675e;
  --color-noir-mystique-700: #585047;
  --color-noir-mystique-800: #433c35;
  --color-noir-mystique-900: #322c26;
  --color-noir-mystique-950: #1f170f;
  --color-cola: #3f3125;
  --color-cola-50: #fdf3eb;
  --color-cola-100: #f4e9df;
  --color-cola-200: #e2d5ca;
  --color-cola-300: #cdbeb1;
  --color-cola-400: #af9e91;
  --color-cola-500: #948375;
  --color-cola-600: #79695c;
  --color-cola-700: #615347;
  --color-cola-800: #4d4136;
  --color-cola-900: #3f3125;
  --color-cola-950: #261f18;
  --color-mink: #8c745a;
  --color-mink-50: #fff3e6;
  --color-mink-100: #fbebd9;
  --color-mink-200: #ecd9c5;
  --color-mink-300: #dac4ad;
  --color-mink-400: #bea68d;
  --color-mink-500: #a58d72;
  --color-mink-600: #8c745a;
  --color-mink-700: #715b43;
  --color-mink-800: #5a4631;
  --color-mink-900: #463523;
  --color-mink-950: #2c2013;
  --color-writer-s-parchment: #edd5bc;
  --color-writer-s-parchment-50: #fff5ea;
  --color-writer-s-parchment-100: #f9eadb;
  --color-writer-s-parchment-200: #edd5bc;
  --color-writer-s-parchment-300: #d3bfaa;
  --color-writer-s-parchment-400: #b49f88;
  --color-writer-s-parchment-500: #99836c;
  --color-writer-s-parchment-600: #7d6852;
  --color-writer-s-parchment-700: #64523e;
  --color-writer-s-parchment-800: #4f3f2d;
  --color-writer-s-parchment-900: #3e3021;
  --color-writer-s-parchment-950: #271d12;
  --color-kabul: #6d6050;
  --color-kabul-50: #fcf4ea;
  --color-kabul-100: #f1e8dc;
  --color-kabul-200: #ddd2c4;
  --color-kabul-300: #c6b9aa;
  --color-kabul-400: #a69888;
  --color-kabul-500: #897c6b;
  --color-kabul-600: #6d6050;
  --color-kabul-700: #574c3e;
  --color-kabul-800: #443b2f;
  --color-kabul-900: #352d23;
  --color-kabul-950: #211c14;
  --color-incense: #b29a81;
  --color-incense-50: #fff2e4;
  --color-incense-100: #f7e7d6;
  --color-incense-200: #e5d2be;
  --color-incense-300: #d0baa4;
  --color-incense-400: #b29a81;
  --color-incense-500: #967f67;
  --color-incense-600: #7b664f;
  --color-incense-700: #64503b;
  --color-incense-800: #4f3e2c;
  --color-incense-900: #3e2f20;
  --color-incense-950: #271d12;
}