Café Noir to Castaway color palette

443620Café Noir D0EFEESprinkled With Dew 88572EPrecious Copper A47EBCWisteria 6AB9B3Castaway

About this palette

Café Noir to Castaway is a 5-color vintage palette: #443620 (Café Noir), #D0EFEE (Sprinkled With Dew), #88572E (Precious Copper), #A47EBC (Wisteria), #6AB9B3 (Castaway). It mixes brown, gray, purple, turquoise tones and feels balanced overall. The strongest text pairing is #443620 on #D0EFEE with a contrast ratio of 9.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Café Noir	rgb(68, 54, 32)	hsl(37, 36%, 20%)
Sprinkled With Dew	rgb(208, 239, 238)	hsl(178, 49%, 88%)
Precious Copper	rgb(136, 87, 46)	hsl(27, 49%, 36%)
Wisteria	rgb(164, 126, 188)	hsl(277, 32%, 62%)
Castaway	rgb(106, 185, 179)	hsl(175, 36%, 57%)

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.

Aa9.62:1 Very good#443620 on #D0EFEE
Aa9.62:1 Very good#D0EFEE on #443620
Aa5.13:1 Good#443620 on #6AB9B3
Aa5.13:1 Good#6AB9B3 on #443620
Aa5.00:1 Good#D0EFEE on #88572E
Aa5.00:1 Good#88572E on #D0EFEE
Aa3.50:1 Poor#443620 on #A47EBC
Aa3.50:1 Poor#A47EBC on #443620

Color blindness preview

CSS variables

/* Café Noir to Castaway — https://swatchly.xyz/palette/443620-d0efee-88572e-a47ebc-6ab9b3 */
:root {
  --caf-noir: #443620;
  --sprinkled-with-dew: #d0efee;
  --precious-copper: #88572e;
  --wisteria: #a47ebc;
  --castaway: #6ab9b3;
}

Tailwind CSS v4

/* Café Noir to Castaway — https://swatchly.xyz/palette/443620-d0efee-88572e-a47ebc-6ab9b3 */
@theme {
  --color-caf-noir: #443620;
  --color-caf-noir-50: #fdf4e5;
  --color-caf-noir-100: #f5ead9;
  --color-caf-noir-200: #e2d6c2;
  --color-caf-noir-300: #cdbfa9;
  --color-caf-noir-400: #b0a088;
  --color-caf-noir-500: #96866e;
  --color-caf-noir-600: #7c6d55;
  --color-caf-noir-700: #655742;
  --color-caf-noir-800: #524532;
  --color-caf-noir-900: #443620;
  --color-caf-noir-950: #2a2216;
  --color-sprinkled-with-dew: #d0efee;
  --color-sprinkled-with-dew-50: #e5f6f6;
  --color-sprinkled-with-dew-100: #d0efee;
  --color-sprinkled-with-dew-200: #c3dad9;
  --color-sprinkled-with-dew-300: #abc5c4;
  --color-sprinkled-with-dew-400: #8aa6a6;
  --color-sprinkled-with-dew-500: #6f8c8b;
  --color-sprinkled-with-dew-600: #567171;
  --color-sprinkled-with-dew-700: #425b5a;
  --color-sprinkled-with-dew-800: #314747;
  --color-sprinkled-with-dew-900: #243736;
  --color-sprinkled-with-dew-950: #152222;
  --color-precious-copper: #88572e;
  --color-precious-copper-50: #fff3e9;
  --color-precious-copper-100: #ffe4d0;
  --color-precious-copper-200: #f6cbab;
  --color-precious-copper-300: #e1b18d;
  --color-precious-copper-400: #c38f67;
  --color-precious-copper-500: #a67249;
  --color-precious-copper-600: #88572e;
  --color-precious-copper-700: #6e441f;
  --color-precious-copper-800: #583313;
  --color-precious-copper-900: #46270b;
  --color-precious-copper-950: #2d1704;
  --color-wisteria: #a47ebc;
  --color-wisteria-50: #faf4ff;
  --color-wisteria-100: #f6e9ff;
  --color-wisteria-200: #ecd0ff;
  --color-wisteria-300: #dab9ef;
  --color-wisteria-400: #bd99d5;
  --color-wisteria-500: #a47ebc;
  --color-wisteria-600: #87629d;
  --color-wisteria-700: #6d4b81;
  --color-wisteria-800: #563868;
  --color-wisteria-900: #422951;
  --color-wisteria-950: #2a1734;
  --color-castaway: #6ab9b3;
  --color-castaway-50: #e1fffc;
  --color-castaway-100: #cdfaf5;
  --color-castaway-200: #b3e9e4;
  --color-castaway-300: #96d5d0;
  --color-castaway-400: #6ab9b3;
  --color-castaway-500: #4c9b96;
  --color-castaway-600: #2e7f7a;
  --color-castaway-700: #146661;
  --color-castaway-800: #00504c;
  --color-castaway-900: #003d3a;
  --color-castaway-950: #002523;
}