Weathered Leather to Rosetti Color Palette

About this palette

Weathered Leather to Rosetti is a 4-color warm, vintage palette: #8E5B47 (Weathered Leather), #FFCCD3 (Love Fumes), #291E0C (Burnt Coffee), #D39597 (Rosetti). It mixes brown, pink, gray, red tones and feels warm overall. The strongest text pairing is #FFCCD3 on #291E0C with a contrast ratio of 11.54:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Weathered Leather	rgb(142, 91, 71)	hsl(17, 33%, 42%)
Love Fumes	rgb(255, 204, 211)	hsl(352, 100%, 90%)
Burnt Coffee	rgb(41, 30, 12)	hsl(37, 55%, 10%)
Rosetti	rgb(211, 149, 151)	hsl(358, 41%, 71%)

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.

Aa11.54:1 Very good#FFCCD3 on #291E0C
Aa11.54:1 Very good#291E0C on #FFCCD3
Aa6.63:1 Good#291E0C on #D39597
Aa6.63:1 Good#D39597 on #291E0C
Aa3.97:1 Poor#8E5B47 on #FFCCD3
Aa3.97:1 Poor#FFCCD3 on #8E5B47

Color blindness preview

CSS variables

/* Weathered Leather to Rosetti — https://swatchly.xyz/palette/8e5b47-ffccd3-291e0c-d39597 */
:root {
  --weathered-leather: #8e5b47;
  --love-fumes: #ffccd3;
  --burnt-coffee: #291e0c;
  --rosetti: #d39597;
}

Tailwind CSS v4

/* Weathered Leather to Rosetti — https://swatchly.xyz/palette/8e5b47-ffccd3-291e0c-d39597 */
@theme {
  --color-weathered-leather: #8e5b47;
  --color-weathered-leather-50: #fff2ed;
  --color-weathered-leather-100: #ffe4da;
  --color-weathered-leather-200: #f8ccbb;
  --color-weathered-leather-300: #e4b3a0;
  --color-weathered-leather-400: #c7927d;
  --color-weathered-leather-500: #ab7661;
  --color-weathered-leather-600: #8e5b47;
  --color-weathered-leather-700: #734635;
  --color-weathered-leather-800: #5c3526;
  --color-weathered-leather-900: #49281b;
  --color-weathered-leather-950: #2f170e;
  --color-love-fumes: #ffccd3;
  --color-love-fumes-50: #fff5f6;
  --color-love-fumes-100: #ffe8eb;
  --color-love-fumes-200: #ffccd3;
  --color-love-fumes-300: #e2b7bd;
  --color-love-fumes-400: #c4969c;
  --color-love-fumes-500: #a87a80;
  --color-love-fumes-600: #8b5f66;
  --color-love-fumes-700: #70494f;
  --color-love-fumes-800: #59373d;
  --color-love-fumes-900: #46292e;
  --color-love-fumes-950: #2d181c;
  --color-burnt-coffee: #291e0c;
  --color-burnt-coffee-50: #fcf4e7;
  --color-burnt-coffee-100: #f3eadc;
  --color-burnt-coffee-200: #e1d6c5;
  --color-burnt-coffee-300: #cbbfac;
  --color-burnt-coffee-400: #ad9f8b;
  --color-burnt-coffee-500: #92846f;
  --color-burnt-coffee-600: #776a56;
  --color-burnt-coffee-700: #605442;
  --color-burnt-coffee-800: #4c4132;
  --color-burnt-coffee-900: #3b3225;
  --color-burnt-coffee-950: #291e0c;
  --color-rosetti: #d39597;
  --color-rosetti-50: #fff5f5;
  --color-rosetti-100: #ffe8e9;
  --color-rosetti-200: #fececf;
  --color-rosetti-300: #ecb7b8;
  --color-rosetti-400: #d39597;
  --color-rosetti-500: #b4797b;
  --color-rosetti-600: #965e60;
  --color-rosetti-700: #7b474a;
  --color-rosetti-800: #623538;
  --color-rosetti-900: #4c2729;
  --color-rosetti-950: #311618;
}