Pastel Green to Midnight Pines Color Palette

About this palette

Pastel Green to Midnight Pines is a 4-color vibrant, cool palette: #77E37D (Pastel Green), #7866FD (Candy Grape Fizz), #9F007D (Persian Luxury Purple), #122200 (Midnight Pines). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #77E37D on #122200 with a contrast ratio of 10.42:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Green	rgb(119, 227, 125)	hsl(123, 66%, 68%)
Candy Grape Fizz	rgb(120, 102, 253)	hsl(247, 97%, 70%)
Persian Luxury Purple	rgb(159, 0, 125)	hsl(313, 100%, 31%)
Midnight Pines	rgb(18, 34, 0)	hsl(88, 100%, 7%)

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.

Aa10.42:1 Very good#77E37D on #122200
Aa10.42:1 Very good#122200 on #77E37D
Aa4.72:1 Good#77E37D on #9F007D
Aa4.72:1 Good#9F007D on #77E37D
Aa4.08:1 Poor#7866FD on #122200
Aa4.08:1 Poor#122200 on #7866FD

Color blindness preview

CSS variables

/* Pastel Green to Midnight Pines — https://swatchly.xyz/palette/77e37d-7866fd-9f007d-122200 */
:root {
  --pastel-green: #77e37d;
  --candy-grape-fizz: #7866fd;
  --persian-luxury-purple: #9f007d;
  --midnight-pines: #122200;
}

Tailwind CSS v4

/* Pastel Green to Midnight Pines — https://swatchly.xyz/palette/77e37d-7866fd-9f007d-122200 */
@theme {
  --color-pastel-green: #77e37d;
  --color-pastel-green-50: #eaffe9;
  --color-pastel-green-100: #ccffcc;
  --color-pastel-green-200: #a8f2aa;
  --color-pastel-green-300: #77e37d;
  --color-pastel-green-400: #5bc061;
  --color-pastel-green-500: #33a340;
  --color-pastel-green-600: #018622;
  --color-pastel-green-700: #006a18;
  --color-pastel-green-800: #005311;
  --color-pastel-green-900: #003f0a;
  --color-pastel-green-950: #002804;
  --color-candy-grape-fizz: #7866fd;
  --color-candy-grape-fizz-50: #f3f3ff;
  --color-candy-grape-fizz-100: #e7e8ff;
  --color-candy-grape-fizz-200: #cfd1ff;
  --color-candy-grape-fizz-300: #b5b6ff;
  --color-candy-grape-fizz-400: #938eff;
  --color-candy-grape-fizz-500: #7866fd;
  --color-candy-grape-fizz-600: #614adc;
  --color-candy-grape-fizz-700: #4d34ba;
  --color-candy-grape-fizz-800: #3c239a;
  --color-candy-grape-fizz-900: #2e167d;
  --color-candy-grape-fizz-950: #1c0a55;
  --color-persian-luxury-purple: #9f007d;
  --color-persian-luxury-purple-50: #fff0f9;
  --color-persian-luxury-purple-100: #ffe1f3;
  --color-persian-luxury-purple-200: #ffc4e9;
  --color-persian-luxury-purple-300: #ff9fde;
  --color-persian-luxury-purple-400: #f26cc9;
  --color-persian-luxury-purple-500: #d74baf;
  --color-persian-luxury-purple-600: #b92d94;
  --color-persian-luxury-purple-700: #9f007d;
  --color-persian-luxury-purple-800: #7e0062;
  --color-persian-luxury-purple-900: #63004c;
  --color-persian-luxury-purple-950: #410031;
  --color-midnight-pines: #122200;
  --color-midnight-pines-50: #edfae3;
  --color-midnight-pines-100: #e2f1d6;
  --color-midnight-pines-200: #cddebf;
  --color-midnight-pines-300: #b5c8a5;
  --color-midnight-pines-400: #95aa83;
  --color-midnight-pines-500: #798e66;
  --color-midnight-pines-600: #5f724d;
  --color-midnight-pines-700: #495a38;
  --color-midnight-pines-800: #374629;
  --color-midnight-pines-900: #29351c;
  --color-midnight-pines-950: #122200;
}