Lonestar to In the Pink Color Palette

About this palette

Lonestar to In the Pink is a 4-color warm, vintage, monochromatic, gradient palette: #53242F (Lonestar), #9B5063 (Cherry Berry), #BA8E95 (Rosy Brown), #F8C3CE (In the Pink). It mixes red, pink tones and feels warm overall. The strongest text pairing is #53242F on #F8C3CE with a contrast ratio of 8.24:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lonestar	rgb(83, 36, 47)	hsl(346, 39%, 23%)
Cherry Berry	rgb(155, 80, 99)	hsl(345, 32%, 46%)
Rosy Brown	rgb(186, 142, 149)	hsl(350, 24%, 64%)
In the Pink	rgb(248, 195, 206)	hsl(348, 79%, 87%)

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.24:1 Very good#53242F on #F8C3CE
Aa8.24:1 Very good#F8C3CE on #53242F
Aa4.45:1 Poor#53242F on #BA8E95
Aa4.45:1 Poor#BA8E95 on #53242F
Aa3.68:1 Poor#9B5063 on #F8C3CE
Aa3.68:1 Poor#F8C3CE on #9B5063

Color blindness preview

CSS variables

/* Lonestar to In the Pink — https://swatchly.xyz/palette/53242f-9b5063-ba8e95-f8c3ce */
:root {
  --lonestar: #53242f;
  --cherry-berry: #9b5063;
  --rosy-brown: #ba8e95;
  --in-the-pink: #f8c3ce;
}

Tailwind CSS v4

/* Lonestar to In the Pink — https://swatchly.xyz/palette/53242f-9b5063-ba8e95-f8c3ce */
@theme {
  --color-lonestar: #53242f;
  --color-lonestar-50: #fff1f3;
  --color-lonestar-100: #ffe3e7;
  --color-lonestar-200: #f7cad1;
  --color-lonestar-300: #e4b1ba;
  --color-lonestar-400: #c8919b;
  --color-lonestar-500: #ad7580;
  --color-lonestar-600: #905c66;
  --color-lonestar-700: #774751;
  --color-lonestar-800: #60363f;
  --color-lonestar-900: #53242f;
  --color-lonestar-950: #32181e;
  --color-cherry-berry: #9b5063;
  --color-cherry-berry-50: #fff1f4;
  --color-cherry-berry-100: #ffe3e8;
  --color-cherry-berry-200: #ffc5d1;
  --color-cherry-berry-300: #f1a9b9;
  --color-cherry-berry-400: #d58799;
  --color-cherry-berry-500: #b86a7d;
  --color-cherry-berry-600: #9b5063;
  --color-cherry-berry-700: #7f3c4e;
  --color-cherry-berry-800: #662c3c;
  --color-cherry-berry-900: #51202d;
  --color-cherry-berry-950: #35111b;
  --color-rosy-brown: #ba8e95;
  --color-rosy-brown-50: #ffeef0;
  --color-rosy-brown-100: #fedfe3;
  --color-rosy-brown-200: #edc9ce;
  --color-rosy-brown-300: #d8b0b6;
  --color-rosy-brown-400: #ba8e95;
  --color-rosy-brown-500: #9e747b;
  --color-rosy-brown-600: #835b62;
  --color-rosy-brown-700: #6b474d;
  --color-rosy-brown-800: #56373c;
  --color-rosy-brown-900: #44292e;
  --color-rosy-brown-950: #2c191c;
  --color-in-the-pink: #f8c3ce;
  --color-in-the-pink-50: #ffedf0;
  --color-in-the-pink-100: #ffdee4;
  --color-in-the-pink-200: #f8c3ce;
  --color-in-the-pink-300: #ddb0b9;
  --color-in-the-pink-400: #c0909a;
  --color-in-the-pink-500: #a5757f;
  --color-in-the-pink-600: #895c66;
  --color-in-the-pink-700: #704751;
  --color-in-the-pink-800: #5a363f;
  --color-in-the-pink-900: #472930;
  --color-in-the-pink-950: #2d181d;
}