Candied Snow to Hot Chocolate Color Palette

About this palette

Candied Snow to Hot Chocolate is a 5-color warm, vintage palette: #DAFEF6 (Candied Snow), #8AC7BB (Seaborn), #B57888 (Nipple), #885258 (Velour Scar), #5F393F (Hot Chocolate). It mixes white, turquoise, pink, red, brown tones and feels warm overall. The strongest text pairing is #DAFEF6 on #5F393F with a contrast ratio of 9.09:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Candied Snow	rgb(218, 254, 246)	hsl(167, 95%, 93%)
Seaborn	rgb(138, 199, 187)	hsl(168, 35%, 66%)
Nipple	rgb(181, 120, 136)	hsl(344, 29%, 59%)
Velour Scar	rgb(136, 82, 88)	hsl(353, 25%, 43%)
Hot Chocolate	rgb(95, 57, 63)	hsl(351, 25%, 30%)

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.09:1 Very good#DAFEF6 on #5F393F
Aa9.09:1 Very good#5F393F on #DAFEF6
Aa5.74:1 Good#DAFEF6 on #885258
Aa5.74:1 Good#885258 on #DAFEF6
Aa5.12:1 Good#8AC7BB on #5F393F
Aa5.12:1 Good#5F393F on #8AC7BB
Aa3.24:1 Poor#DAFEF6 on #B57888
Aa3.24:1 Poor#B57888 on #DAFEF6

Color blindness preview

CSS variables

/* Candied Snow to Hot Chocolate — https://swatchly.xyz/palette/dafef6-8ac7bb-b57888-885258-5f393f */
:root {
  --candied-snow: #dafef6;
  --seaborn: #8ac7bb;
  --nipple: #b57888;
  --velour-scar: #885258;
  --hot-chocolate: #5f393f;
}

Tailwind CSS v4

/* Candied Snow to Hot Chocolate — https://swatchly.xyz/palette/dafef6-8ac7bb-b57888-885258-5f393f */
@theme {
  --color-candied-snow: #dafef6;
  --color-candied-snow-50: #dafef6;
  --color-candied-snow-100: #dbf1ec;
  --color-candied-snow-200: #c4ded8;
  --color-candied-snow-300: #abc8c2;
  --color-candied-snow-400: #89a9a2;
  --color-candied-snow-500: #6d8e87;
  --color-candied-snow-600: #54736d;
  --color-candied-snow-700: #3f5c56;
  --color-candied-snow-800: #2f4843;
  --color-candied-snow-900: #223833;
  --color-candied-snow-950: #132320;
  --color-seaborn: #8ac7bb;
  --color-seaborn-50: #d7faf2;
  --color-seaborn-100: #c8efe7;
  --color-seaborn-200: #addcd2;
  --color-seaborn-300: #8ac7bb;
  --color-seaborn-400: #6ea89d;
  --color-seaborn-500: #528e83;
  --color-seaborn-600: #3a746a;
  --color-seaborn-700: #275e55;
  --color-seaborn-800: #1a4b43;
  --color-seaborn-900: #103b34;
  --color-seaborn-950: #062520;
  --color-nipple: #b57888;
  --color-nipple-50: #fff3f5;
  --color-nipple-100: #ffe6ec;
  --color-nipple-200: #fdccd7;
  --color-nipple-300: #ebb4c1;
  --color-nipple-400: #cf93a3;
  --color-nipple-500: #b57888;
  --color-nipple-600: #975d6d;
  --color-nipple-700: #7b4755;
  --color-nipple-800: #633542;
  --color-nipple-900: #4d2732;
  --color-nipple-950: #32161e;
  --color-velour-scar: #885258;
  --color-velour-scar-50: #fff1f2;
  --color-velour-scar-100: #ffe1e3;
  --color-velour-scar-200: #f6c6ca;
  --color-velour-scar-300: #e2acb1;
  --color-velour-scar-400: #c38a8f;
  --color-velour-scar-500: #a66d73;
  --color-velour-scar-600: #885258;
  --color-velour-scar-700: #6e3f45;
  --color-velour-scar-800: #583035;
  --color-velour-scar-900: #462428;
  --color-velour-scar-950: #2d1518;
  --color-hot-chocolate: #5f393f;
  --color-hot-chocolate-50: #fff1f3;
  --color-hot-chocolate-100: #ffe3e6;
  --color-hot-chocolate-200: #f1cdd1;
  --color-hot-chocolate-300: #deb6bb;
  --color-hot-chocolate-400: #c1969b;
  --color-hot-chocolate-500: #a67b81;
  --color-hot-chocolate-600: #8a6167;
  --color-hot-chocolate-700: #714c52;
  --color-hot-chocolate-800: #5f393f;
  --color-hot-chocolate-900: #482c31;
  --color-hot-chocolate-950: #2f1b1e;
}