Baby Pink to Café Noir color palette

FEB9CEBaby Pink CC86ACMoonlight Mauve 5B958CMartian Cerulean 037B9EBleu Ciel 794322Walnut 4E321FCafé Noir

Open in generator Export PNG, PDF, ASE…

About this palette

Baby Pink to Café Noir is a 6-color warm, vintage palette: #FEB9CE (Baby Pink), #CC86AC (Moonlight Mauve), #5B958C (Martian Cerulean), #037B9E (Bleu Ciel), #794322 (Walnut), #4E321F (Café Noir). It mixes pink, turquoise, blue, brown tones and feels warm overall. The strongest text pairing is #FEB9CE on #4E321F with a contrast ratio of 7.25:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baby Pink	rgb(254, 185, 206)	hsl(342, 97%, 86%)
Moonlight Mauve	rgb(204, 134, 172)	hsl(327, 41%, 66%)
Martian Cerulean	rgb(91, 149, 140)	hsl(171, 24%, 47%)
Bleu Ciel	rgb(3, 123, 158)	hsl(194, 96%, 32%)
Walnut	rgb(121, 67, 34)	hsl(23, 56%, 30%)
Café Noir	rgb(78, 50, 31)	hsl(24, 43%, 21%)

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.

Aa7.25:1 Very good#FEB9CE on #4E321F
Aa7.25:1 Very good#4E321F on #FEB9CE
Aa4.94:1 Good#FEB9CE on #794322
Aa4.94:1 Good#794322 on #FEB9CE
Aa4.21:1 Poor#CC86AC on #4E321F
Aa4.21:1 Poor#4E321F on #CC86AC
Aa3.40:1 Poor#5B958C on #4E321F
Aa3.40:1 Poor#4E321F on #5B958C

Color blindness preview

CSS variables

/* Baby Pink to Café Noir — https://swatchly.xyz/palette/feb9ce-cc86ac-5b958c-037b9e-794322-4e321f */
:root {
  --baby-pink: #feb9ce;
  --moonlight-mauve: #cc86ac;
  --martian-cerulean: #5b958c;
  --bleu-ciel: #037b9e;
  --walnut: #794322;
  --caf-noir: #4e321f;
}

Tailwind CSS v4

/* Baby Pink to Café Noir — https://swatchly.xyz/palette/feb9ce-cc86ac-5b958c-037b9e-794322-4e321f */
@theme {
  --color-baby-pink: #feb9ce;
  --color-baby-pink-50: #ffe9ef;
  --color-baby-pink-100: #ffd9e3;
  --color-baby-pink-200: #feb9ce;
  --color-baby-pink-300: #e3a7b9;
  --color-baby-pink-400: #c7879b;
  --color-baby-pink-500: #ac6d81;
  --color-baby-pink-600: #905568;
  --color-baby-pink-700: #764153;
  --color-baby-pink-800: #603141;
  --color-baby-pink-900: #4c2432;
  --color-baby-pink-950: #31151f;
  --color-moonlight-mauve: #cc86ac;
  --color-moonlight-mauve-50: #ffeff7;
  --color-moonlight-mauve-100: #ffe0ef;
  --color-moonlight-mauve-200: #fbc3e0;
  --color-moonlight-mauve-300: #e8a9ca;
  --color-moonlight-mauve-400: #cc86ac;
  --color-moonlight-mauve-500: #af6b91;
  --color-moonlight-mauve-600: #925276;
  --color-moonlight-mauve-700: #773e5f;
  --color-moonlight-mauve-800: #602e4b;
  --color-moonlight-mauve-900: #4c213a;
  --color-moonlight-mauve-950: #321325;
  --color-martian-cerulean: #5b958c;
  --color-martian-cerulean-50: #ddfef8;
  --color-martian-cerulean-100: #d1f5ee;
  --color-martian-cerulean-200: #b8e3dc;
  --color-martian-cerulean-300: #9dcec6;
  --color-martian-cerulean-400: #78b0a7;
  --color-martian-cerulean-500: #5b958c;
  --color-martian-cerulean-600: #417971;
  --color-martian-cerulean-700: #2c615a;
  --color-martian-cerulean-800: #1d4d46;
  --color-martian-cerulean-900: #123b36;
  --color-martian-cerulean-950: #072521;
  --color-bleu-ciel: #037b9e;
  --color-bleu-ciel-50: #e9f8ff;
  --color-bleu-ciel-100: #d4f2ff;
  --color-bleu-ciel-200: #a4e4ff;
  --color-bleu-ciel-300: #83cfef;
  --color-bleu-ciel-400: #58b1d4;
  --color-bleu-ciel-500: #3496ba;
  --color-bleu-ciel-600: #037b9e;
  --color-bleu-ciel-700: #00627e;
  --color-bleu-ciel-800: #004c63;
  --color-bleu-ciel-900: #003b4d;
  --color-bleu-ciel-950: #002432;
  --color-walnut: #794322;
  --color-walnut-50: #fff2eb;
  --color-walnut-100: #ffe5d7;
  --color-walnut-200: #fccbb1;
  --color-walnut-300: #e9b395;
  --color-walnut-400: #cb9170;
  --color-walnut-500: #af7553;
  --color-walnut-600: #915a3a;
  --color-walnut-700: #794322;
  --color-walnut-800: #5f341a;
  --color-walnut-900: #4b2710;
  --color-walnut-950: #301607;
  --color-caf-noir: #4e321f;
  --color-caf-noir-50: #fff2ea;
  --color-caf-noir-100: #fde6d8;
  --color-caf-noir-200: #ecd2c1;
  --color-caf-noir-300: #d8baa7;
  --color-caf-noir-400: #bc9b87;
  --color-caf-noir-500: #a2816c;
  --color-caf-noir-600: #876854;
  --color-caf-noir-700: #705340;
  --color-caf-noir-800: #5b4231;
  --color-caf-noir-900: #4e321f;
  --color-caf-noir-950: #302015;
}