Hard Candy to Cotton Ball Color Palette

About this palette

Hard Candy to Cotton Ball is a 5-color pastel, light palette: #FFBCB1 (Hard Candy), #E4CD92 (Honeycomb Glow), #AFF1F6 (Ice Citadel), #DCDEFF (Icy Plains), #EFF6FF (Cotton Ball). It mixes pink, yellow, turquoise, purple, white tones and feels balanced overall. The strongest text pairing is #FFBCB1 on #EFF6FF with a contrast ratio of 1.48:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hard Candy	rgb(255, 188, 177)	hsl(8, 100%, 85%)
Honeycomb Glow	rgb(228, 205, 146)	hsl(43, 60%, 73%)
Ice Citadel	rgb(175, 241, 246)	hsl(184, 80%, 83%)
Icy Plains	rgb(220, 222, 255)	hsl(237, 100%, 93%)
Cotton Ball	rgb(239, 246, 255)	hsl(214, 100%, 97%)

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.

Color blindness preview

CSS variables

/* Hard Candy to Cotton Ball — https://swatchly.xyz/palette/ffbcb1-e4cd92-aff1f6-dcdeff-eff6ff */
:root {
  --hard-candy: #ffbcb1;
  --honeycomb-glow: #e4cd92;
  --ice-citadel: #aff1f6;
  --icy-plains: #dcdeff;
  --cotton-ball: #eff6ff;
}

Tailwind CSS v4

/* Hard Candy to Cotton Ball — https://swatchly.xyz/palette/ffbcb1-e4cd92-aff1f6-dcdeff-eff6ff */
@theme {
  --color-hard-candy: #ffbcb1;
  --color-hard-candy-50: #ffeae6;
  --color-hard-candy-100: #ffdad4;
  --color-hard-candy-200: #ffbcb1;
  --color-hard-candy-300: #e4aaa0;
  --color-hard-candy-400: #c88a80;
  --color-hard-candy-500: #ad7066;
  --color-hard-candy-600: #91584f;
  --color-hard-candy-700: #77443c;
  --color-hard-candy-800: #61342d;
  --color-hard-candy-900: #4d2621;
  --color-hard-candy-950: #321612;
  --color-honeycomb-glow: #e4cd92;
  --color-honeycomb-glow-50: #fceecc;
  --color-honeycomb-glow-100: #f2e3bc;
  --color-honeycomb-glow-200: #e4cd92;
  --color-honeycomb-glow-300: #ccb885;
  --color-honeycomb-glow-400: #af9a63;
  --color-honeycomb-glow-500: #968047;
  --color-honeycomb-glow-600: #7b672f;
  --color-honeycomb-glow-700: #64521d;
  --color-honeycomb-glow-800: #514010;
  --color-honeycomb-glow-900: #3f3107;
  --color-honeycomb-glow-950: #281e02;
  --color-ice-citadel: #aff1f6;
  --color-ice-citadel-50: #d1f7fa;
  --color-ice-citadel-100: #aff1f6;
  --color-ice-citadel-200: #aadcdf;
  --color-ice-citadel-300: #90c7cc;
  --color-ice-citadel-400: #6caaaf;
  --color-ice-citadel-500: #509095;
  --color-ice-citadel-600: #37767b;
  --color-ice-citadel-700: #235f64;
  --color-ice-citadel-800: #144b4f;
  --color-ice-citadel-900: #0a3a3d;
  --color-ice-citadel-950: #032427;
  --color-icy-plains: #dcdeff;
  --color-icy-plains-50: #fbfbff;
  --color-icy-plains-100: #f1f2ff;
  --color-icy-plains-200: #dcdeff;
  --color-icy-plains-300: #c5c6e1;
  --color-icy-plains-400: #a3a5c2;
  --color-icy-plains-500: #8688a6;
  --color-icy-plains-600: #6a6c88;
  --color-icy-plains-700: #53546e;
  --color-icy-plains-800: #3f4056;
  --color-icy-plains-900: #303144;
  --color-icy-plains-950: #1d1e2b;
  --color-cotton-ball: #eff6ff;
  --color-cotton-ball-50: #eff6ff;
  --color-cotton-ball-100: #e7ecf1;
  --color-cotton-ball-200: #d3d8df;
  --color-cotton-ball-300: #bcc2c9;
  --color-cotton-ball-400: #9ca2aa;
  --color-cotton-ball-500: #81878f;
  --color-cotton-ball-600: #666c74;
  --color-cotton-ball-700: #50565d;
  --color-cotton-ball-800: #3e4349;
  --color-cotton-ball-900: #2f3338;
  --color-cotton-ball-950: #1d2023;
}