Rose Elegance to British Racing Green color palette

About this palette

Rose Elegance to British Racing Green is a 5-color vintage palette: #E4A2B9 (Rose Elegance), #B28C8C (Rosy Brown), #817761 (Handmade), #526036 (Cypress), #204900 (British Racing Green). It mixes pink, red, gray, green tones and feels balanced overall. The strongest text pairing is #E4A2B9 on #204900 with a contrast ratio of 5.05:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Rose Elegancergb(228, 162, 185)hsl(339, 55%, 76%)
Rosy Brownrgb(178, 140, 140)hsl(0, 20%, 62%)
Handmadergb(129, 119, 97)hsl(41, 14%, 44%)
Cypressrgb(82, 96, 54)hsl(80, 28%, 29%)
British Racing Greenrgb(32, 73, 0)hsl(94, 100%, 14%)

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.

  • Aa5.05:1 Good#E4A2B9 on #204900
  • Aa5.05:1 Good#204900 on #E4A2B9
  • Aa3.49:1 Poor#B28C8C on #204900
  • Aa3.49:1 Poor#204900 on #B28C8C
  • Aa3.30:1 Poor#E4A2B9 on #526036
  • Aa3.30:1 Poor#526036 on #E4A2B9

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Rose Elegance to British Racing Green — https://swatchly.xyz/palette/e4a2b9-b28c8c-817761-526036-204900 */
:root {
  --rose-elegance: #e4a2b9;
  --rosy-brown: #b28c8c;
  --handmade: #817761;
  --cypress: #526036;
  --british-racing-green: #204900;
}

Tailwind CSS v4

/* Rose Elegance to British Racing Green — https://swatchly.xyz/palette/e4a2b9-b28c8c-817761-526036-204900 */
@theme {
  --color-rose-elegance: #e4a2b9;
  --color-rose-elegance-50: #ffeaf1;
  --color-rose-elegance-100: #ffd9e5;
  --color-rose-elegance-200: #f4bfd1;
  --color-rose-elegance-300: #e4a2b9;
  --color-rose-elegance-400: #c3859b;
  --color-rose-elegance-500: #a96b82;
  --color-rose-elegance-600: #8d5369;
  --color-rose-elegance-700: #744054;
  --color-rose-elegance-800: #5e3042;
  --color-rose-elegance-900: #4b2433;
  --color-rose-elegance-950: #311520;
  --color-rosy-brown: #b28c8c;
  --color-rosy-brown-50: #ffecec;
  --color-rosy-brown-100: #f9dede;
  --color-rosy-brown-200: #e7c7c7;
  --color-rosy-brown-300: #d1aeae;
  --color-rosy-brown-400: #b28c8c;
  --color-rosy-brown-500: #987373;
  --color-rosy-brown-600: #7d5b5b;
  --color-rosy-brown-700: #664748;
  --color-rosy-brown-800: #523738;
  --color-rosy-brown-900: #412a2b;
  --color-rosy-brown-950: #2b1a1a;
  --color-handmade: #817761;
  --color-handmade-50: #fbf5e7;
  --color-handmade-100: #f4edde;
  --color-handmade-200: #e3dbca;
  --color-handmade-300: #d0c7b3;
  --color-handmade-400: #b3a994;
  --color-handmade-500: #9a9079;
  --color-handmade-600: #817761;
  --color-handmade-700: #675e4a;
  --color-handmade-800: #514937;
  --color-handmade-900: #3e3728;
  --color-handmade-950: #272217;
  --color-cypress: #526036;
  --color-cypress-50: #f0fae0;
  --color-cypress-100: #e5f0d3;
  --color-cypress-200: #d1debc;
  --color-cypress-300: #bbc9a2;
  --color-cypress-400: #9cab80;
  --color-cypress-500: #819064;
  --color-cypress-600: #68764c;
  --color-cypress-700: #526036;
  --color-cypress-800: #404b28;
  --color-cypress-900: #303a1c;
  --color-cypress-950: #1d240f;
  --color-british-racing-green: #204900;
  --color-british-racing-green-50: #e4ffd8;
  --color-british-racing-green-100: #d8f6ca;
  --color-british-racing-green-200: #c0e4b0;
  --color-british-racing-green-300: #a5ce92;
  --color-british-racing-green-400: #82ae6d;
  --color-british-racing-green-500: #65924f;
  --color-british-racing-green-600: #4c7535;
  --color-british-racing-green-700: #375d22;
  --color-british-racing-green-800: #204900;
  --color-british-racing-green-900: #1c370b;
  --color-british-racing-green-950: #0f2204;
}

Similar palettes