Mellow Mint to Royal Lavender color palette

D9EAC2Mellow Mint D297E1Somewhere in a Fairytale 8C73A2Aster 3D5C29Turf 25361DDarkest Forest 8556ABRoyal Lavender

Open in generator Export PNG, PDF, ASE…

About this palette

Mellow Mint to Royal Lavender is a 6-color cool palette: #D9EAC2 (Mellow Mint), #D297E1 (Somewhere in a Fairytale), #8C73A2 (Aster), #3D5C29 (Turf), #25361D (Darkest Forest), #8556AB (Royal Lavender). It mixes green, purple tones and feels cool overall. The strongest text pairing is #D9EAC2 on #25361D with a contrast ratio of 10.16:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mellow Mint	rgb(217, 234, 194)	hsl(85, 49%, 84%)
Somewhere in a Fairytale	rgb(210, 151, 225)	hsl(288, 55%, 74%)
Aster	rgb(140, 115, 162)	hsl(272, 20%, 54%)
Turf	rgb(61, 92, 41)	hsl(96, 38%, 26%)
Darkest Forest	rgb(37, 54, 29)	hsl(101, 30%, 16%)
Royal Lavender	rgb(133, 86, 171)	hsl(273, 34%, 50%)

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.16:1 Very good#D9EAC2 on #25361D
Aa10.16:1 Very good#25361D on #D9EAC2
Aa5.97:1 Good#D9EAC2 on #3D5C29
Aa5.97:1 Good#3D5C29 on #D9EAC2
Aa5.70:1 Good#D297E1 on #25361D
Aa5.70:1 Good#25361D on #D297E1
Aa4.21:1 Poor#D9EAC2 on #8556AB
Aa4.21:1 Poor#8556AB on #D9EAC2

Color blindness preview

CSS variables

/* Mellow Mint to Royal Lavender — https://swatchly.xyz/palette/d9eac2-d297e1-8c73a2-3d5c29-25361d-8556ab */
:root {
  --mellow-mint: #d9eac2;
  --somewhere-in-a-fairytale: #d297e1;
  --aster: #8c73a2;
  --turf: #3d5c29;
  --darkest-forest: #25361d;
  --royal-lavender: #8556ab;
}

Tailwind CSS v4

/* Mellow Mint to Royal Lavender — https://swatchly.xyz/palette/d9eac2-d297e1-8c73a2-3d5c29-25361d-8556ab */
@theme {
  --color-mellow-mint: #d9eac2;
  --color-mellow-mint-50: #e8f2da;
  --color-mellow-mint-100: #d9eac2;
  --color-mellow-mint-200: #c9d6b8;
  --color-mellow-mint-300: #b3c2a0;
  --color-mellow-mint-400: #95a480;
  --color-mellow-mint-500: #7b8a65;
  --color-mellow-mint-600: #62714e;
  --color-mellow-mint-700: #4e5b3b;
  --color-mellow-mint-800: #3c472b;
  --color-mellow-mint-900: #2d371f;
  --color-mellow-mint-950: #1b2211;
  --color-somewhere-in-a-fairytale: #d297e1;
  --color-somewhere-in-a-fairytale-50: #fef8ff;
  --color-somewhere-in-a-fairytale-100: #fceeff;
  --color-somewhere-in-a-fairytale-200: #f6d4ff;
  --color-somewhere-in-a-fairytale-300: #eabaf6;
  --color-somewhere-in-a-fairytale-400: #d297e1;
  --color-somewhere-in-a-fairytale-500: #b279c0;
  --color-somewhere-in-a-fairytale-600: #935ca1;
  --color-somewhere-in-a-fairytale-700: #774484;
  --color-somewhere-in-a-fairytale-800: #5e3169;
  --color-somewhere-in-a-fairytale-900: #482352;
  --color-somewhere-in-a-fairytale-950: #2d1233;
  --color-aster: #8c73a2;
  --color-aster-50: #f8f0ff;
  --color-aster-100: #f1e2ff;
  --color-aster-200: #decaf1;
  --color-aster-300: #c8b1dd;
  --color-aster-400: #a88fbf;
  --color-aster-500: #8c73a2;
  --color-aster-600: #725b87;
  --color-aster-700: #5c466e;
  --color-aster-800: #493658;
  --color-aster-900: #392946;
  --color-aster-950: #24192e;
  --color-turf: #3d5c29;
  --color-turf-50: #e8fddd;
  --color-turf-100: #ddf4d0;
  --color-turf-200: #c6e1b7;
  --color-turf-300: #accb9b;
  --color-turf-400: #8aab77;
  --color-turf-500: #6e8f5a;
  --color-turf-600: #547341;
  --color-turf-700: #3d5c29;
  --color-turf-800: #2f4820;
  --color-turf-900: #233715;
  --color-turf-950: #14230a;
  --color-darkest-forest: #25361d;
  --color-darkest-forest-50: #edfae8;
  --color-darkest-forest-100: #e2f0dd;
  --color-darkest-forest-200: #cdddc6;
  --color-darkest-forest-300: #b5c7ad;
  --color-darkest-forest-400: #94a88c;
  --color-darkest-forest-500: #788c6f;
  --color-darkest-forest-600: #5e7156;
  --color-darkest-forest-700: #485941;
  --color-darkest-forest-800: #374530;
  --color-darkest-forest-900: #25361d;
  --color-darkest-forest-950: #182014;
  --color-royal-lavender: #8556ab;
  --color-royal-lavender-50: #f8f2ff;
  --color-royal-lavender-100: #f2e6ff;
  --color-royal-lavender-200: #e6ccff;
  --color-royal-lavender-300: #d7aefc;
  --color-royal-lavender-400: #ba8de2;
  --color-royal-lavender-500: #a070c7;
  --color-royal-lavender-600: #8556ab;
  --color-royal-lavender-700: #6c418d;
  --color-royal-lavender-800: #562f73;
  --color-royal-lavender-900: #43225c;
  --color-royal-lavender-950: #2b133c;
}