Violaceous to Melancholia Color Palette

About this palette

Violaceous to Melancholia is a 5-color cool, earthy palette: #C394C5 (Violaceous), #639542 (Bitter Leaf), #764287 (Grapes of Italy), #A7D684 (Feijoa), #123B07 (Melancholia). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #A7D684 on #123B07 with a contrast ratio of 7.61:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violaceous	rgb(195, 148, 197)	hsl(298, 30%, 68%)
Bitter Leaf	rgb(99, 149, 66)	hsl(96, 39%, 42%)
Grapes of Italy	rgb(118, 66, 135)	hsl(285, 34%, 39%)
Feijoa	rgb(167, 214, 132)	hsl(94, 50%, 68%)
Melancholia	rgb(18, 59, 7)	hsl(107, 79%, 13%)

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.

Aa7.61:1 Very good#A7D684 on #123B07
Aa7.61:1 Very good#123B07 on #A7D684
Aa5.05:1 Good#C394C5 on #123B07
Aa5.05:1 Good#123B07 on #C394C5
Aa4.34:1 Poor#764287 on #A7D684
Aa4.34:1 Poor#A7D684 on #764287
Aa3.57:1 Poor#639542 on #123B07
Aa3.57:1 Poor#123B07 on #639542

Color blindness preview

CSS variables

/* Violaceous to Melancholia — https://swatchly.xyz/palette/c394c5-639542-764287-a7d684-123b07 */
:root {
  --violaceous: #c394c5;
  --bitter-leaf: #639542;
  --grapes-of-italy: #764287;
  --feijoa: #a7d684;
  --melancholia: #123b07;
}

Tailwind CSS v4

/* Violaceous to Melancholia — https://swatchly.xyz/palette/c394c5-639542-764287-a7d684-123b07 */
@theme {
  --color-violaceous: #c394c5;
  --color-violaceous-50: #fff2ff;
  --color-violaceous-100: #fee4ff;
  --color-violaceous-200: #f1cef2;
  --color-violaceous-300: #deb6e0;
  --color-violaceous-400: #c394c5;
  --color-violaceous-500: #a578a7;
  --color-violaceous-600: #885d8b;
  --color-violaceous-700: #6e4770;
  --color-violaceous-800: #583559;
  --color-violaceous-900: #442746;
  --color-violaceous-950: #2b162c;
  --color-bitter-leaf: #639542;
  --color-bitter-leaf-50: #e3ffd4;
  --color-bitter-leaf-100: #d5f7c2;
  --color-bitter-leaf-200: #bde5a6;
  --color-bitter-leaf-300: #a2d088;
  --color-bitter-leaf-400: #7fb161;
  --color-bitter-leaf-500: #639542;
  --color-bitter-leaf-600: #4a7a28;
  --color-bitter-leaf-700: #366213;
  --color-bitter-leaf-800: #274d04;
  --color-bitter-leaf-900: #1c3c00;
  --color-bitter-leaf-950: #0f2600;
  --color-grapes-of-italy: #764287;
  --color-grapes-of-italy-50: #fbf1ff;
  --color-grapes-of-italy-100: #f8e3ff;
  --color-grapes-of-italy-200: #f1c7ff;
  --color-grapes-of-italy-300: #deaeef;
  --color-grapes-of-italy-400: #c28dd4;
  --color-grapes-of-italy-500: #a872ba;
  --color-grapes-of-italy-600: #8d589e;
  --color-grapes-of-italy-700: #764287;
  --color-grapes-of-italy-800: #5d326b;
  --color-grapes-of-italy-900: #492455;
  --color-grapes-of-italy-950: #2f1438;
  --color-feijoa: #a7d684;
  --color-feijoa-50: #ebffde;
  --color-feijoa-100: #dcf9c8;
  --color-feijoa-200: #c5e8ad;
  --color-feijoa-300: #a7d684;
  --color-feijoa-400: #89b468;
  --color-feijoa-500: #6c9849;
  --color-feijoa-600: #527c2d;
  --color-feijoa-700: #3d6318;
  --color-feijoa-800: #2c4e08;
  --color-feijoa-900: #203c01;
  --color-feijoa-950: #122500;
  --color-melancholia: #123b07;
  --color-melancholia-50: #e4fede;
  --color-melancholia-100: #d8f5d2;
  --color-melancholia-200: #c1e3b9;
  --color-melancholia-300: #a7ce9e;
  --color-melancholia-400: #84af7b;
  --color-melancholia-500: #67935e;
  --color-melancholia-600: #4e7745;
  --color-melancholia-700: #395f31;
  --color-melancholia-800: #294a22;
  --color-melancholia-900: #123b07;
  --color-melancholia-950: #10230b;
}