Start generating

Rampant Rhubarb to Bloodthirsty Beige color palette

643330Rampant Rhubarb834856Red Elegance9E5D73CinnapinkB08A6DMacaroonCFAA8CSemolinaF8D6CCBloodthirsty Beige
Open in generator Export PNG, PDF, ASE…

About this palette

Rampant Rhubarb to Bloodthirsty Beige is a 6-color warm, vintage, gradient palette: #643330 (Rampant Rhubarb), #834856 (Red Elegance), #9E5D73 (Cinnapink), #B08A6D (Macaroon), #CFAA8C (Semolina), #F8D6CC (Bloodthirsty Beige). It mixes brown, red, orange, pink tones and feels warm overall. The strongest text pairing is #643330 on #F8D6CC with a contrast ratio of 7.52:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Rampant Rhubarbrgb(100, 51, 48)hsl(3, 35%, 29%)
Red Elegancergb(131, 72, 86)hsl(346, 29%, 40%)
Cinnapinkrgb(158, 93, 115)hsl(340, 26%, 49%)
Macaroonrgb(176, 138, 109)hsl(26, 30%, 56%)
Semolinargb(207, 170, 140)hsl(27, 41%, 68%)
Bloodthirsty Beigergb(248, 214, 204)hsl(14, 76%, 89%)

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.52:1 Very good#643330 on #F8D6CC
  • Aa7.52:1 Very good#F8D6CC on #643330
  • Aa5.12:1 Good#834856 on #F8D6CC
  • Aa5.12:1 Good#F8D6CC on #834856
  • Aa4.75:1 Good#643330 on #CFAA8C
  • Aa4.75:1 Good#CFAA8C on #643330
  • Aa3.63:1 Poor#9E5D73 on #F8D6CC
  • Aa3.63:1 Poor#F8D6CC on #9E5D73

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Rampant Rhubarb to Bloodthirsty Beige — https://swatchly.xyz/palette/643330-834856-9e5d73-b08a6d-cfaa8c-f8d6cc */
:root {
  --rampant-rhubarb: #643330;
  --red-elegance: #834856;
  --cinnapink: #9e5d73;
  --macaroon: #b08a6d;
  --semolina: #cfaa8c;
  --bloodthirsty-beige: #f8d6cc;
}

Tailwind CSS v4

/* Rampant Rhubarb to Bloodthirsty Beige — https://swatchly.xyz/palette/643330-834856-9e5d73-b08a6d-cfaa8c-f8d6cc */
@theme {
  --color-rampant-rhubarb: #643330;
  --color-rampant-rhubarb-50: #fff2f0;
  --color-rampant-rhubarb-100: #ffe4e1;
  --color-rampant-rhubarb-200: #f9cbc6;
  --color-rampant-rhubarb-300: #e6b3ae;
  --color-rampant-rhubarb-400: #c9928d;
  --color-rampant-rhubarb-500: #ae7671;
  --color-rampant-rhubarb-600: #915c58;
  --color-rampant-rhubarb-700: #774744;
  --color-rampant-rhubarb-800: #643330;
  --color-rampant-rhubarb-900: #4b2826;
  --color-rampant-rhubarb-950: #311816;
  --color-red-elegance: #834856;
  --color-red-elegance-50: #fff1f3;
  --color-red-elegance-100: #ffe3e8;
  --color-red-elegance-200: #fdc9d3;
  --color-red-elegance-300: #ecb2bd;
  --color-red-elegance-400: #d0919f;
  --color-red-elegance-500: #b67784;
  --color-red-elegance-600: #9a5e6b;
  --color-red-elegance-700: #834856;
  --color-red-elegance-800: #683743;
  --color-red-elegance-900: #522833;
  --color-red-elegance-950: #36171f;
  --color-cinnapink: #9e5d73;
  --color-cinnapink-50: #fff1f5;
  --color-cinnapink-100: #ffe5ec;
  --color-cinnapink-200: #ffcada;
  --color-cinnapink-300: #eeb2c5;
  --color-cinnapink-400: #d391a6;
  --color-cinnapink-500: #b9768c;
  --color-cinnapink-600: #9e5d73;
  --color-cinnapink-700: #81465b;
  --color-cinnapink-800: #683447;
  --color-cinnapink-900: #522636;
  --color-cinnapink-950: #351621;
  --color-macaroon: #b08a6d;
  --color-macaroon-50: #fff5ee;
  --color-macaroon-100: #ffecde;
  --color-macaroon-200: #f5d8c3;
  --color-macaroon-300: #e4c3aa;
  --color-macaroon-400: #c9a489;
  --color-macaroon-500: #b08a6d;
  --color-macaroon-600: #926d51;
  --color-macaroon-700: #76553b;
  --color-macaroon-800: #5e412a;
  --color-macaroon-900: #49301d;
  --color-macaroon-950: #2e1c0e;
  --color-semolina: #cfaa8c;
  --color-semolina-50: #ffe9d7;
  --color-semolina-100: #f6dbc6;
  --color-semolina-200: #e3c4ac;
  --color-semolina-300: #cfaa8c;
  --color-semolina-400: #b18e71;
  --color-semolina-500: #987558;
  --color-semolina-600: #7e5e43;
  --color-semolina-700: #674a31;
  --color-semolina-800: #543a24;
  --color-semolina-900: #432d1b;
  --color-semolina-950: #2b1b0e;
  --color-bloodthirsty-beige: #f8d6cc;
  --color-bloodthirsty-beige-50: #fff8f6;
  --color-bloodthirsty-beige-100: #ffede7;
  --color-bloodthirsty-beige-200: #f8d6cc;
  --color-bloodthirsty-beige-300: #dbc0b8;
  --color-bloodthirsty-beige-400: #bd9e95;
  --color-bloodthirsty-beige-500: #a08178;
  --color-bloodthirsty-beige-600: #83665e;
  --color-bloodthirsty-beige-700: #694f47;
  --color-bloodthirsty-beige-800: #533c36;
  --color-bloodthirsty-beige-900: #412e28;
  --color-bloodthirsty-beige-950: #291b17;
}

Similar palettes