Lavender Candy to Evergreen color palette

FFB0D9Lavender Candy 9D8FFFPeriwinkle 7867E6Candy Grape Fizz 786D00Muddy Brown 005844Evergreen

About this palette

Lavender Candy to Evergreen is a 5-color cool palette: #FFB0D9 (Lavender Candy), #9D8FFF (Periwinkle), #7867E6 (Candy Grape Fizz), #786D00 (Muddy Brown), #005844 (Evergreen). It mixes pink, purple, brown, turquoise tones and feels cool overall. The strongest text pairing is #FFB0D9 on #005844 with a contrast ratio of 5.03:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lavender Candy	rgb(255, 176, 217)	hsl(329, 100%, 85%)
Periwinkle	rgb(157, 143, 255)	hsl(248, 100%, 78%)
Candy Grape Fizz	rgb(120, 103, 230)	hsl(248, 72%, 65%)
Muddy Brown	rgb(120, 109, 0)	hsl(54, 100%, 24%)
Evergreen	rgb(0, 88, 68)	hsl(166, 100%, 17%)

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.

Aa5.03:1 Good#FFB0D9 on #005844
Aa5.03:1 Good#005844 on #FFB0D9
Aa3.15:1 Poor#9D8FFF on #005844
Aa3.15:1 Poor#005844 on #9D8FFF
Aa3.13:1 Poor#FFB0D9 on #786D00
Aa3.13:1 Poor#786D00 on #FFB0D9

Color blindness preview

CSS variables

/* Lavender Candy to Evergreen — https://swatchly.xyz/palette/ffb0d9-9d8fff-7867e6-786d00-005844 */
:root {
  --lavender-candy: #ffb0d9;
  --periwinkle: #9d8fff;
  --candy-grape-fizz: #7867e6;
  --muddy-brown: #786d00;
  --evergreen: #005844;
}

Tailwind CSS v4

/* Lavender Candy to Evergreen — https://swatchly.xyz/palette/ffb0d9-9d8fff-7867e6-786d00-005844 */
@theme {
  --color-lavender-candy: #ffb0d9;
  --color-lavender-candy-50: #fff9fc;
  --color-lavender-candy-100: #ffedf6;
  --color-lavender-candy-200: #ffd2e8;
  --color-lavender-candy-300: #ffb0d9;
  --color-lavender-candy-400: #d891b6;
  --color-lavender-candy-500: #bb7299;
  --color-lavender-candy-600: #9c567c;
  --color-lavender-candy-700: #7f4063;
  --color-lavender-candy-800: #652e4d;
  --color-lavender-candy-900: #4e203a;
  --color-lavender-candy-950: #331225;
  --color-periwinkle: #9d8fff;
  --color-periwinkle-50: #f4f4ff;
  --color-periwinkle-100: #e9e9ff;
  --color-periwinkle-200: #d4d2ff;
  --color-periwinkle-300: #bdb7ff;
  --color-periwinkle-400: #9d8fff;
  --color-periwinkle-500: #8273e0;
  --color-periwinkle-600: #6958c0;
  --color-periwinkle-700: #5342a1;
  --color-periwinkle-800: #413084;
  --color-periwinkle-900: #32236a;
  --color-periwinkle-950: #1f1447;
  --color-candy-grape-fizz: #7867e6;
  --color-candy-grape-fizz-50: #f2f2ff;
  --color-candy-grape-fizz-100: #e6e6ff;
  --color-candy-grape-fizz-200: #ceceff;
  --color-candy-grape-fizz-300: #b5b2ff;
  --color-candy-grape-fizz-400: #9387ff;
  --color-candy-grape-fizz-500: #7867e6;
  --color-candy-grape-fizz-600: #614dc6;
  --color-candy-grape-fizz-700: #4d39a7;
  --color-candy-grape-fizz-800: #3c298a;
  --color-candy-grape-fizz-900: #2f1d70;
  --color-candy-grape-fizz-950: #1d104c;
  --color-muddy-brown: #786d00;
  --color-muddy-brown-50: #fcf8c9;
  --color-muddy-brown-100: #f3eeb9;
  --color-muddy-brown-200: #e1da9b;
  --color-muddy-brown-300: #ccc37a;
  --color-muddy-brown-400: #aea450;
  --color-muddy-brown-500: #93882d;
  --color-muddy-brown-600: #786d00;
  --color-muddy-brown-700: #5f5600;
  --color-muddy-brown-800: #4a4300;
  --color-muddy-brown-900: #393300;
  --color-muddy-brown-950: #242000;
  --color-evergreen: #005844;
  --color-evergreen-50: #dafff1;
  --color-evergreen-100: #cbf7e6;
  --color-evergreen-200: #b1e5d2;
  --color-evergreen-300: #96d1bc;
  --color-evergreen-400: #71b59e;
  --color-evergreen-500: #549b84;
  --color-evergreen-600: #3a816b;
  --color-evergreen-700: #256a56;
  --color-evergreen-800: #005844;
  --color-evergreen-900: #094434;
  --color-evergreen-950: #012c20;
}