Lonestar to Beefy Pink Color Palette

About this palette

Lonestar to Beefy Pink is a 5-color cool palette: #4F262F (Lonestar), #005C44 (Evergreen), #31855C (Primal Green), #B47CDE (Lavender), #E5BCF2 (Beefy Pink). It mixes red, turquoise, green, purple tones and feels cool overall. The strongest text pairing is #4F262F on #E5BCF2 with a contrast ratio of 7.76:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lonestar	rgb(79, 38, 47)	hsl(347, 35%, 23%)
Evergreen	rgb(0, 92, 68)	hsl(164, 100%, 18%)
Primal Green	rgb(49, 133, 92)	hsl(151, 46%, 36%)
Lavender	rgb(180, 124, 222)	hsl(274, 60%, 68%)
Beefy Pink	rgb(229, 188, 242)	hsl(286, 67%, 84%)

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.

Aa7.76:1 Very good#4F262F on #E5BCF2
Aa7.76:1 Very good#E5BCF2 on #4F262F
Aa4.90:1 Good#005C44 on #E5BCF2
Aa4.90:1 Good#E5BCF2 on #005C44
Aa4.17:1 Poor#4F262F on #B47CDE
Aa4.17:1 Poor#B47CDE on #4F262F

Color blindness preview

CSS variables

/* Lonestar to Beefy Pink — https://swatchly.xyz/palette/4f262f-005c44-31855c-b47cde-e5bcf2 */
:root {
  --lonestar: #4f262f;
  --evergreen: #005c44;
  --primal-green: #31855c;
  --lavender: #b47cde;
  --beefy-pink: #e5bcf2;
}

Tailwind CSS v4

/* Lonestar to Beefy Pink — https://swatchly.xyz/palette/4f262f-005c44-31855c-b47cde-e5bcf2 */
@theme {
  --color-lonestar: #4f262f;
  --color-lonestar-50: #fff1f3;
  --color-lonestar-100: #ffe3e7;
  --color-lonestar-200: #f4ccd2;
  --color-lonestar-300: #e0b3bb;
  --color-lonestar-400: #c3939b;
  --color-lonestar-500: #a87780;
  --color-lonestar-600: #8c5e67;
  --color-lonestar-700: #734951;
  --color-lonestar-800: #5c383f;
  --color-lonestar-900: #4f262f;
  --color-lonestar-950: #2f191e;
  --color-evergreen: #005c44;
  --color-evergreen-50: #dbffef;
  --color-evergreen-100: #caf7e4;
  --color-evergreen-200: #ade4ce;
  --color-evergreen-300: #8eceb4;
  --color-evergreen-400: #67ae93;
  --color-evergreen-500: #479176;
  --color-evergreen-600: #2b745b;
  --color-evergreen-700: #005c44;
  --color-evergreen-800: #074735;
  --color-evergreen-900: #013728;
  --color-evergreen-950: #002318;
  --color-primal-green: #31855c;
  --color-primal-green-50: #ddffea;
  --color-primal-green-100: #cafadd;
  --color-primal-green-200: #b0eac8;
  --color-primal-green-300: #93d6b0;
  --color-primal-green-400: #6dba90;
  --color-primal-green-500: #4e9f75;
  --color-primal-green-600: #31855c;
  --color-primal-green-700: #196b46;
  --color-primal-green-800: #045534;
  --color-primal-green-900: #004127;
  --color-primal-green-950: #002917;
  --color-lavender: #b47cde;
  --color-lavender-50: #f7eeff;
  --color-lavender-100: #f0deff;
  --color-lavender-200: #e3c1ff;
  --color-lavender-300: #d2a1fa;
  --color-lavender-400: #b47cde;
  --color-lavender-500: #9962c2;
  --color-lavender-600: #7f4aa4;
  --color-lavender-700: #673689;
  --color-lavender-800: #532770;
  --color-lavender-900: #421c5b;
  --color-lavender-950: #2b0f3d;
  --color-beefy-pink: #e5bcf2;
  --color-beefy-pink-50: #f9e7ff;
  --color-beefy-pink-100: #f3d7fc;
  --color-beefy-pink-200: #e5bcf2;
  --color-beefy-pink-300: #cdaad9;
  --color-beefy-pink-400: #b18bbd;
  --color-beefy-pink-500: #9771a3;
  --color-beefy-pink-600: #7d5988;
  --color-beefy-pink-700: #664570;
  --color-beefy-pink-800: #52355b;
  --color-beefy-pink-900: #402848;
  --color-beefy-pink-950: #29172e;
}