Sweetly to Hello Spring Color Palette

About this palette

Sweetly to Hello Spring is a 5-color cool, neon palette: #FFE5ED (Sweetly), #006E22 (Enchanted Glen), #00353A (Elite Teal), #F43298 (Prickly Pink), #32E670 (Hello Spring). It mixes white, green, turquoise, pink tones and feels cool overall. The strongest text pairing is #FFE5ED on #00353A with a contrast ratio of 11.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweetly	rgb(255, 229, 237)	hsl(342, 100%, 95%)
Enchanted Glen	rgb(0, 110, 34)	hsl(139, 100%, 22%)
Elite Teal	rgb(0, 53, 58)	hsl(185, 100%, 11%)
Prickly Pink	rgb(244, 50, 152)	hsl(328, 90%, 58%)
Hello Spring	rgb(50, 230, 112)	hsl(141, 78%, 55%)

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.

Aa11.26:1 Very good#FFE5ED on #00353A
Aa11.26:1 Very good#00353A on #FFE5ED
Aa8.08:1 Very good#00353A on #32E670
Aa8.08:1 Very good#32E670 on #00353A
Aa5.43:1 Good#FFE5ED on #006E22
Aa5.43:1 Good#006E22 on #FFE5ED
Aa3.90:1 Poor#006E22 on #32E670
Aa3.90:1 Poor#32E670 on #006E22

Color blindness preview

CSS variables

/* Sweetly to Hello Spring — https://swatchly.xyz/palette/ffe5ed-006e22-00353a-f43298-32e670 */
:root {
  --sweetly: #ffe5ed;
  --enchanted-glen: #006e22;
  --elite-teal: #00353a;
  --prickly-pink: #f43298;
  --hello-spring: #32e670;
}

Tailwind CSS v4

/* Sweetly to Hello Spring — https://swatchly.xyz/palette/ffe5ed-006e22-00353a-f43298-32e670 */
@theme {
  --color-sweetly: #ffe5ed;
  --color-sweetly-50: #fff3f7;
  --color-sweetly-100: #ffe5ed;
  --color-sweetly-200: #e6d3d9;
  --color-sweetly-300: #d1bcc2;
  --color-sweetly-400: #b29ba2;
  --color-sweetly-500: #977f87;
  --color-sweetly-600: #7b656c;
  --color-sweetly-700: #634f55;
  --color-sweetly-800: #4e3d42;
  --color-sweetly-900: #3d2e33;
  --color-sweetly-950: #261c1f;
  --color-enchanted-glen: #006e22;
  --color-enchanted-glen-50: #e0ffe2;
  --color-enchanted-glen-100: #c6fcc9;
  --color-enchanted-glen-200: #abecb0;
  --color-enchanted-glen-300: #8ed894;
  --color-enchanted-glen-400: #67bb70;
  --color-enchanted-glen-500: #47a053;
  --color-enchanted-glen-600: #2a853a;
  --color-enchanted-glen-700: #006e22;
  --color-enchanted-glen-800: #005619;
  --color-enchanted-glen-900: #004311;
  --color-enchanted-glen-950: #002a08;
  --color-elite-teal: #00353a;
  --color-elite-teal-50: #e0fbfe;
  --color-elite-teal-100: #d4f2f5;
  --color-elite-teal-200: #bbdfe3;
  --color-elite-teal-300: #a1cace;
  --color-elite-teal-400: #7caaaf;
  --color-elite-teal-500: #5f8d93;
  --color-elite-teal-600: #457277;
  --color-elite-teal-700: #30595e;
  --color-elite-teal-800: #214448;
  --color-elite-teal-900: #00353a;
  --color-elite-teal-950: #0a1f21;
  --color-prickly-pink: #f43298;
  --color-prickly-pink-50: #fff3f7;
  --color-prickly-pink-100: #ffe7f0;
  --color-prickly-pink-200: #ffccdf;
  --color-prickly-pink-300: #ffaacc;
  --color-prickly-pink-400: #ff70b0;
  --color-prickly-pink-500: #f43298;
  --color-prickly-pink-600: #ce007b;
  --color-prickly-pink-700: #a50061;
  --color-prickly-pink-800: #82004c;
  --color-prickly-pink-900: #650039;
  --color-prickly-pink-950: #410023;
  --color-hello-spring: #32e670;
  --color-hello-spring-50: #e1ffe5;
  --color-hello-spring-100: #bdffc9;
  --color-hello-spring-200: #87f59f;
  --color-hello-spring-300: #32e670;
  --color-hello-spring-400: #00c357;
  --color-hello-spring-500: #00a247;
  --color-hello-spring-600: #008338;
  --color-hello-spring-700: #00682b;
  --color-hello-spring-800: #005120;
  --color-hello-spring-900: #003f17;
  --color-hello-spring-950: #00280c;
}