Pink Champagne to Sacramental Red Color Palette

About this palette

Pink Champagne to Sacramental Red is a 5-color cool, vintage palette: #E0DFFF (Pink Champagne), #29BCC3 (Glassmith), #798200 (Olive), #005256 (Cape Verde), #590D04 (Sacramental Red). It mixes purple, turquoise, green, brown tones and feels cool overall. The strongest text pairing is #E0DFFF on #590D04 with a contrast ratio of 10.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Champagne	rgb(224, 223, 255)	hsl(242, 100%, 94%)
Glassmith	rgb(41, 188, 195)	hsl(183, 65%, 46%)
Olive	rgb(121, 130, 0)	hsl(64, 100%, 25%)
Cape Verde	rgb(0, 82, 86)	hsl(183, 100%, 17%)
Sacramental Red	rgb(89, 13, 4)	hsl(6, 91%, 18%)

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.

Aa10.89:1 Very good#E0DFFF on #590D04
Aa10.89:1 Very good#590D04 on #E0DFFF
Aa6.91:1 Good#E0DFFF on #005256
Aa6.91:1 Good#005256 on #E0DFFF
Aa6.12:1 Good#29BCC3 on #590D04
Aa6.12:1 Good#590D04 on #29BCC3
Aa3.88:1 Poor#29BCC3 on #005256
Aa3.88:1 Poor#005256 on #29BCC3

Color blindness preview

CSS variables

/* Pink Champagne to Sacramental Red — https://swatchly.xyz/palette/e0dfff-29bcc3-798200-005256-590d04 */
:root {
  --pink-champagne: #e0dfff;
  --glassmith: #29bcc3;
  --olive: #798200;
  --cape-verde: #005256;
  --sacramental-red: #590d04;
}

Tailwind CSS v4

/* Pink Champagne to Sacramental Red — https://swatchly.xyz/palette/e0dfff-29bcc3-798200-005256-590d04 */
@theme {
  --color-pink-champagne: #e0dfff;
  --color-pink-champagne-50: #ececff;
  --color-pink-champagne-100: #e0dfff;
  --color-pink-champagne-200: #cecee6;
  --color-pink-champagne-300: #b9b8d3;
  --color-pink-champagne-400: #9b9ab7;
  --color-pink-champagne-500: #81809d;
  --color-pink-champagne-600: #686782;
  --color-pink-champagne-700: #53526b;
  --color-pink-champagne-800: #414055;
  --color-pink-champagne-900: #313043;
  --color-pink-champagne-950: #1e1e2b;
  --color-glassmith: #29bcc3;
  --color-glassmith-50: #e0feff;
  --color-glassmith-100: #bbfcff;
  --color-glassmith-200: #96ecf1;
  --color-glassmith-300: #71d8de;
  --color-glassmith-400: #29bcc3;
  --color-glassmith-500: #009da4;
  --color-glassmith-600: #007f84;
  --color-glassmith-700: #006469;
  --color-glassmith-800: #004e52;
  --color-glassmith-900: #003c3f;
  --color-glassmith-950: #002527;
  --color-olive: #798200;
  --color-olive-50: #f1f9c1;
  --color-olive-100: #e5eead;
  --color-olive-200: #cfd98a;
  --color-olive-300: #b6c166;
  --color-olive-400: #96a036;
  --color-olive-500: #798200;
  --color-olive-600: #616900;
  --color-olive-700: #4d5300;
  --color-olive-800: #3c4100;
  --color-olive-900: #2f3300;
  --color-olive-950: #1d2000;
  --color-cape-verde: #005256;
  --color-cape-verde-50: #dafdff;
  --color-cape-verde-100: #ccf4f6;
  --color-cape-verde-200: #b1e2e5;
  --color-cape-verde-300: #96ced1;
  --color-cape-verde-400: #71b0b4;
  --color-cape-verde-500: #549699;
  --color-cape-verde-600: #397b7f;
  --color-cape-verde-700: #256468;
  --color-cape-verde-800: #005256;
  --color-cape-verde-900: #0a3f42;
  --color-cape-verde-950: #03282a;
  --color-sacramental-red: #590d04;
  --color-sacramental-red-50: #fff2ef;
  --color-sacramental-red-100: #ffe4df;
  --color-sacramental-red-200: #ffc9be;
  --color-sacramental-red-300: #f7ab9c;
  --color-sacramental-red-400: #da8778;
  --color-sacramental-red-500: #bd6a5b;
  --color-sacramental-red-600: #9d4f42;
  --color-sacramental-red-700: #803a2e;
  --color-sacramental-red-800: #65291f;
  --color-sacramental-red-900: #590d04;
  --color-sacramental-red-950: #320f09;
}