Snow White to Sanguine color palette

E8FFF4Snow White 85D299Enchanted Emerald 009EC4Blue Ocean 8F4F81Grape Candy 691903Sanguine

About this palette

Snow White to Sanguine is a 5-color vintage palette: #E8FFF4 (Snow White), #85D299 (Enchanted Emerald), #009EC4 (Blue Ocean), #8F4F81 (Grape Candy), #691903 (Sanguine). It mixes white, green, blue, pink, brown tones and feels balanced overall. The strongest text pairing is #E8FFF4 on #691903 with a contrast ratio of 11.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Snow White	rgb(232, 255, 244)	hsl(151, 100%, 95%)
Enchanted Emerald	rgb(133, 210, 153)	hsl(136, 46%, 67%)
Blue Ocean	rgb(0, 158, 196)	hsl(192, 100%, 38%)
Grape Candy	rgb(143, 79, 129)	hsl(313, 29%, 44%)
Sanguine	rgb(105, 25, 3)	hsl(13, 94%, 21%)

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.

Aa11.51:1 Very good#E8FFF4 on #691903
Aa11.51:1 Very good#691903 on #E8FFF4
Aa6.71:1 Good#85D299 on #691903
Aa6.71:1 Good#691903 on #85D299
Aa5.56:1 Good#E8FFF4 on #8F4F81
Aa5.56:1 Good#8F4F81 on #E8FFF4
Aa3.84:1 Poor#009EC4 on #691903
Aa3.84:1 Poor#691903 on #009EC4

Color blindness preview

CSS variables

/* Snow White to Sanguine — https://swatchly.xyz/palette/e8fff4-85d299-009ec4-8f4f81-691903 */
:root {
  --snow-white: #e8fff4;
  --enchanted-emerald: #85d299;
  --blue-ocean: #009ec4;
  --grape-candy: #8f4f81;
  --sanguine: #691903;
}

Tailwind CSS v4

/* Snow White to Sanguine — https://swatchly.xyz/palette/e8fff4-85d299-009ec4-8f4f81-691903 */
@theme {
  --color-snow-white: #e8fff4;
  --color-snow-white-50: #e8fff4;
  --color-snow-white-100: #e4f2eb;
  --color-snow-white-200: #ceded6;
  --color-snow-white-300: #b5c8bf;
  --color-snow-white-400: #94a89e;
  --color-snow-white-500: #788c83;
  --color-snow-white-600: #5d7168;
  --color-snow-white-700: #485a52;
  --color-snow-white-800: #37473f;
  --color-snow-white-900: #293630;
  --color-snow-white-950: #18221d;
  --color-enchanted-emerald: #85d299;
  --color-enchanted-emerald-50: #d8ffe0;
  --color-enchanted-emerald-100: #c7f7d1;
  --color-enchanted-emerald-200: #abe5b9;
  --color-enchanted-emerald-300: #85d299;
  --color-enchanted-emerald-400: #69b27c;
  --color-enchanted-emerald-500: #4b9761;
  --color-enchanted-emerald-600: #307c49;
  --color-enchanted-emerald-700: #1c6436;
  --color-enchanted-emerald-800: #0c4f27;
  --color-enchanted-emerald-900: #033e1c;
  --color-enchanted-emerald-950: #00270f;
  --color-blue-ocean: #009ec4;
  --color-blue-ocean-50: #ebfaff;
  --color-blue-ocean-100: #d7f4ff;
  --color-blue-ocean-200: #a8e7ff;
  --color-blue-ocean-300: #78d6f6;
  --color-blue-ocean-400: #46b8dd;
  --color-blue-ocean-500: #009ec4;
  --color-blue-ocean-600: #007f9e;
  --color-blue-ocean-700: #00657e;
  --color-blue-ocean-800: #004e63;
  --color-blue-ocean-900: #003c4c;
  --color-blue-ocean-950: #002530;
  --color-grape-candy: #8f4f81;
  --color-grape-candy-50: #fff0fb;
  --color-grape-candy-100: #ffe0f6;
  --color-grape-candy-200: #f9c3eb;
  --color-grape-candy-300: #e6a9d7;
  --color-grape-candy-400: #c886b9;
  --color-grape-candy-500: #ac6a9d;
  --color-grape-candy-600: #8f4f81;
  --color-grape-candy-700: #743c68;
  --color-grape-candy-800: #5d2c53;
  --color-grape-candy-900: #4a2041;
  --color-grape-candy-950: #301229;
  --color-sanguine: #691903;
  --color-sanguine-50: #fff2ee;
  --color-sanguine-100: #ffe4dd;
  --color-sanguine-200: #ffc9bb;
  --color-sanguine-300: #faaa95;
  --color-sanguine-400: #df8972;
  --color-sanguine-500: #c56d57;
  --color-sanguine-600: #a8543f;
  --color-sanguine-700: #8d402c;
  --color-sanguine-800: #75301f;
  --color-sanguine-900: #691903;
  --color-sanguine-950: #411409;
}