Chocolate Rush to Girlie color palette

491F14Chocolate Rush 7F3F24Stone Age Queen B37D66Silken Chocolate E38665Canyon Sunset FFD2C5Girlie

About this palette

Chocolate Rush to Girlie is a 5-color warm, earthy, vintage, monochromatic, gradient palette: #491F14 (Chocolate Rush), #7F3F24 (Stone Age Queen), #B37D66 (Silken Chocolate), #E38665 (Canyon Sunset), #FFD2C5 (Girlie). It mixes brown, orange, pink tones and feels warm overall. The strongest text pairing is #491F14 on #FFD2C5 with a contrast ratio of 10.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Rush	rgb(73, 31, 20)	hsl(12, 57%, 18%)
Stone Age Queen	rgb(127, 63, 36)	hsl(18, 56%, 32%)
Silken Chocolate	rgb(179, 125, 102)	hsl(18, 34%, 55%)
Canyon Sunset	rgb(227, 134, 101)	hsl(16, 69%, 64%)
Girlie	rgb(255, 210, 197)	hsl(13, 100%, 89%)

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.

Aa10.26:1 Very good#491F14 on #FFD2C5
Aa10.26:1 Very good#FFD2C5 on #491F14
Aa5.79:1 Good#7F3F24 on #FFD2C5
Aa5.79:1 Good#FFD2C5 on #7F3F24
Aa5.28:1 Good#491F14 on #E38665
Aa5.28:1 Good#E38665 on #491F14
Aa4.06:1 Poor#491F14 on #B37D66
Aa4.06:1 Poor#B37D66 on #491F14

Color blindness preview

CSS variables

/* Chocolate Rush to Girlie — https://swatchly.xyz/palette/491f14-7f3f24-b37d66-e38665-ffd2c5 */
:root {
  --chocolate-rush: #491f14;
  --stone-age-queen: #7f3f24;
  --silken-chocolate: #b37d66;
  --canyon-sunset: #e38665;
  --girlie: #ffd2c5;
}

Tailwind CSS v4

/* Chocolate Rush to Girlie — https://swatchly.xyz/palette/491f14-7f3f24-b37d66-e38665-ffd2c5 */
@theme {
  --color-chocolate-rush: #491f14;
  --color-chocolate-rush-50: #fff2ee;
  --color-chocolate-rush-100: #ffe5dd;
  --color-chocolate-rush-200: #f6cdc1;
  --color-chocolate-rush-300: #e3b4a8;
  --color-chocolate-rush-400: #c59285;
  --color-chocolate-rush-500: #a87668;
  --color-chocolate-rush-600: #8a5b4e;
  --color-chocolate-rush-700: #6f453a;
  --color-chocolate-rush-800: #563329;
  --color-chocolate-rush-900: #491f14;
  --color-chocolate-rush-950: #29150f;
  --color-stone-age-queen: #7f3f24;
  --color-stone-age-queen-50: #fff2ed;
  --color-stone-age-queen-100: #ffe5db;
  --color-stone-age-queen-200: #ffc9b4;
  --color-stone-age-queen-300: #efaf96;
  --color-stone-age-queen-400: #d28d72;
  --color-stone-age-queen-500: #b67155;
  --color-stone-age-queen-600: #98573c;
  --color-stone-age-queen-700: #7f3f24;
  --color-stone-age-queen-800: #64311b;
  --color-stone-age-queen-900: #4f2411;
  --color-stone-age-queen-950: #331407;
  --color-silken-chocolate: #b37d66;
  --color-silken-chocolate-50: #fff3ef;
  --color-silken-chocolate-100: #ffe8de;
  --color-silken-chocolate-200: #fbd0be;
  --color-silken-chocolate-300: #e9b8a4;
  --color-silken-chocolate-400: #cd9882;
  --color-silken-chocolate-500: #b37d66;
  --color-silken-chocolate-600: #95624c;
  --color-silken-chocolate-700: #7a4b37;
  --color-silken-chocolate-800: #613927;
  --color-silken-chocolate-900: #4c2a1b;
  --color-silken-chocolate-950: #31190e;
  --color-canyon-sunset: #e38665;
  --color-canyon-sunset-50: #fff2ee;
  --color-canyon-sunset-100: #ffe5dc;
  --color-canyon-sunset-200: #ffcab8;
  --color-canyon-sunset-300: #fcaa8d;
  --color-canyon-sunset-400: #e38665;
  --color-canyon-sunset-500: #c46a4a;
  --color-canyon-sunset-600: #a55031;
  --color-canyon-sunset-700: #893b1d;
  --color-canyon-sunset-800: #6e2a0f;
  --color-canyon-sunset-900: #581e06;
  --color-canyon-sunset-950: #3a1002;
  --color-girlie: #ffd2c5;
  --color-girlie-50: #fff7f5;
  --color-girlie-100: #ffece6;
  --color-girlie-200: #ffd2c5;
  --color-girlie-300: #e1bcb2;
  --color-girlie-400: #c39b8f;
  --color-girlie-500: #a77e72;
  --color-girlie-600: #896358;
  --color-girlie-700: #6f4c42;
  --color-girlie-800: #583a31;
  --color-girlie-900: #452c24;
  --color-girlie-950: #2c1a15;
}