Mysterious Mixture to Partial Pink Color Palette

About this palette

Mysterious Mixture to Partial Pink is a 4-color cool palette: #004E1B (Mysterious Mixture), #9A6199 (Bermuda Onion), #4EC988 (Magical Malachite), #FFF1FC (Partial Pink). It mixes green, pink, white tones and feels cool overall. The strongest text pairing is #004E1B on #FFF1FC with a contrast ratio of 9.14:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mysterious Mixture	rgb(0, 78, 27)	hsl(141, 100%, 15%)
Bermuda Onion	rgb(154, 97, 153)	hsl(301, 23%, 49%)
Magical Malachite	rgb(78, 201, 136)	hsl(148, 53%, 55%)
Partial Pink	rgb(255, 241, 252)	hsl(313, 100%, 97%)

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.

Aa9.14:1 Very good#004E1B on #FFF1FC
Aa9.14:1 Very good#FFF1FC on #004E1B
Aa4.77:1 Good#004E1B on #4EC988
Aa4.77:1 Good#4EC988 on #004E1B
Aa4.23:1 Poor#9A6199 on #FFF1FC
Aa4.23:1 Poor#FFF1FC on #9A6199

Color blindness preview

CSS variables

/* Mysterious Mixture to Partial Pink — https://swatchly.xyz/palette/004e1b-9a6199-4ec988-fff1fc */
:root {
  --mysterious-mixture: #004e1b;
  --bermuda-onion: #9a6199;
  --magical-malachite: #4ec988;
  --partial-pink: #fff1fc;
}

Tailwind CSS v4

/* Mysterious Mixture to Partial Pink — https://swatchly.xyz/palette/004e1b-9a6199-4ec988-fff1fc */
@theme {
  --color-mysterious-mixture: #004e1b;
  --color-mysterious-mixture-50: #e0ffe3;
  --color-mysterious-mixture-100: #cef8d3;
  --color-mysterious-mixture-200: #b5e7bb;
  --color-mysterious-mixture-300: #98d19f;
  --color-mysterious-mixture-400: #72b27c;
  --color-mysterious-mixture-500: #54965f;
  --color-mysterious-mixture-600: #3a7a46;
  --color-mysterious-mixture-700: #266132;
  --color-mysterious-mixture-800: #004e1b;
  --color-mysterious-mixture-900: #0d3b18;
  --color-mysterious-mixture-950: #05250c;
  --color-bermuda-onion: #9a6199;
  --color-bermuda-onion-50: #ffeffe;
  --color-bermuda-onion-100: #ffe4fe;
  --color-bermuda-onion-200: #f8cbf7;
  --color-bermuda-onion-300: #e7b4e6;
  --color-bermuda-onion-400: #cd94cb;
  --color-bermuda-onion-500: #b47ab3;
  --color-bermuda-onion-600: #9a6199;
  --color-bermuda-onion-700: #7e497d;
  --color-bermuda-onion-800: #653664;
  --color-bermuda-onion-900: #4f274e;
  --color-bermuda-onion-950: #331633;
  --color-magical-malachite: #4ec988;
  --color-magical-malachite-50: #edfff3;
  --color-magical-malachite-100: #d1ffe2;
  --color-magical-malachite-200: #a8f5c6;
  --color-magical-malachite-300: #87e3ad;
  --color-magical-malachite-400: #4ec988;
  --color-magical-malachite-500: #27aa6b;
  --color-magical-malachite-600: #008a52;
  --color-magical-malachite-700: #006d40;
  --color-magical-malachite-800: #005430;
  --color-magical-malachite-900: #004023;
  --color-magical-malachite-950: #002714;
  --color-partial-pink: #fff1fc;
  --color-partial-pink-50: #fff1fc;
  --color-partial-pink-100: #f1e9ef;
  --color-partial-pink-200: #ded4dc;
  --color-partial-pink-300: #c9bdc6;
  --color-partial-pink-400: #aa9da7;
  --color-partial-pink-500: #8e828c;
  --color-partial-pink-600: #736871;
  --color-partial-pink-700: #5c515a;
  --color-partial-pink-800: #483f46;
  --color-partial-pink-900: #383036;
  --color-partial-pink-950: #231d22;
}