Foliage to Haunted Candelabra color palette

9EAF83Foliage 9276BBViola D5F4FBWater 401E10Délicieux au Chocolat 52456DHaunted Candelabra

About this palette

Foliage to Haunted Candelabra is a 5-color cool palette: #9EAF83 (Foliage), #9276BB (Viola), #D5F4FB (Water), #401E10 (Délicieux au Chocolat), #52456D (Haunted Candelabra). It mixes green, purple, white, brown tones and feels cool overall. The strongest text pairing is #D5F4FB on #401E10 with a contrast ratio of 12.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foliage	rgb(158, 175, 131)	hsl(83, 22%, 60%)
Viola	rgb(146, 118, 187)	hsl(264, 34%, 60%)
Water	rgb(213, 244, 251)	hsl(191, 83%, 91%)
Délicieux au Chocolat	rgb(64, 30, 16)	hsl(18, 60%, 16%)
Haunted Candelabra	rgb(82, 69, 109)	hsl(260, 22%, 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.87:1 Super#D5F4FB on #401E10
Aa12.87:1 Super#401E10 on #D5F4FB
Aa7.47:1 Very good#D5F4FB on #52456D
Aa7.47:1 Very good#52456D on #D5F4FB
Aa6.32:1 Good#9EAF83 on #401E10
Aa6.32:1 Good#401E10 on #9EAF83
Aa3.92:1 Poor#9276BB on #401E10
Aa3.92:1 Poor#401E10 on #9276BB

Color blindness preview

CSS variables

/* Foliage to Haunted Candelabra — https://swatchly.xyz/palette/9eaf83-9276bb-d5f4fb-401e10-52456d */
:root {
  --foliage: #9eaf83;
  --viola: #9276bb;
  --water: #d5f4fb;
  --d-licieux-au-chocolat: #401e10;
  --haunted-candelabra: #52456d;
}

Tailwind CSS v4

/* Foliage to Haunted Candelabra — https://swatchly.xyz/palette/9eaf83-9276bb-d5f4fb-401e10-52456d */
@theme {
  --color-foliage: #9eaf83;
  --color-foliage-50: #f2fce3;
  --color-foliage-100: #e8f3d8;
  --color-foliage-200: #d4e2c1;
  --color-foliage-300: #becda7;
  --color-foliage-400: #9eaf83;
  --color-foliage-500: #829268;
  --color-foliage-600: #67764d;
  --color-foliage-700: #505e38;
  --color-foliage-800: #3d4928;
  --color-foliage-900: #2e381c;
  --color-foliage-950: #1b220e;
  --color-viola: #9276bb;
  --color-viola-50: #f7f3ff;
  --color-viola-100: #efe6ff;
  --color-viola-200: #e0cdff;
  --color-viola-300: #cbb3f2;
  --color-viola-400: #ad92d6;
  --color-viola-500: #9276bb;
  --color-viola-600: #775c9e;
  --color-viola-700: #604782;
  --color-viola-800: #4b3569;
  --color-viola-900: #3b2854;
  --color-viola-950: #251737;
  --color-water: #d5f4fb;
  --color-water-50: #eafbfe;
  --color-water-100: #d5f4fb;
  --color-water-200: #c8dee3;
  --color-water-300: #aec8cd;
  --color-water-400: #8ca8af;
  --color-water-500: #708d93;
  --color-water-600: #567278;
  --color-water-700: #415a60;
  --color-water-800: #31474b;
  --color-water-900: #24363a;
  --color-water-950: #142225;
  --color-d-licieux-au-chocolat: #401e10;
  --color-d-licieux-au-chocolat-50: #fff2ed;
  --color-d-licieux-au-chocolat-100: #ffe5db;
  --color-d-licieux-au-chocolat-200: #f1cfc2;
  --color-d-licieux-au-chocolat-300: #deb7a8;
  --color-d-licieux-au-chocolat-400: #c09786;
  --color-d-licieux-au-chocolat-500: #a77d6d;
  --color-d-licieux-au-chocolat-600: #8d6555;
  --color-d-licieux-au-chocolat-700: #755142;
  --color-d-licieux-au-chocolat-800: #614033;
  --color-d-licieux-au-chocolat-900: #503328;
  --color-d-licieux-au-chocolat-950: #401e10;
  --color-haunted-candelabra: #52456d;
  --color-haunted-candelabra-50: #f6f3ff;
  --color-haunted-candelabra-100: #eee7ff;
  --color-haunted-candelabra-200: #dacff3;
  --color-haunted-candelabra-300: #c2b6df;
  --color-haunted-candelabra-400: #a295c0;
  --color-haunted-candelabra-500: #8578a3;
  --color-haunted-candelabra-600: #695d85;
  --color-haunted-candelabra-700: #52456d;
  --color-haunted-candelabra-800: #403654;
  --color-haunted-candelabra-900: #312942;
  --color-haunted-candelabra-950: #1e182a;
}