Dark Dreams to Pink Lemonade color palette

391D63Dark Dreams 006B49Into the Green 985FE0Legendary Lavender 60D57CElectric Lettuce FFE9EAPink Lemonade

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Dreams to Pink Lemonade is a 5-color cool palette: #391D63 (Dark Dreams), #006B49 (Into the Green), #985FE0 (Legendary Lavender), #60D57C (Electric Lettuce), #FFE9EA (Pink Lemonade). It mixes purple, green, white tones and feels cool overall. The strongest text pairing is #391D63 on #FFE9EA with a contrast ratio of 11.83:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Dreams	rgb(57, 29, 99)	hsl(264, 55%, 25%)
Into the Green	rgb(0, 107, 73)	hsl(161, 100%, 21%)
Legendary Lavender	rgb(152, 95, 224)	hsl(267, 68%, 63%)
Electric Lettuce	rgb(96, 213, 124)	hsl(134, 58%, 61%)
Pink Lemonade	rgb(255, 233, 234)	hsl(357, 100%, 96%)

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.83:1 Very good#391D63 on #FFE9EA
Aa11.83:1 Very good#FFE9EA on #391D63
Aa7.39:1 Very good#391D63 on #60D57C
Aa7.39:1 Very good#60D57C on #391D63
Aa5.66:1 Good#006B49 on #FFE9EA
Aa5.66:1 Good#FFE9EA on #006B49
Aa3.58:1 Poor#985FE0 on #FFE9EA
Aa3.58:1 Poor#FFE9EA on #985FE0

Color blindness preview

CSS variables

/* Dark Dreams to Pink Lemonade — https://swatchly.xyz/palette/391d63-006b49-985fe0-60d57c-ffe9ea */
:root {
  --dark-dreams: #391d63;
  --into-the-green: #006b49;
  --legendary-lavender: #985fe0;
  --electric-lettuce: #60d57c;
  --pink-lemonade: #ffe9ea;
}

Tailwind CSS v4

/* Dark Dreams to Pink Lemonade — https://swatchly.xyz/palette/391d63-006b49-985fe0-60d57c-ffe9ea */
@theme {
  --color-dark-dreams: #391d63;
  --color-dark-dreams-50: #f6f3ff;
  --color-dark-dreams-100: #ede7ff;
  --color-dark-dreams-200: #dccfff;
  --color-dark-dreams-300: #c8b3fa;
  --color-dark-dreams-400: #a991df;
  --color-dark-dreams-500: #8e75c3;
  --color-dark-dreams-600: #735aa4;
  --color-dark-dreams-700: #5b4487;
  --color-dark-dreams-800: #47336d;
  --color-dark-dreams-900: #391d63;
  --color-dark-dreams-950: #211538;
  --color-into-the-green: #006b49;
  --color-into-the-green-50: #dcffed;
  --color-into-the-green-100: #c6f9df;
  --color-into-the-green-200: #ace8ca;
  --color-into-the-green-300: #8ed5b3;
  --color-into-the-green-400: #67b793;
  --color-into-the-green-500: #479d78;
  --color-into-the-green-600: #2a825f;
  --color-into-the-green-700: #006b49;
  --color-into-the-green-800: #005438;
  --color-into-the-green-900: #00412b;
  --color-into-the-green-950: #002919;
  --color-legendary-lavender: #985fe0;
  --color-legendary-lavender-50: #f6f2ff;
  --color-legendary-lavender-100: #eee5ff;
  --color-legendary-lavender-200: #decbff;
  --color-legendary-lavender-300: #ccacff;
  --color-legendary-lavender-400: #b37efd;
  --color-legendary-lavender-500: #985fe0;
  --color-legendary-lavender-600: #7d44c0;
  --color-legendary-lavender-700: #662fa1;
  --color-legendary-lavender-800: #512085;
  --color-legendary-lavender-900: #40146b;
  --color-legendary-lavender-950: #290948;
  --color-electric-lettuce: #60d57c;
  --color-electric-lettuce-50: #d0ffd7;
  --color-electric-lettuce-100: #b2fabe;
  --color-electric-lettuce-200: #92e8a2;
  --color-electric-lettuce-300: #60d57c;
  --color-electric-lettuce-400: #41b561;
  --color-electric-lettuce-500: #139b45;
  --color-electric-lettuce-600: #007e34;
  --color-electric-lettuce-700: #006528;
  --color-electric-lettuce-800: #00501e;
  --color-electric-lettuce-900: #003f16;
  --color-electric-lettuce-950: #00280b;
  --color-pink-lemonade: #ffe9ea;
  --color-pink-lemonade-50: #fff6f6;
  --color-pink-lemonade-100: #ffe9ea;
  --color-pink-lemonade-200: #e6d6d7;
  --color-pink-lemonade-300: #d0bebf;
  --color-pink-lemonade-400: #b19e9f;
  --color-pink-lemonade-500: #958283;
  --color-pink-lemonade-600: #7a6768;
  --color-pink-lemonade-700: #615051;
  --color-pink-lemonade-800: #4d3e3f;
  --color-pink-lemonade-900: #3b2f30;
  --color-pink-lemonade-950: #251d1d;
}