Grape Fizz to Glaucous Green Color Palette

About this palette

Grape Fizz to Glaucous Green is a 5-color cool, vintage palette: #68465D (Grape Fizz), #321A2B (Nightly Voyager), #D3ACD0 (Violet Vamp), #319562 (Eucalyptus), #A8EBCA (Glaucous Green). It mixes purple, pink, green tones and feels cool overall. The strongest text pairing is #321A2B on #A8EBCA with a contrast ratio of 11.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Fizz	rgb(104, 70, 93)	hsl(319, 20%, 34%)
Nightly Voyager	rgb(50, 26, 43)	hsl(317, 32%, 15%)
Violet Vamp	rgb(211, 172, 208)	hsl(305, 31%, 75%)
Eucalyptus	rgb(49, 149, 98)	hsl(149, 51%, 39%)
Glaucous Green	rgb(168, 235, 202)	hsl(150, 63%, 79%)

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.68:1 Very good#321A2B on #A8EBCA
Aa11.68:1 Very good#A8EBCA on #321A2B
Aa8.03:1 Very good#321A2B on #D3ACD0
Aa8.03:1 Very good#D3ACD0 on #321A2B
Aa5.87:1 Good#68465D on #A8EBCA
Aa5.87:1 Good#A8EBCA on #68465D
Aa4.25:1 Poor#321A2B on #319562
Aa4.25:1 Poor#319562 on #321A2B

Color blindness preview

CSS variables

/* Grape Fizz to Glaucous Green — https://swatchly.xyz/palette/68465d-321a2b-d3acd0-319562-a8ebca */
:root {
  --grape-fizz: #68465d;
  --nightly-voyager: #321a2b;
  --violet-vamp: #d3acd0;
  --eucalyptus: #319562;
  --glaucous-green: #a8ebca;
}

Tailwind CSS v4

/* Grape Fizz to Glaucous Green — https://swatchly.xyz/palette/68465d-321a2b-d3acd0-319562-a8ebca */
@theme {
  --color-grape-fizz: #68465d;
  --color-grape-fizz-50: #fff0fa;
  --color-grape-fizz-100: #fce2f3;
  --color-grape-fizz-200: #ebcde0;
  --color-grape-fizz-300: #d6b4ca;
  --color-grape-fizz-400: #b893ab;
  --color-grape-fizz-500: #9c7790;
  --color-grape-fizz-600: #805d74;
  --color-grape-fizz-700: #68465d;
  --color-grape-fizz-800: #513648;
  --color-grape-fizz-900: #3f2938;
  --color-grape-fizz-950: #281823;
  --color-nightly-voyager: #321a2b;
  --color-nightly-voyager-50: #fff0fa;
  --color-nightly-voyager-100: #f9e4f2;
  --color-nightly-voyager-200: #e8cfdf;
  --color-nightly-voyager-300: #d3b7ca;
  --color-nightly-voyager-400: #b597ab;
  --color-nightly-voyager-500: #9b7c91;
  --color-nightly-voyager-600: #806377;
  --color-nightly-voyager-700: #684e60;
  --color-nightly-voyager-800: #543d4d;
  --color-nightly-voyager-900: #432f3d;
  --color-nightly-voyager-950: #321a2b;
  --color-violet-vamp: #d3acd0;
  --color-violet-vamp-50: #ffeafd;
  --color-violet-vamp-100: #f8ddf5;
  --color-violet-vamp-200: #e6c7e3;
  --color-violet-vamp-300: #d3acd0;
  --color-violet-vamp-400: #b38fb0;
  --color-violet-vamp-500: #997496;
  --color-violet-vamp-600: #7e5c7c;
  --color-violet-vamp-700: #664764;
  --color-violet-vamp-800: #523750;
  --color-violet-vamp-900: #412a3f;
  --color-violet-vamp-950: #291928;
  --color-eucalyptus: #319562;
  --color-eucalyptus-50: #d9ffe6;
  --color-eucalyptus-100: #bff9d5;
  --color-eucalyptus-200: #a1e7bc;
  --color-eucalyptus-300: #80d1a1;
  --color-eucalyptus-400: #55b27e;
  --color-eucalyptus-500: #319562;
  --color-eucalyptus-600: #0d7a4a;
  --color-eucalyptus-700: #006239;
  --color-eucalyptus-800: #004d2c;
  --color-eucalyptus-900: #003c21;
  --color-eucalyptus-950: #002613;
  --color-glaucous-green: #a8ebca;
  --color-glaucous-green-50: #e1ffef;
  --color-glaucous-green-100: #d0f8e3;
  --color-glaucous-green-200: #a8ebca;
  --color-glaucous-green-300: #9ad1b6;
  --color-glaucous-green-400: #74b295;
  --color-glaucous-green-500: #569779;
  --color-glaucous-green-600: #3b7b5f;
  --color-glaucous-green-700: #276349;
  --color-glaucous-green-800: #184e38;
  --color-glaucous-green-900: #0d3c2a;
  --color-glaucous-green-950: #052619;
}