Lonestar to Ginger Beer Color Palette

About this palette

Lonestar to Ginger Beer is a 4-color warm, vintage palette: #582322 (Lonestar), #81574A (Root Beer), #FFC5C8 (Cotton Candy Comet), #C3843C (Ginger Beer). It mixes brown, red, pink, orange tones and feels warm overall. The strongest text pairing is #582322 on #FFC5C8 with a contrast ratio of 8.38:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lonestar	rgb(88, 35, 34)	hsl(1, 44%, 24%)
Root Beer	rgb(129, 87, 74)	hsl(14, 27%, 40%)
Cotton Candy Comet	rgb(255, 197, 200)	hsl(357, 100%, 89%)
Ginger Beer	rgb(195, 132, 60)	hsl(32, 53%, 50%)

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.

Aa8.38:1 Very good#582322 on #FFC5C8
Aa8.38:1 Very good#FFC5C8 on #582322
Aa4.14:1 Poor#81574A on #FFC5C8
Aa4.14:1 Poor#FFC5C8 on #81574A
Aa3.98:1 Poor#582322 on #C3843C
Aa3.98:1 Poor#C3843C on #582322

Color blindness preview

CSS variables

/* Lonestar to Ginger Beer — https://swatchly.xyz/palette/582322-81574a-ffc5c8-c3843c */
:root {
  --lonestar: #582322;
  --root-beer: #81574a;
  --cotton-candy-comet: #ffc5c8;
  --ginger-beer: #c3843c;
}

Tailwind CSS v4

/* Lonestar to Ginger Beer — https://swatchly.xyz/palette/582322-81574a-ffc5c8-c3843c */
@theme {
  --color-lonestar: #582322;
  --color-lonestar-50: #fff2f0;
  --color-lonestar-100: #ffe4e2;
  --color-lonestar-200: #fcc9c5;
  --color-lonestar-300: #eab0ac;
  --color-lonestar-400: #cd908c;
  --color-lonestar-500: #b27471;
  --color-lonestar-600: #965b58;
  --color-lonestar-700: #7c4644;
  --color-lonestar-800: #653634;
  --color-lonestar-900: #582322;
  --color-lonestar-950: #351817;
  --color-root-beer: #81574a;
  --color-root-beer-50: #fff2ee;
  --color-root-beer-100: #ffe2d9;
  --color-root-beer-200: #f0cbbf;
  --color-root-beer-300: #dbb1a4;
  --color-root-beer-400: #bc8f81;
  --color-root-beer-500: #9e7265;
  --color-root-beer-600: #81574a;
  --color-root-beer-700: #684439;
  --color-root-beer-800: #53342a;
  --color-root-beer-900: #42271f;
  --color-root-beer-950: #2a1711;
  --color-cotton-candy-comet: #ffc5c8;
  --color-cotton-candy-comet-50: #fff0f1;
  --color-cotton-candy-comet-100: #ffe2e3;
  --color-cotton-candy-comet-200: #ffc5c8;
  --color-cotton-candy-comet-300: #e2b1b4;
  --color-cotton-candy-comet-400: #c59194;
  --color-cotton-candy-comet-500: #aa7579;
  --color-cotton-candy-comet-600: #8d5c5f;
  --color-cotton-candy-comet-700: #73474a;
  --color-cotton-candy-comet-800: #5c3639;
  --color-cotton-candy-comet-900: #49282b;
  --color-cotton-candy-comet-950: #2f1719;
  --color-ginger-beer: #c3843c;
  --color-ginger-beer-50: #fff6ed;
  --color-ginger-beer-100: #ffedda;
  --color-ginger-beer-200: #ffd6ae;
  --color-ginger-beer-300: #f4bf87;
  --color-ginger-beer-400: #db9f5f;
  --color-ginger-beer-500: #c3843c;
  --color-ginger-beer-600: #a36718;
  --color-ginger-beer-700: #854f00;
  --color-ginger-beer-800: #683d00;
  --color-ginger-beer-900: #502e00;
  --color-ginger-beer-950: #321b00;
}