Torrefacto Roast to Girlie color palette

482822Torrefacto Roast 873A2AOlive Niçoise BB6654Too Hot to Handle DEA8A1Pastel Pink FFD6CFGirlie

About this palette

Torrefacto Roast to Girlie is a 5-color warm, vintage, monochromatic, gradient palette: #482822 (Torrefacto Roast), #873A2A (Olive Niçoise), #BB6654 (Too Hot to Handle), #DEA8A1 (Pastel Pink), #FFD6CF (Girlie). It mixes brown, red, pink tones and feels warm overall. The strongest text pairing is #482822 on #FFD6CF with a contrast ratio of 9.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Torrefacto Roast	rgb(72, 40, 34)	hsl(9, 36%, 21%)
Olive Niçoise	rgb(135, 58, 42)	hsl(10, 53%, 35%)
Too Hot to Handle	rgb(187, 102, 84)	hsl(10, 43%, 53%)
Pastel Pink	rgb(222, 168, 161)	hsl(7, 48%, 75%)
Girlie	rgb(255, 214, 207)	hsl(9, 100%, 91%)

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.84:1 Very good#482822 on #FFD6CF
Aa9.84:1 Very good#FFD6CF on #482822
Aa6.38:1 Good#482822 on #DEA8A1
Aa6.38:1 Good#DEA8A1 on #482822
Aa5.91:1 Good#873A2A on #FFD6CF
Aa5.91:1 Good#FFD6CF on #873A2A
Aa3.83:1 Poor#873A2A on #DEA8A1
Aa3.83:1 Poor#DEA8A1 on #873A2A

Color blindness preview

CSS variables

/* Torrefacto Roast to Girlie — https://swatchly.xyz/palette/482822-873a2a-bb6654-dea8a1-ffd6cf */
:root {
  --torrefacto-roast: #482822;
  --olive-ni-oise: #873a2a;
  --too-hot-to-handle: #bb6654;
  --pastel-pink: #dea8a1;
  --girlie: #ffd6cf;
}

Tailwind CSS v4

/* Torrefacto Roast to Girlie — https://swatchly.xyz/palette/482822-873a2a-bb6654-dea8a1-ffd6cf */
@theme {
  --color-torrefacto-roast: #482822;
  --color-torrefacto-roast-50: #fff2ef;
  --color-torrefacto-roast-100: #ffe4df;
  --color-torrefacto-roast-200: #efcfc9;
  --color-torrefacto-roast-300: #dbb7b0;
  --color-torrefacto-roast-400: #bd978f;
  --color-torrefacto-roast-500: #a27b74;
  --color-torrefacto-roast-600: #85615a;
  --color-torrefacto-roast-700: #6c4b45;
  --color-torrefacto-roast-800: #563934;
  --color-torrefacto-roast-900: #482822;
  --color-torrefacto-roast-950: #2a1a16;
  --color-olive-ni-oise: #873a2a;
  --color-olive-ni-oise-50: #fff2ef;
  --color-olive-ni-oise-100: #ffe4de;
  --color-olive-ni-oise-200: #ffc9bc;
  --color-olive-ni-oise-300: #f7ab9a;
  --color-olive-ni-oise-400: #db8876;
  --color-olive-ni-oise-500: #be6c5a;
  --color-olive-ni-oise-600: #a05241;
  --color-olive-ni-oise-700: #873a2a;
  --color-olive-ni-oise-800: #6a2c20;
  --color-olive-ni-oise-900: #542015;
  --color-olive-ni-oise-950: #37120a;
  --color-too-hot-to-handle: #bb6654;
  --color-too-hot-to-handle-50: #fff1ed;
  --color-too-hot-to-handle-100: #ffe2db;
  --color-too-hot-to-handle-200: #ffc5b8;
  --color-too-hot-to-handle-300: #f6a695;
  --color-too-hot-to-handle-400: #d98371;
  --color-too-hot-to-handle-500: #bb6654;
  --color-too-hot-to-handle-600: #9d4d3d;
  --color-too-hot-to-handle-700: #82392b;
  --color-too-hot-to-handle-800: #692a1d;
  --color-too-hot-to-handle-900: #541e13;
  --color-too-hot-to-handle-950: #371009;
  --color-pastel-pink: #dea8a1;
  --color-pastel-pink-50: #ffebe8;
  --color-pastel-pink-100: #ffdbd6;
  --color-pastel-pink-200: #efc3bd;
  --color-pastel-pink-300: #dea8a1;
  --color-pastel-pink-400: #be8b85;
  --color-pastel-pink-500: #a4716b;
  --color-pastel-pink-600: #885954;
  --color-pastel-pink-700: #704641;
  --color-pastel-pink-800: #5a3631;
  --color-pastel-pink-900: #482925;
  --color-pastel-pink-950: #2f1816;
  --color-girlie: #ffd6cf;
  --color-girlie-50: #fffaf9;
  --color-girlie-100: #ffefec;
  --color-girlie-200: #ffd6cf;
  --color-girlie-300: #e1c0ba;
  --color-girlie-400: #c29e97;
  --color-girlie-500: #a5807a;
  --color-girlie-600: #88655f;
  --color-girlie-700: #6d4e48;
  --color-girlie-800: #563a36;
  --color-girlie-900: #432c28;
  --color-girlie-950: #2b1a18;
}