Futon to Black Cherry Color Palette

About this palette

Futon to Black Cherry is a 5-color cool palette: #EBFCD5 (Futon), #584870 (Haunted Candelabra), #7F7AA1 (Aster), #6CC4A7 (Spearmint), #2F191E (Black Cherry). It mixes white, purple, turquoise, red tones and feels cool overall. The strongest text pairing is #EBFCD5 on #2F191E with a contrast ratio of 15.19:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Futon	rgb(235, 252, 213)	hsl(86, 87%, 91%)
Haunted Candelabra	rgb(88, 72, 112)	hsl(264, 22%, 36%)
Aster	rgb(127, 122, 161)	hsl(248, 17%, 55%)
Spearmint	rgb(108, 196, 167)	hsl(160, 43%, 60%)
Black Cherry	rgb(47, 25, 30)	hsl(346, 31%, 14%)

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.

Aa15.19:1 Super#EBFCD5 on #2F191E
Aa15.19:1 Super#2F191E on #EBFCD5
Aa7.89:1 Very good#6CC4A7 on #2F191E
Aa7.89:1 Very good#2F191E on #6CC4A7
Aa7.54:1 Very good#EBFCD5 on #584870
Aa7.54:1 Very good#584870 on #EBFCD5
Aa4.07:1 Poor#7F7AA1 on #2F191E
Aa4.07:1 Poor#2F191E on #7F7AA1

Color blindness preview

CSS variables

/* Futon to Black Cherry — https://swatchly.xyz/palette/ebfcd5-584870-7f7aa1-6cc4a7-2f191e */
:root {
  --futon: #ebfcd5;
  --haunted-candelabra: #584870;
  --aster: #7f7aa1;
  --spearmint: #6cc4a7;
  --black-cherry: #2f191e;
}

Tailwind CSS v4

/* Futon to Black Cherry — https://swatchly.xyz/palette/ebfcd5-584870-7f7aa1-6cc4a7-2f191e */
@theme {
  --color-futon: #ebfcd5;
  --color-futon-50: #ebfcd5;
  --color-futon-100: #e5efd7;
  --color-futon-200: #d0dcc0;
  --color-futon-300: #b9c7a7;
  --color-futon-400: #99a885;
  --color-futon-500: #7d8c69;
  --color-futon-600: #647250;
  --color-futon-700: #4e5b3c;
  --color-futon-800: #3c472c;
  --color-futon-900: #2d3720;
  --color-futon-950: #1b2212;
  --color-haunted-candelabra: #584870;
  --color-haunted-candelabra-50: #f7f3ff;
  --color-haunted-candelabra-100: #efe6ff;
  --color-haunted-candelabra-200: #dccff3;
  --color-haunted-candelabra-300: #c6b7df;
  --color-haunted-candelabra-400: #a696c1;
  --color-haunted-candelabra-500: #8a7aa5;
  --color-haunted-candelabra-600: #6f5f88;
  --color-haunted-candelabra-700: #584870;
  --color-haunted-candelabra-800: #443857;
  --color-haunted-candelabra-900: #352a45;
  --color-haunted-candelabra-950: #21192c;
  --color-aster: #7f7aa1;
  --color-aster-50: #f3f2ff;
  --color-aster-100: #e8e5ff;
  --color-aster-200: #d3d0f0;
  --color-aster-300: #bbb7dc;
  --color-aster-400: #9b96be;
  --color-aster-500: #7f7aa1;
  --color-aster-600: #666186;
  --color-aster-700: #514c6d;
  --color-aster-800: #3f3b58;
  --color-aster-900: #312d45;
  --color-aster-950: #1e1c2d;
  --color-spearmint: #6cc4a7;
  --color-spearmint-50: #eefff8;
  --color-spearmint-100: #d1ffee;
  --color-spearmint-200: #b7f0db;
  --color-spearmint-300: #9adec6;
  --color-spearmint-400: #6cc4a7;
  --color-spearmint-500: #4da589;
  --color-spearmint-600: #2a876c;
  --color-spearmint-700: #0a6c54;
  --color-spearmint-800: #005440;
  --color-spearmint-900: #003f30;
  --color-spearmint-950: #00261c;
  --color-black-cherry: #2f191e;
  --color-black-cherry-50: #fff1f4;
  --color-black-cherry-100: #f9e5e9;
  --color-black-cherry-200: #e8d1d5;
  --color-black-cherry-300: #d3b9be;
  --color-black-cherry-400: #b5999e;
  --color-black-cherry-500: #9a7e83;
  --color-black-cherry-600: #7f6469;
  --color-black-cherry-700: #674e53;
  --color-black-cherry-800: #523d41;
  --color-black-cherry-900: #402e32;
  --color-black-cherry-950: #2f191e;
}