Start generating

Mysterious Mixture to Violet Heaven color palette

244F1AMysterious Mixture006F8BWaterworldB96542Caramel DreamB89FCETurnip CrownD7B6F0Violet Heaven
Open in generator Export PNG, PDF, ASE…

About this palette

Mysterious Mixture to Violet Heaven is a 5-color cool palette: #244F1A (Mysterious Mixture), #006F8B (Waterworld), #B96542 (Caramel Dream), #B89FCE (Turnip Crown), #D7B6F0 (Violet Heaven). It mixes green, blue, orange, purple tones and feels cool overall. The strongest text pairing is #244F1A on #D7B6F0 with a contrast ratio of 5.36:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mysterious Mixturergb(36, 79, 26)hsl(109, 50%, 21%)
Waterworldrgb(0, 111, 139)hsl(192, 100%, 27%)
Caramel Dreamrgb(185, 101, 66)hsl(18, 47%, 49%)
Turnip Crownrgb(184, 159, 206)hsl(272, 32%, 72%)
Violet Heavenrgb(215, 182, 240)hsl(274, 66%, 83%)

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.36:1 Good#244F1A on #D7B6F0
  • Aa5.36:1 Good#D7B6F0 on #244F1A
  • Aa4.03:1 Poor#244F1A on #B89FCE
  • Aa4.03:1 Poor#B89FCE on #244F1A
  • Aa3.25:1 Poor#006F8B on #D7B6F0
  • Aa3.25:1 Poor#D7B6F0 on #006F8B

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mysterious Mixture to Violet Heaven — https://swatchly.xyz/palette/244f1a-006f8b-b96542-b89fce-d7b6f0 */
:root {
  --mysterious-mixture: #244f1a;
  --waterworld: #006f8b;
  --caramel-dream: #b96542;
  --turnip-crown: #b89fce;
  --violet-heaven: #d7b6f0;
}

Tailwind CSS v4

/* Mysterious Mixture to Violet Heaven — https://swatchly.xyz/palette/244f1a-006f8b-b96542-b89fce-d7b6f0 */
@theme {
  --color-mysterious-mixture: #244f1a;
  --color-mysterious-mixture-50: #e3fedd;
  --color-mysterious-mixture-100: #d7f6d0;
  --color-mysterious-mixture-200: #c0e4b8;
  --color-mysterious-mixture-300: #a6cf9d;
  --color-mysterious-mixture-400: #83b07a;
  --color-mysterious-mixture-500: #67955d;
  --color-mysterious-mixture-600: #4e7a44;
  --color-mysterious-mixture-700: #3a6231;
  --color-mysterious-mixture-800: #244f1a;
  --color-mysterious-mixture-900: #1e3c17;
  --color-mysterious-mixture-950: #10260b;
  --color-waterworld: #006f8b;
  --color-waterworld-50: #e8f8ff;
  --color-waterworld-100: #ccf1ff;
  --color-waterworld-200: #a1e0f7;
  --color-waterworld-300: #80c9e3;
  --color-waterworld-400: #55a8c5;
  --color-waterworld-500: #318ba8;
  --color-waterworld-600: #006f8b;
  --color-waterworld-700: #00586f;
  --color-waterworld-800: #004557;
  --color-waterworld-900: #003544;
  --color-waterworld-950: #00212c;
  --color-caramel-dream: #b96542;
  --color-caramel-dream-50: #fff0eb;
  --color-caramel-dream-100: #ffe1d6;
  --color-caramel-dream-200: #ffc4ad;
  --color-caramel-dream-300: #f5a686;
  --color-caramel-dream-400: #d78260;
  --color-caramel-dream-500: #b96542;
  --color-caramel-dream-600: #9b4d2b;
  --color-caramel-dream-700: #803919;
  --color-caramel-dream-800: #682a0d;
  --color-caramel-dream-900: #531e05;
  --color-caramel-dream-950: #371102;
  --color-turnip-crown: #b89fce;
  --color-turnip-crown-50: #fbf6ff;
  --color-turnip-crown-100: #f6ecff;
  --color-turnip-crown-200: #e8d6f8;
  --color-turnip-crown-300: #d4bfe7;
  --color-turnip-crown-400: #b89fce;
  --color-turnip-crown-500: #9a82af;
  --color-turnip-crown-600: #7e6692;
  --color-turnip-crown-700: #644f76;
  --color-turnip-crown-800: #4f3c5e;
  --color-turnip-crown-900: #3c2c49;
  --color-turnip-crown-950: #251a2e;
  --color-violet-heaven: #d7b6f0;
  --color-violet-heaven-50: #faf5ff;
  --color-violet-heaven-100: #f5e9ff;
  --color-violet-heaven-200: #e8d0fb;
  --color-violet-heaven-300: #d7b6f0;
  --color-violet-heaven-400: #b597cc;
  --color-violet-heaven-500: #997ab0;
  --color-violet-heaven-600: #7d5f93;
  --color-violet-heaven-700: #654978;
  --color-violet-heaven-800: #4f3760;
  --color-violet-heaven-900: #3d294b;
  --color-violet-heaven-950: #271831;
}

Similar palettes