Cotton Ball to Chocolate Kiss Color Palette

About this palette

Cotton Ball to Chocolate Kiss is a 5-color warm, vintage palette: #F2F5FF (Cotton Ball), #D29FAD (Young at Heart), #00847F (Windows 95 Desktop), #5C4500 (Very Coffee), #36131C (Chocolate Kiss). It mixes white, pink, turquoise, brown, red tones and feels warm overall. The strongest text pairing is #F2F5FF on #36131C with a contrast ratio of 15.22:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Ball	rgb(242, 245, 255)	hsl(226, 100%, 97%)
Young at Heart	rgb(210, 159, 173)	hsl(344, 36%, 72%)
Windows 95 Desktop	rgb(0, 132, 127)	hsl(178, 100%, 26%)
Very Coffee	rgb(92, 69, 0)	hsl(45, 100%, 18%)
Chocolate Kiss	rgb(54, 19, 28)	hsl(345, 48%, 14%)

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.

Aa15.22:1 Super#F2F5FF on #36131C
Aa15.22:1 Super#36131C on #F2F5FF
Aa8.36:1 Very good#F2F5FF on #5C4500
Aa8.36:1 Very good#5C4500 on #F2F5FF
Aa7.34:1 Very good#D29FAD on #36131C
Aa7.34:1 Very good#36131C on #D29FAD
Aa4.19:1 Poor#F2F5FF on #00847F
Aa4.19:1 Poor#00847F on #F2F5FF

Color blindness preview

CSS variables

/* Cotton Ball to Chocolate Kiss — https://swatchly.xyz/palette/f2f5ff-d29fad-00847f-5c4500-36131c */
:root {
  --cotton-ball: #f2f5ff;
  --young-at-heart: #d29fad;
  --windows-95-desktop: #00847f;
  --very-coffee: #5c4500;
  --chocolate-kiss: #36131c;
}

Tailwind CSS v4

/* Cotton Ball to Chocolate Kiss — https://swatchly.xyz/palette/f2f5ff-d29fad-00847f-5c4500-36131c */
@theme {
  --color-cotton-ball: #f2f5ff;
  --color-cotton-ball-50: #f2f5ff;
  --color-cotton-ball-100: #e9ebf1;
  --color-cotton-ball-200: #d5d7df;
  --color-cotton-ball-300: #bec1c9;
  --color-cotton-ball-400: #9fa1aa;
  --color-cotton-ball-500: #83868f;
  --color-cotton-ball-600: #696b74;
  --color-cotton-ball-700: #53555d;
  --color-cotton-ball-800: #404249;
  --color-cotton-ball-900: #313338;
  --color-cotton-ball-950: #1e1f23;
  --color-young-at-heart: #d29fad;
  --color-young-at-heart-50: #fff8fa;
  --color-young-at-heart-100: #ffedf2;
  --color-young-at-heart-200: #fbd6df;
  --color-young-at-heart-300: #eac0cb;
  --color-young-at-heart-400: #d29fad;
  --color-young-at-heart-500: #b2828f;
  --color-young-at-heart-600: #946572;
  --color-young-at-heart-700: #784d5a;
  --color-young-at-heart-800: #5f3a45;
  --color-young-at-heart-900: #492a33;
  --color-young-at-heart-950: #2d181e;
  --color-windows-95-desktop: #00847f;
  --color-windows-95-desktop-50: #d6fffb;
  --color-windows-95-desktop-100: #c0faf5;
  --color-windows-95-desktop-200: #a4e9e4;
  --color-windows-95-desktop-300: #85d6d0;
  --color-windows-95-desktop-400: #5ab9b3;
  --color-windows-95-desktop-500: #349e99;
  --color-windows-95-desktop-600: #00847f;
  --color-windows-95-desktop-700: #006965;
  --color-windows-95-desktop-800: #00524f;
  --color-windows-95-desktop-900: #003f3c;
  --color-windows-95-desktop-950: #002726;
  --color-very-coffee: #5c4500;
  --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: #9f874d;
  --color-very-coffee-600: #856d34;
  --color-very-coffee-700: #6e5820;
  --color-very-coffee-800: #5c4500;
  --color-very-coffee-900: #463507;
  --color-very-coffee-950: #2e2102;
  --color-chocolate-kiss: #36131c;
  --color-chocolate-kiss-50: #fff1f3;
  --color-chocolate-kiss-100: #ffe3e8;
  --color-chocolate-kiss-200: #f1cdd3;
  --color-chocolate-kiss-300: #deb4bc;
  --color-chocolate-kiss-400: #c0949c;
  --color-chocolate-kiss-500: #a57881;
  --color-chocolate-kiss-600: #895f67;
  --color-chocolate-kiss-700: #704a51;
  --color-chocolate-kiss-800: #59383f;
  --color-chocolate-kiss-900: #472a30;
  --color-chocolate-kiss-950: #36131c;
}