Sugarwinkle to Drops of God Color Palette

About this palette

Sugarwinkle to Drops of God is a 4-color palette: #FFC9DD (Sugarwinkle), #00A6F2 (Fresh Blue of Bel Air), #628000 (Enchanted Forest), #531B35 (Drops of God). It mixes pink, blue, green, red tones and feels balanced overall. The strongest text pairing is #FFC9DD on #531B35 with a contrast ratio of 9.30:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugarwinkle	rgb(255, 201, 221)	hsl(338, 100%, 89%)
Fresh Blue of Bel Air	rgb(0, 166, 242)	hsl(199, 100%, 47%)
Enchanted Forest	rgb(98, 128, 0)	hsl(74, 100%, 25%)
Drops of God	rgb(83, 27, 53)	hsl(332, 51%, 22%)

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.30:1 Very good#FFC9DD on #531B35
Aa9.30:1 Very good#531B35 on #FFC9DD
Aa4.91:1 Good#00A6F2 on #531B35
Aa4.91:1 Good#531B35 on #00A6F2
Aa3.18:1 Poor#FFC9DD on #628000
Aa3.18:1 Poor#628000 on #FFC9DD

Color blindness preview

CSS variables

/* Sugarwinkle to Drops of God — https://swatchly.xyz/palette/ffc9dd-00a6f2-628000-531b35 */
:root {
  --sugarwinkle: #ffc9dd;
  --fresh-blue-of-bel-air: #00a6f2;
  --enchanted-forest: #628000;
  --drops-of-god: #531b35;
}

Tailwind CSS v4

/* Sugarwinkle to Drops of God — https://swatchly.xyz/palette/ffc9dd-00a6f2-628000-531b35 */
@theme {
  --color-sugarwinkle: #ffc9dd;
  --color-sugarwinkle-50: #fff4f8;
  --color-sugarwinkle-100: #ffe6ef;
  --color-sugarwinkle-200: #ffc9dd;
  --color-sugarwinkle-300: #e2b5c5;
  --color-sugarwinkle-400: #c493a6;
  --color-sugarwinkle-500: #a8778a;
  --color-sugarwinkle-600: #8b5d6f;
  --color-sugarwinkle-700: #714758;
  --color-sugarwinkle-800: #5a3644;
  --color-sugarwinkle-900: #462834;
  --color-sugarwinkle-950: #2d1720;
  --color-fresh-blue-of-bel-air: #00a6f2;
  --color-fresh-blue-of-bel-air-50: #e8f5ff;
  --color-fresh-blue-of-bel-air-100: #d2ecff;
  --color-fresh-blue-of-bel-air-200: #a8dbff;
  --color-fresh-blue-of-bel-air-300: #70c6ff;
  --color-fresh-blue-of-bel-air-400: #00a6f2;
  --color-fresh-blue-of-bel-air-500: #008aca;
  --color-fresh-blue-of-bel-air-600: #006fa4;
  --color-fresh-blue-of-bel-air-700: #005984;
  --color-fresh-blue-of-bel-air-800: #004569;
  --color-fresh-blue-of-bel-air-900: #003653;
  --color-fresh-blue-of-bel-air-950: #002236;
  --color-enchanted-forest: #628000;
  --color-enchanted-forest-50: #eaffc7;
  --color-enchanted-forest-100: #e0f7b9;
  --color-enchanted-forest-200: #cce69c;
  --color-enchanted-forest-300: #b5d27d;
  --color-enchanted-forest-400: #95b552;
  --color-enchanted-forest-500: #7b9a2e;
  --color-enchanted-forest-600: #628000;
  --color-enchanted-forest-700: #4d6600;
  --color-enchanted-forest-800: #3c4f00;
  --color-enchanted-forest-900: #2d3d00;
  --color-enchanted-forest-950: #1b2600;
  --color-drops-of-god: #531b35;
  --color-drops-of-god-50: #fff1f6;
  --color-drops-of-god-100: #ffe2ec;
  --color-drops-of-god-200: #fcc6da;
  --color-drops-of-god-300: #e9adc4;
  --color-drops-of-god-400: #cc8ba5;
  --color-drops-of-god-500: #b06f89;
  --color-drops-of-god-600: #93556e;
  --color-drops-of-god-700: #784158;
  --color-drops-of-god-800: #603044;
  --color-drops-of-god-900: #531b35;
  --color-drops-of-god-950: #311420;
}