Mimi Pink to Very Coffee Color Palette

About this palette

Mimi Pink to Very Coffee is a 5-color warm, earthy, vintage palette: #FFDCF3 (Mimi Pink), #95A5EB (Cold Lips), #92834A (Rural Green), #007A49 (Woodland Soul), #5B4400 (Very Coffee). It mixes pink, blue, yellow, green, brown tones and feels warm overall. The strongest text pairing is #FFDCF3 on #5B4400 with a contrast ratio of 7.39:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mimi Pink	rgb(255, 220, 243)	hsl(321, 100%, 93%)
Cold Lips	rgb(149, 165, 235)	hsl(229, 68%, 75%)
Rural Green	rgb(146, 131, 74)	hsl(48, 33%, 43%)
Woodland Soul	rgb(0, 122, 73)	hsl(156, 100%, 24%)
Very Coffee	rgb(91, 68, 0)	hsl(45, 100%, 18%)

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.39:1 Very good#FFDCF3 on #5B4400
Aa7.39:1 Very good#5B4400 on #FFDCF3
Aa4.33:1 Poor#FFDCF3 on #007A49
Aa4.33:1 Poor#007A49 on #FFDCF3
Aa3.90:1 Poor#95A5EB on #5B4400
Aa3.90:1 Poor#5B4400 on #95A5EB
Aa3.01:1 Poor#FFDCF3 on #92834A
Aa3.01:1 Poor#92834A on #FFDCF3

Color blindness preview

CSS variables

/* Mimi Pink to Very Coffee — https://swatchly.xyz/palette/ffdcf3-95a5eb-92834a-007a49-5b4400 */
:root {
  --mimi-pink: #ffdcf3;
  --cold-lips: #95a5eb;
  --rural-green: #92834a;
  --woodland-soul: #007a49;
  --very-coffee: #5b4400;
}

Tailwind CSS v4

/* Mimi Pink to Very Coffee — https://swatchly.xyz/palette/ffdcf3-95a5eb-92834a-007a49-5b4400 */
@theme {
  --color-mimi-pink: #ffdcf3;
  --color-mimi-pink-50: #ffecf8;
  --color-mimi-pink-100: #ffdcf3;
  --color-mimi-pink-200: #e6ccdd;
  --color-mimi-pink-300: #d2b5c8;
  --color-mimi-pink-400: #b495aa;
  --color-mimi-pink-500: #997a8f;
  --color-mimi-pink-600: #7e6175;
  --color-mimi-pink-700: #664c5e;
  --color-mimi-pink-800: #513a4a;
  --color-mimi-pink-900: #3f2c39;
  --color-mimi-pink-950: #281a24;
  --color-cold-lips: #95a5eb;
  --color-cold-lips-50: #f6f8ff;
  --color-cold-lips-100: #eaefff;
  --color-cold-lips-200: #d2dcff;
  --color-cold-lips-300: #b6c5ff;
  --color-cold-lips-400: #95a5eb;
  --color-cold-lips-500: #7988cb;
  --color-cold-lips-600: #5e6cac;
  --color-cold-lips-700: #48548f;
  --color-cold-lips-800: #364073;
  --color-cold-lips-900: #28305b;
  --color-cold-lips-950: #171c3b;
  --color-rural-green: #92834a;
  --color-rural-green-50: #fdf5d4;
  --color-rural-green-100: #f4ebc6;
  --color-rural-green-200: #e2d6aa;
  --color-rural-green-300: #ccbf8d;
  --color-rural-green-400: #ae9f68;
  --color-rural-green-500: #92834a;
  --color-rural-green-600: #776931;
  --color-rural-green-700: #60531f;
  --color-rural-green-800: #4c4012;
  --color-rural-green-900: #3b3109;
  --color-rural-green-950: #261e03;
  --color-woodland-soul: #007a49;
  --color-woodland-soul-50: #ddffe9;
  --color-woodland-soul-100: #c1fad6;
  --color-woodland-soul-200: #a3e8be;
  --color-woodland-soul-300: #82d2a3;
  --color-woodland-soul-400: #57b380;
  --color-woodland-soul-500: #329663;
  --color-woodland-soul-600: #007a49;
  --color-woodland-soul-700: #006139;
  --color-woodland-soul-800: #004c2c;
  --color-woodland-soul-900: #003b21;
  --color-woodland-soul-950: #002513;
  --color-very-coffee: #5b4400;
  --color-very-coffee-50: #fff4dc;
  --color-very-coffee-100: #faeac5;
  --color-very-coffee-200: #e9d6aa;
  --color-very-coffee-300: #d6c08e;
  --color-very-coffee-400: #b9a16a;
  --color-very-coffee-500: #9f864d;
  --color-very-coffee-600: #846c34;
  --color-very-coffee-700: #6d5721;
  --color-very-coffee-800: #5b4400;
  --color-very-coffee-900: #453508;
  --color-very-coffee-950: #2d2002;
}