Emerald Whispers to Purple Illusion color palette

008578Emerald Whispers 8C67FFOrion Nebula F25973Ripe Malinka 00B26AGreen Mana FF73B0Dream Setting BCC0FFPurple Illusion

Open in generator Export PNG, PDF, ASE…

About this palette

Emerald Whispers to Purple Illusion is a 6-color vibrant, cool palette: #008578 (Emerald Whispers), #8C67FF (Orion Nebula), #F25973 (Ripe Malinka), #00B26A (Green Mana), #FF73B0 (Dream Setting), #BCC0FF (Purple Illusion). It mixes turquoise, purple, red, green, pink tones and feels cool overall. The strongest text pairing is #008578 on #BCC0FF with a contrast ratio of 2.62:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Emerald Whispers	rgb(0, 133, 120)	hsl(174, 100%, 26%)
Orion Nebula	rgb(140, 103, 255)	hsl(255, 100%, 70%)
Ripe Malinka	rgb(242, 89, 115)	hsl(350, 85%, 65%)
Green Mana	rgb(0, 178, 106)	hsl(156, 100%, 35%)
Dream Setting	rgb(255, 115, 176)	hsl(334, 100%, 73%)
Purple Illusion	rgb(188, 192, 255)	hsl(236, 100%, 87%)

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.

Color blindness preview

CSS variables

/* Emerald Whispers to Purple Illusion — https://swatchly.xyz/palette/008578-8c67ff-f25973-00b26a-ff73b0-bcc0ff */
:root {
  --emerald-whispers: #008578;
  --orion-nebula: #8c67ff;
  --ripe-malinka: #f25973;
  --green-mana: #00b26a;
  --dream-setting: #ff73b0;
  --purple-illusion: #bcc0ff;
}

Tailwind CSS v4

/* Emerald Whispers to Purple Illusion — https://swatchly.xyz/palette/008578-8c67ff-f25973-00b26a-ff73b0-bcc0ff */
@theme {
  --color-emerald-whispers: #008578;
  --color-emerald-whispers-50: #d7fff8;
  --color-emerald-whispers-100: #c0faf0;
  --color-emerald-whispers-200: #a4eade;
  --color-emerald-whispers-300: #85d7ca;
  --color-emerald-whispers-400: #5abaac;
  --color-emerald-whispers-500: #349f92;
  --color-emerald-whispers-600: #008578;
  --color-emerald-whispers-700: #006a5f;
  --color-emerald-whispers-800: #00534a;
  --color-emerald-whispers-900: #004039;
  --color-emerald-whispers-950: #002823;
  --color-orion-nebula: #8c67ff;
  --color-orion-nebula-50: #f5f4ff;
  --color-orion-nebula-100: #ebe9ff;
  --color-orion-nebula-200: #d8d3ff;
  --color-orion-nebula-300: #c1b8ff;
  --color-orion-nebula-400: #a490ff;
  --color-orion-nebula-500: #8c67ff;
  --color-orion-nebula-600: #7249de;
  --color-orion-nebula-700: #5c32bc;
  --color-orion-nebula-800: #49209b;
  --color-orion-nebula-900: #38137d;
  --color-orion-nebula-950: #230754;
  --color-ripe-malinka: #f25973;
  --color-ripe-malinka-50: #ffebed;
  --color-ripe-malinka-100: #ffdbdd;
  --color-ripe-malinka-200: #ffbac0;
  --color-ripe-malinka-300: #ff929e;
  --color-ripe-malinka-400: #f25973;
  --color-ripe-malinka-500: #d43c5b;
  --color-ripe-malinka-600: #b41f45;
  --color-ripe-malinka-700: #960433;
  --color-ripe-malinka-800: #790027;
  --color-ripe-malinka-900: #61001d;
  --color-ripe-malinka-950: #420011;
  --color-green-mana: #00b26a;
  --color-green-mana-50: #ceffdf;
  --color-green-mana-100: #a8fbc7;
  --color-green-mana-200: #84e8ac;
  --color-green-mana-300: #5ad28f;
  --color-green-mana-400: #00b26a;
  --color-green-mana-500: #009558;
  --color-green-mana-600: #007846;
  --color-green-mana-700: #006037;
  --color-green-mana-800: #004c2a;
  --color-green-mana-900: #003c20;
  --color-green-mana-950: #002713;
  --color-dream-setting: #ff73b0;
  --color-dream-setting-50: #fff5f9;
  --color-dream-setting-100: #ffe9f1;
  --color-dream-setting-200: #ffcee0;
  --color-dream-setting-300: #ffadcc;
  --color-dream-setting-400: #ff73b0;
  --color-dream-setting-500: #dd5593;
  --color-dream-setting-600: #bc3676;
  --color-dream-setting-700: #9b1c5e;
  --color-dream-setting-800: #7e0749;
  --color-dream-setting-900: #630037;
  --color-dream-setting-950: #3f0021;
  --color-purple-illusion: #bcc0ff;
  --color-purple-illusion-50: #f6f7ff;
  --color-purple-illusion-100: #ecedff;
  --color-purple-illusion-200: #d5d9ff;
  --color-purple-illusion-300: #bcc0ff;
  --color-purple-illusion-400: #9ca0da;
  --color-purple-illusion-500: #8083be;
  --color-purple-illusion-600: #6668a0;
  --color-purple-illusion-700: #4f5183;
  --color-purple-illusion-800: #3d3e6a;
  --color-purple-illusion-900: #2e2e53;
  --color-purple-illusion-950: #1b1c36;
}