Grape Taffy to Café Noir color palette

EEDCF0Grape Taffy 98BBA4Lichen 6A89A5Treasure Map Waters 7D644CMan Cave 4E3724Café Noir

About this palette

Grape Taffy to Café Noir is a 5-color muted, earthy, vintage palette: #EEDCF0 (Grape Taffy), #98BBA4 (Lichen), #6A89A5 (Treasure Map Waters), #7D644C (Man Cave), #4E3724 (Café Noir). It mixes gray, green, blue, brown tones and feels balanced overall. The strongest text pairing is #EEDCF0 on #4E3724 with a contrast ratio of 8.51:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(238, 220, 240)	hsl(294, 40%, 90%)
Lichen	rgb(152, 187, 164)	hsl(141, 20%, 66%)
Treasure Map Waters	rgb(106, 137, 165)	hsl(208, 25%, 53%)
Man Cave	rgb(125, 100, 76)	hsl(29, 24%, 39%)
Café Noir	rgb(78, 55, 36)	hsl(27, 37%, 22%)

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.

Aa8.51:1 Very good#EEDCF0 on #4E3724
Aa8.51:1 Very good#4E3724 on #EEDCF0
Aa5.26:1 Good#98BBA4 on #4E3724
Aa5.26:1 Good#4E3724 on #98BBA4
Aa4.25:1 Poor#EEDCF0 on #7D644C
Aa4.25:1 Poor#7D644C on #EEDCF0
Aa3.02:1 Poor#6A89A5 on #4E3724
Aa3.02:1 Poor#4E3724 on #6A89A5

Color blindness preview

CSS variables

/* Grape Taffy to Café Noir — https://swatchly.xyz/palette/eedcf0-98bba4-6a89a5-7d644c-4e3724 */
:root {
  --grape-taffy: #eedcf0;
  --lichen: #98bba4;
  --treasure-map-waters: #6a89a5;
  --man-cave: #7d644c;
  --caf-noir: #4e3724;
}

Tailwind CSS v4

/* Grape Taffy to Café Noir — https://swatchly.xyz/palette/eedcf0-98bba4-6a89a5-7d644c-4e3724 */
@theme {
  --color-grape-taffy: #eedcf0;
  --color-grape-taffy-50: #f5eaf6;
  --color-grape-taffy-100: #eedcf0;
  --color-grape-taffy-200: #d9cbdb;
  --color-grape-taffy-300: #c5b6c7;
  --color-grape-taffy-400: #a897a9;
  --color-grape-taffy-500: #8e7d8f;
  --color-grape-taffy-600: #746576;
  --color-grape-taffy-700: #5e505f;
  --color-grape-taffy-800: #4a3e4b;
  --color-grape-taffy-900: #392f3a;
  --color-grape-taffy-950: #241c25;
  --color-lichen: #98bba4;
  --color-lichen-50: #f0fff5;
  --color-lichen-100: #e5f9ec;
  --color-lichen-200: #d1ead9;
  --color-lichen-300: #bad6c4;
  --color-lichen-400: #98bba4;
  --color-lichen-500: #7b9c86;
  --color-lichen-600: #5e7e69;
  --color-lichen-700: #466451;
  --color-lichen-800: #334e3d;
  --color-lichen-900: #243b2d;
  --color-lichen-950: #14231a;
  --color-treasure-map-waters: #6a89a5;
  --color-treasure-map-waters-50: #edf6ff;
  --color-treasure-map-waters-100: #dbeeff;
  --color-treasure-map-waters-200: #c2daf1;
  --color-treasure-map-waters-300: #a8c4de;
  --color-treasure-map-waters-400: #86a5c0;
  --color-treasure-map-waters-500: #6a89a5;
  --color-treasure-map-waters-600: #516e89;
  --color-treasure-map-waters-700: #3d5870;
  --color-treasure-map-waters-800: #2d4459;
  --color-treasure-map-waters-900: #213546;
  --color-treasure-map-waters-950: #12212d;
  --color-man-cave: #7d644c;
  --color-man-cave-50: #fff3e7;
  --color-man-cave-100: #f9e7d6;
  --color-man-cave-200: #e8d2bf;
  --color-man-cave-300: #d3bba4;
  --color-man-cave-400: #b49a82;
  --color-man-cave-500: #997f66;
  --color-man-cave-600: #7d644c;
  --color-man-cave-700: #654f39;
  --color-man-cave-800: #503d2a;
  --color-man-cave-900: #3e2e1e;
  --color-man-cave-950: #281c11;
  --color-caf-noir: #4e3724;
  --color-caf-noir-50: #fff3e9;
  --color-caf-noir-100: #fae7d9;
  --color-caf-noir-200: #e9d3c2;
  --color-caf-noir-300: #d3bba7;
  --color-caf-noir-400: #b49985;
  --color-caf-noir-500: #977d68;
  --color-caf-noir-600: #7b624e;
  --color-caf-noir-700: #614b3a;
  --color-caf-noir-800: #4e3724;
  --color-caf-noir-900: #3a2b1e;
  --color-caf-noir-950: #241910;
}