Hard Candy to Herbal Vapours Color Palette

About this palette

Hard Candy to Herbal Vapours is a 4-color pastel, light palette: #FBBAC1 (Hard Candy), #E3C6F1 (Prom Corsage), #FFE1BF (Bisque), #DCFED0 (Herbal Vapours). It mixes pink, purple, orange, green tones and feels balanced overall. The strongest text pairing is #FBBAC1 on #DCFED0 with a contrast ratio of 1.48:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hard Candy	rgb(251, 186, 193)	hsl(354, 89%, 86%)
Prom Corsage	rgb(227, 198, 241)	hsl(280, 61%, 86%)
Bisque	rgb(255, 225, 191)	hsl(32, 100%, 87%)
Herbal Vapours	rgb(220, 254, 208)	hsl(104, 96%, 91%)

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 Herbal Vapours — https://swatchly.xyz/palette/fbbac1-e3c6f1-ffe1bf-dcfed0 */
:root {
  --hard-candy: #fbbac1;
  --prom-corsage: #e3c6f1;
  --bisque: #ffe1bf;
  --herbal-vapours: #dcfed0;
}

Tailwind CSS v4

/* Hard Candy to Herbal Vapours — https://swatchly.xyz/palette/fbbac1-e3c6f1-ffe1bf-dcfed0 */
@theme {
  --color-hard-candy: #fbbac1;
  --color-hard-candy-50: #ffe8ea;
  --color-hard-candy-100: #ffd8db;
  --color-hard-candy-200: #fbbac1;
  --color-hard-candy-300: #e0a8ae;
  --color-hard-candy-400: #c48990;
  --color-hard-candy-500: #aa6f76;
  --color-hard-candy-600: #8e575e;
  --color-hard-candy-700: #75434a;
  --color-hard-candy-800: #5f3339;
  --color-hard-candy-900: #4b262b;
  --color-hard-candy-950: #31161a;
  --color-prom-corsage: #e3c6f1;
  --color-prom-corsage-50: #f9ecff;
  --color-prom-corsage-100: #f2dffb;
  --color-prom-corsage-200: #e3c6f1;
  --color-prom-corsage-300: #cbb2d7;
  --color-prom-corsage-400: #ad93ba;
  --color-prom-corsage-500: #9378a0;
  --color-prom-corsage-600: #785f84;
  --color-prom-corsage-700: #614a6c;
  --color-prom-corsage-800: #4d3957;
  --color-prom-corsage-900: #3c2b44;
  --color-prom-corsage-950: #261a2c;
  --color-bisque: #ffe1bf;
  --color-bisque-50: #ffeedc;
  --color-bisque-100: #ffe1bf;
  --color-bisque-200: #e6d0b6;
  --color-bisque-300: #d2b99d;
  --color-bisque-400: #b59a7b;
  --color-bisque-500: #9a7f60;
  --color-bisque-600: #806648;
  --color-bisque-700: #685035;
  --color-bisque-800: #523e26;
  --color-bisque-900: #402f1b;
  --color-bisque-950: #291d0e;
  --color-herbal-vapours: #dcfed0;
  --color-herbal-vapours-50: #dcfed0;
  --color-herbal-vapours-100: #dbf0d3;
  --color-herbal-vapours-200: #c5debd;
  --color-herbal-vapours-300: #adc9a3;
  --color-herbal-vapours-400: #8dab82;
  --color-herbal-vapours-500: #719066;
  --color-herbal-vapours-600: #58754e;
  --color-herbal-vapours-700: #435e3a;
  --color-herbal-vapours-800: #334a2a;
  --color-herbal-vapours-900: #26391e;
  --color-herbal-vapours-950: #162410;
}