In Good Taste to Sweetly Color Palette

About this palette

In Good Taste to Sweetly is a 4-color pastel, light palette: #B7D5A8 (In Good Taste), #C4CBFF (Innocent Snowdrop), #FCD79D (Caramel Finish), #FFE4F1 (Sweetly). It mixes green, purple, yellow, white tones and feels cool overall. The strongest text pairing is #B7D5A8 on #FFE4F1 with a contrast ratio of 1.35:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
In Good Taste	rgb(183, 213, 168)	hsl(100, 35%, 75%)
Innocent Snowdrop	rgb(196, 203, 255)	hsl(233, 100%, 88%)
Caramel Finish	rgb(252, 215, 157)	hsl(37, 94%, 80%)
Sweetly	rgb(255, 228, 241)	hsl(331, 100%, 95%)

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

/* In Good Taste to Sweetly — https://swatchly.xyz/palette/b7d5a8-c4cbff-fcd79d-ffe4f1 */
:root {
  --in-good-taste: #b7d5a8;
  --innocent-snowdrop: #c4cbff;
  --caramel-finish: #fcd79d;
  --sweetly: #ffe4f1;
}

Tailwind CSS v4

/* In Good Taste to Sweetly — https://swatchly.xyz/palette/b7d5a8-c4cbff-fcd79d-ffe4f1 */
@theme {
  --color-in-good-taste: #b7d5a8;
  --color-in-good-taste-50: #f1ffeb;
  --color-in-good-taste-100: #e6f8de;
  --color-in-good-taste-200: #d2e7c8;
  --color-in-good-taste-300: #b7d5a8;
  --color-in-good-taste-400: #97b38a;
  --color-in-good-taste-500: #7a966c;
  --color-in-good-taste-600: #5e7951;
  --color-in-good-taste-700: #48603b;
  --color-in-good-taste-800: #364b2a;
  --color-in-good-taste-900: #27391e;
  --color-in-good-taste-950: #172310;
  --color-innocent-snowdrop: #c4cbff;
  --color-innocent-snowdrop-50: #eceeff;
  --color-innocent-snowdrop-100: #dee2ff;
  --color-innocent-snowdrop-200: #c4cbff;
  --color-innocent-snowdrop-300: #b0b7e4;
  --color-innocent-snowdrop-400: #9298c8;
  --color-innocent-snowdrop-500: #787eae;
  --color-innocent-snowdrop-600: #606592;
  --color-innocent-snowdrop-700: #4c5079;
  --color-innocent-snowdrop-800: #3b3f63;
  --color-innocent-snowdrop-900: #2d304e;
  --color-innocent-snowdrop-950: #1b1d33;
  --color-caramel-finish: #fcd79d;
  --color-caramel-finish-50: #fff8ed;
  --color-caramel-finish-100: #ffedd2;
  --color-caramel-finish-200: #fcd79d;
  --color-caramel-finish-300: #dfc192;
  --color-caramel-finish-400: #c19f6a;
  --color-caramel-finish-500: #a5834b;
  --color-caramel-finish-600: #886730;
  --color-caramel-finish-700: #6e501c;
  --color-caramel-finish-800: #573d0d;
  --color-caramel-finish-900: #442e04;
  --color-caramel-finish-950: #2c1c01;
  --color-sweetly: #ffe4f1;
  --color-sweetly-50: #fff2f8;
  --color-sweetly-100: #ffe4f1;
  --color-sweetly-200: #e6d2dc;
  --color-sweetly-300: #d1bbc5;
  --color-sweetly-400: #b29aa6;
  --color-sweetly-500: #977f8a;
  --color-sweetly-600: #7b6470;
  --color-sweetly-700: #634e59;
  --color-sweetly-800: #4e3c45;
  --color-sweetly-900: #3d2e35;
  --color-sweetly-950: #261c21;
}