Rampant Rhubarb to Lucky You color palette

About this palette

Rampant Rhubarb to Lucky You is a 4-color warm, vintage, monochromatic, gradient palette: #583335 (Rampant Rhubarb), #955F5E (Chutney), #E2969C (She Loves Pink), #FCD9DC (Lucky You). It mixes brown, red, pink tones and feels warm overall. The strongest text pairing is #583335 on #FCD9DC with a contrast ratio of 8.30:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Rampant Rhubarbrgb(88, 51, 53)hsl(357, 27%, 27%)
Chutneyrgb(149, 95, 94)hsl(1, 23%, 48%)
She Loves Pinkrgb(226, 150, 156)hsl(355, 57%, 74%)
Lucky Yourgb(252, 217, 220)hsl(355, 85%, 92%)

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.30:1 Very good#583335 on #FCD9DC
  • Aa8.30:1 Very good#FCD9DC on #583335
  • Aa4.68:1 Good#583335 on #E2969C
  • Aa4.68:1 Good#E2969C on #583335
  • Aa3.95:1 Poor#955F5E on #FCD9DC
  • Aa3.95:1 Poor#FCD9DC on #955F5E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Rampant Rhubarb to Lucky You — https://swatchly.xyz/palette/583335-955f5e-e2969c-fcd9dc */
:root {
  --rampant-rhubarb: #583335;
  --chutney: #955f5e;
  --she-loves-pink: #e2969c;
  --lucky-you: #fcd9dc;
}

Tailwind CSS v4

/* Rampant Rhubarb to Lucky You — https://swatchly.xyz/palette/583335-955f5e-e2969c-fcd9dc */
@theme {
  --color-rampant-rhubarb: #583335;
  --color-rampant-rhubarb-50: #fff1f2;
  --color-rampant-rhubarb-100: #ffe4e4;
  --color-rampant-rhubarb-200: #f1cece;
  --color-rampant-rhubarb-300: #ddb5b6;
  --color-rampant-rhubarb-400: #be9495;
  --color-rampant-rhubarb-500: #a27879;
  --color-rampant-rhubarb-600: #855d5f;
  --color-rampant-rhubarb-700: #6b4749;
  --color-rampant-rhubarb-800: #583335;
  --color-rampant-rhubarb-900: #422829;
  --color-rampant-rhubarb-950: #2a1718;
  --color-chutney: #955f5e;
  --color-chutney-50: #fff1f1;
  --color-chutney-100: #ffe5e4;
  --color-chutney-200: #faccca;
  --color-chutney-300: #e8b4b3;
  --color-chutney-400: #cc9492;
  --color-chutney-500: #b17977;
  --color-chutney-600: #955f5e;
  --color-chutney-700: #7a4948;
  --color-chutney-800: #613737;
  --color-chutney-900: #4d2929;
  --color-chutney-950: #321818;
  --color-she-loves-pink: #e2969c;
  --color-she-loves-pink-50: #fff7f8;
  --color-she-loves-pink-100: #ffedee;
  --color-she-loves-pink-200: #ffd4d6;
  --color-she-loves-pink-300: #f8b9bd;
  --color-she-loves-pink-400: #e2969c;
  --color-she-loves-pink-500: #c1797f;
  --color-she-loves-pink-600: #a25c63;
  --color-she-loves-pink-700: #84454c;
  --color-she-loves-pink-800: #6a3239;
  --color-she-loves-pink-900: #522429;
  --color-she-loves-pink-950: #341317;
  --color-lucky-you: #fcd9dc;
  --color-lucky-you-50: #fee8ea;
  --color-lucky-you-100: #fcd9dc;
  --color-lucky-you-200: #e4c9cb;
  --color-lucky-you-300: #d1b3b6;
  --color-lucky-you-400: #b49597;
  --color-lucky-you-500: #9a7a7d;
  --color-lucky-you-600: #7f6265;
  --color-lucky-you-700: #684d50;
  --color-lucky-you-800: #523b3e;
  --color-lucky-you-900: #402d2f;
  --color-lucky-you-950: #291b1c;
}

Similar palettes