Melancholia to Fabric of Love Color Palette

About this palette

Melancholia to Fabric of Love is a 4-color cool palette: #00370A (Melancholia), #C17BFF (Illicit Purple), #E4FFDF (Futon), #A80D6F (Fabric of Love). It mixes green, purple, white, red tones and feels cool overall. The strongest text pairing is #00370A on #E4FFDF with a contrast ratio of 12.68:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melancholia	rgb(0, 55, 10)	hsl(131, 100%, 11%)
Illicit Purple	rgb(193, 123, 255)	hsl(272, 100%, 74%)
Futon	rgb(228, 255, 223)	hsl(111, 100%, 94%)
Fabric of Love	rgb(168, 13, 111)	hsl(322, 86%, 35%)

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.

Aa12.68:1 Super#00370A on #E4FFDF
Aa12.68:1 Super#E4FFDF on #00370A
Aa6.66:1 Good#E4FFDF on #A80D6F
Aa6.66:1 Good#A80D6F on #E4FFDF
Aa4.86:1 Good#00370A on #C17BFF
Aa4.86:1 Good#C17BFF on #00370A

Color blindness preview

CSS variables

/* Melancholia to Fabric of Love — https://swatchly.xyz/palette/00370a-c17bff-e4ffdf-a80d6f */
:root {
  --melancholia: #00370a;
  --illicit-purple: #c17bff;
  --futon: #e4ffdf;
  --fabric-of-love: #a80d6f;
}

Tailwind CSS v4

/* Melancholia to Fabric of Love — https://swatchly.xyz/palette/00370a-c17bff-e4ffdf-a80d6f */
@theme {
  --color-melancholia: #00370a;
  --color-melancholia-50: #e1ffe1;
  --color-melancholia-100: #d4f6d5;
  --color-melancholia-200: #bce4bd;
  --color-melancholia-300: #a2cfa3;
  --color-melancholia-400: #7daf7f;
  --color-melancholia-500: #5f9262;
  --color-melancholia-600: #457548;
  --color-melancholia-700: #305c33;
  --color-melancholia-800: #204624;
  --color-melancholia-900: #00370a;
  --color-melancholia-950: #0a200c;
  --color-illicit-purple: #c17bff;
  --color-illicit-purple-50: #f8f2ff;
  --color-illicit-purple-100: #f1e5ff;
  --color-illicit-purple-200: #e4cbff;
  --color-illicit-purple-300: #d5acff;
  --color-illicit-purple-400: #c17bff;
  --color-illicit-purple-500: #a55ee0;
  --color-illicit-purple-600: #8943c0;
  --color-illicit-purple-700: #6f2da1;
  --color-illicit-purple-800: #591c84;
  --color-illicit-purple-900: #46116a;
  --color-illicit-purple-950: #2d0647;
  --color-futon: #e4ffdf;
  --color-futon-50: #e4ffdf;
  --color-futon-100: #e1f1de;
  --color-futon-200: #cbdfc7;
  --color-futon-300: #b3c9af;
  --color-futon-400: #92aa8d;
  --color-futon-500: #768e72;
  --color-futon-600: #5c7358;
  --color-futon-700: #475c43;
  --color-futon-800: #364833;
  --color-futon-900: #283826;
  --color-futon-950: #182316;
  --color-fabric-of-love: #a80d6f;
  --color-fabric-of-love-50: #fff1f7;
  --color-fabric-of-love-100: #ffe2ef;
  --color-fabric-of-love-200: #ffc7e0;
  --color-fabric-of-love-300: #ffa4d0;
  --color-fabric-of-love-400: #f96fb8;
  --color-fabric-of-love-500: #df4f9e;
  --color-fabric-of-love-600: #c13185;
  --color-fabric-of-love-700: #a80d6f;
  --color-fabric-of-love-800: #870057;
  --color-fabric-of-love-900: #6a0043;
  --color-fabric-of-love-950: #45002b;
}