Grape to Eosin Pink Color Palette

About this palette

Grape to Eosin Pink is a 6-color warm palette: #673557 (Grape), #600E23 (Merguez), #F5A39C (Young Crab), #B37046 (Dune Spice), #AB4D33 (Hot Sauce), #F568C9 (Eosin Pink). It mixes red, brown, pink, orange tones and feels warm overall. The strongest text pairing is #600E23 on #F5A39C with a contrast ratio of 6.69:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape	rgb(103, 53, 87)	hsl(319, 32%, 31%)
Merguez	rgb(96, 14, 35)	hsl(345, 75%, 22%)
Young Crab	rgb(245, 163, 156)	hsl(5, 82%, 79%)
Dune Spice	rgb(179, 112, 70)	hsl(23, 44%, 49%)
Hot Sauce	rgb(171, 77, 51)	hsl(13, 54%, 44%)
Eosin Pink	rgb(245, 104, 201)	hsl(319, 88%, 68%)

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.

Aa6.69:1 Good#600E23 on #F5A39C
Aa6.69:1 Good#F5A39C on #600E23
Aa4.86:1 Good#600E23 on #F568C9
Aa4.86:1 Good#F568C9 on #600E23
Aa4.77:1 Good#673557 on #F5A39C
Aa4.77:1 Good#F5A39C on #673557
Aa3.47:1 Poor#673557 on #F568C9
Aa3.47:1 Poor#F568C9 on #673557

Color blindness preview

CSS variables

/* Grape to Eosin Pink — https://swatchly.xyz/palette/673557-600e23-f5a39c-b37046-ab4d33-f568c9 */
:root {
  --grape: #673557;
  --merguez: #600e23;
  --young-crab: #f5a39c;
  --dune-spice: #b37046;
  --hot-sauce: #ab4d33;
  --eosin-pink: #f568c9;
}

Tailwind CSS v4

/* Grape to Eosin Pink — https://swatchly.xyz/palette/673557-600e23-f5a39c-b37046-ab4d33-f568c9 */
@theme {
  --color-grape: #673557;
  --color-grape-50: #fff0f9;
  --color-grape-100: #ffe1f4;
  --color-grape-200: #f5c8e4;
  --color-grape-300: #e3b0d1;
  --color-grape-400: #c790b4;
  --color-grape-500: #ad759a;
  --color-grape-600: #925d80;
  --color-grape-700: #794869;
  --color-grape-800: #673557;
  --color-grape-900: #4f2a43;
  --color-grape-950: #34182b;
  --color-merguez: #600e23;
  --color-merguez-50: #fff1f2;
  --color-merguez-100: #ffe3e5;
  --color-merguez-200: #ffc7cc;
  --color-merguez-300: #f9a7b0;
  --color-merguez-400: #dd848f;
  --color-merguez-500: #c06873;
  --color-merguez-600: #a24e5a;
  --color-merguez-700: #863945;
  --color-merguez-800: #6c2935;
  --color-merguez-900: #600e23;
  --color-merguez-950: #390f17;
  --color-young-crab: #f5a39c;
  --color-young-crab-50: #ffeeec;
  --color-young-crab-100: #ffdfdc;
  --color-young-crab-200: #ffc2bc;
  --color-young-crab-300: #f5a39c;
  --color-young-crab-400: #d2867f;
  --color-young-crab-500: #b76b65;
  --color-young-crab-600: #9a524d;
  --color-young-crab-700: #7f3e3a;
  --color-young-crab-800: #672e2b;
  --color-young-crab-900: #52221f;
  --color-young-crab-950: #361311;
  --color-dune-spice: #b37046;
  --color-dune-spice-50: #fff1ea;
  --color-dune-spice-100: #ffe4d4;
  --color-dune-spice-200: #ffc8a8;
  --color-dune-spice-300: #edaf8a;
  --color-dune-spice-400: #d08d64;
  --color-dune-spice-500: #b37046;
  --color-dune-spice-600: #96572e;
  --color-dune-spice-700: #7b421b;
  --color-dune-spice-800: #63320e;
  --color-dune-spice-900: #4f2506;
  --color-dune-spice-950: #341502;
  --color-hot-sauce: #ab4d33;
  --color-hot-sauce-50: #fff2ee;
  --color-hot-sauce-100: #ffe5de;
  --color-hot-sauce-200: #ffcabb;
  --color-hot-sauce-300: #ffa991;
  --color-hot-sauce-400: #e5856a;
  --color-hot-sauce-500: #c9684d;
  --color-hot-sauce-600: #ab4d33;
  --color-hot-sauce-700: #8d3821;
  --color-hot-sauce-800: #722813;
  --color-hot-sauce-900: #5b1c09;
  --color-hot-sauce-950: #3c0e03;
  --color-eosin-pink: #f568c9;
  --color-eosin-pink-50: #fff2fa;
  --color-eosin-pink-100: #ffe4f4;
  --color-eosin-pink-200: #ffc6e9;
  --color-eosin-pink-300: #ffa0dd;
  --color-eosin-pink-400: #f568c9;
  --color-eosin-pink-500: #d44aab;
  --color-eosin-pink-600: #b42a8f;
  --color-eosin-pink-700: #950e74;
  --color-eosin-pink-800: #77005c;
  --color-eosin-pink-900: #5d0047;
  --color-eosin-pink-950: #3c002d;
}