Red Cent to Bruised Plum color palette

AD6754Red Cent 6E492CCafe Royale FFE2EAWatermelon Mousse E192A2Foxy Pink 331B19Bruised Plum

About this palette

Red Cent to Bruised Plum is a 5-color warm, vintage palette: #AD6754 (Red Cent), #6E492C (Cafe Royale), #FFE2EA (Watermelon Mousse), #E192A2 (Foxy Pink), #331B19 (Bruised Plum). It mixes red, brown, white, pink tones and feels warm overall. The strongest text pairing is #FFE2EA on #331B19 with a contrast ratio of 13.20:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Red Cent	rgb(173, 103, 84)	hsl(13, 35%, 50%)
Cafe Royale	rgb(110, 73, 44)	hsl(26, 43%, 30%)
Watermelon Mousse	rgb(255, 226, 234)	hsl(343, 100%, 94%)
Foxy Pink	rgb(225, 146, 162)	hsl(348, 57%, 73%)
Bruised Plum	rgb(51, 27, 25)	hsl(5, 34%, 15%)

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.

Aa13.20:1 Super#FFE2EA on #331B19
Aa13.20:1 Super#331B19 on #FFE2EA
Aa6.74:1 Good#E192A2 on #331B19
Aa6.74:1 Good#331B19 on #E192A2
Aa6.53:1 Good#6E492C on #FFE2EA
Aa6.53:1 Good#FFE2EA on #6E492C
Aa3.69:1 Poor#AD6754 on #331B19
Aa3.69:1 Poor#331B19 on #AD6754

Color blindness preview

CSS variables

/* Red Cent to Bruised Plum — https://swatchly.xyz/palette/ad6754-6e492c-ffe2ea-e192a2-331b19 */
:root {
  --red-cent: #ad6754;
  --cafe-royale: #6e492c;
  --watermelon-mousse: #ffe2ea;
  --foxy-pink: #e192a2;
  --bruised-plum: #331b19;
}

Tailwind CSS v4

/* Red Cent to Bruised Plum — https://swatchly.xyz/palette/ad6754-6e492c-ffe2ea-e192a2-331b19 */
@theme {
  --color-red-cent: #ad6754;
  --color-red-cent-50: #ffefeb;
  --color-red-cent-100: #ffe0d7;
  --color-red-cent-200: #fec2b1;
  --color-red-cent-300: #eaa795;
  --color-red-cent-400: #cb8471;
  --color-red-cent-500: #ad6754;
  --color-red-cent-600: #914f3e;
  --color-red-cent-700: #773c2d;
  --color-red-cent-800: #602d20;
  --color-red-cent-900: #4d2216;
  --color-red-cent-950: #33130b;
  --color-cafe-royale: #6e492c;
  --color-cafe-royale-50: #fff2ea;
  --color-cafe-royale-100: #ffe6d4;
  --color-cafe-royale-200: #f1d0b8;
  --color-cafe-royale-300: #ddb79c;
  --color-cafe-royale-400: #bf9779;
  --color-cafe-royale-500: #a37b5c;
  --color-cafe-royale-600: #866043;
  --color-cafe-royale-700: #6e492c;
  --color-cafe-royale-800: #563922;
  --color-cafe-royale-900: #432b17;
  --color-cafe-royale-950: #2b190b;
  --color-watermelon-mousse: #ffe2ea;
  --color-watermelon-mousse-50: #fff0f4;
  --color-watermelon-mousse-100: #ffe2ea;
  --color-watermelon-mousse-200: #e6d1d7;
  --color-watermelon-mousse-300: #d1b9c0;
  --color-watermelon-mousse-400: #b399a1;
  --color-watermelon-mousse-500: #987e85;
  --color-watermelon-mousse-600: #7c646b;
  --color-watermelon-mousse-700: #644e55;
  --color-watermelon-mousse-800: #4f3c42;
  --color-watermelon-mousse-900: #3e2e32;
  --color-watermelon-mousse-950: #271c1f;
  --color-foxy-pink: #e192a2;
  --color-foxy-pink-50: #fff6f8;
  --color-foxy-pink-100: #ffebee;
  --color-foxy-pink-200: #ffd1d9;
  --color-foxy-pink-300: #f8b5c2;
  --color-foxy-pink-400: #e192a2;
  --color-foxy-pink-500: #c17585;
  --color-foxy-pink-600: #a15969;
  --color-foxy-pink-700: #844252;
  --color-foxy-pink-800: #6a303e;
  --color-foxy-pink-900: #52222e;
  --color-foxy-pink-950: #34121b;
  --color-bruised-plum: #331b19;
  --color-bruised-plum-50: #fff2f0;
  --color-bruised-plum-100: #fbe5e3;
  --color-bruised-plum-200: #ead1ce;
  --color-bruised-plum-300: #d6b9b6;
  --color-bruised-plum-400: #b89996;
  --color-bruised-plum-500: #9d7e7b;
  --color-bruised-plum-600: #826562;
  --color-bruised-plum-700: #6a504d;
  --color-bruised-plum-800: #553e3c;
  --color-bruised-plum-900: #44302e;
  --color-bruised-plum-950: #331b19;
}