Plunged Into Darkness to Toxic Frog color palette

49194EPlunged Into Darkness 00729APristine Seas C35105Dark Orange E380E9Pinkling 9CF189Toxic Frog

About this palette

Plunged Into Darkness to Toxic Frog is a 5-color vibrant, cool palette: #49194E (Plunged Into Darkness), #00729A (Pristine Seas), #C35105 (Dark Orange), #E380E9 (Pinkling), #9CF189 (Toxic Frog). It mixes purple, blue, orange, pink, green tones and feels cool overall. The strongest text pairing is #49194E on #9CF189 with a contrast ratio of 10.02:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plunged Into Darkness	rgb(73, 25, 78)	hsl(294, 51%, 20%)
Pristine Seas	rgb(0, 114, 154)	hsl(196, 100%, 30%)
Dark Orange	rgb(195, 81, 5)	hsl(24, 95%, 39%)
Pinkling	rgb(227, 128, 233)	hsl(297, 70%, 71%)
Toxic Frog	rgb(156, 241, 137)	hsl(109, 79%, 74%)

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.02:1 Very good#49194E on #9CF189
Aa10.02:1 Very good#9CF189 on #49194E
Aa5.57:1 Good#49194E on #E380E9
Aa5.57:1 Good#E380E9 on #49194E
Aa3.96:1 Poor#00729A on #9CF189
Aa3.96:1 Poor#9CF189 on #00729A
Aa3.41:1 Poor#C35105 on #9CF189
Aa3.41:1 Poor#9CF189 on #C35105

Color blindness preview

CSS variables

/* Plunged Into Darkness to Toxic Frog — https://swatchly.xyz/palette/49194e-00729a-c35105-e380e9-9cf189 */
:root {
  --plunged-into-darkness: #49194e;
  --pristine-seas: #00729a;
  --dark-orange: #c35105;
  --pinkling: #e380e9;
  --toxic-frog: #9cf189;
}

Tailwind CSS v4

/* Plunged Into Darkness to Toxic Frog — https://swatchly.xyz/palette/49194e-00729a-c35105-e380e9-9cf189 */
@theme {
  --color-plunged-into-darkness: #49194e;
  --color-plunged-into-darkness-50: #fef0ff;
  --color-plunged-into-darkness-100: #fde0ff;
  --color-plunged-into-darkness-200: #f1c7f5;
  --color-plunged-into-darkness-300: #deaee2;
  --color-plunged-into-darkness-400: #c08bc5;
  --color-plunged-into-darkness-500: #a46fa9;
  --color-plunged-into-darkness-600: #87558c;
  --color-plunged-into-darkness-700: #6d4072;
  --color-plunged-into-darkness-800: #562f5a;
  --color-plunged-into-darkness-900: #49194e;
  --color-plunged-into-darkness-950: #2b132d;
  --color-pristine-seas: #00729a;
  --color-pristine-seas-50: #eaf8ff;
  --color-pristine-seas-100: #d3f0ff;
  --color-pristine-seas-200: #a4e0ff;
  --color-pristine-seas-300: #80caf0;
  --color-pristine-seas-400: #55aad3;
  --color-pristine-seas-500: #318eb7;
  --color-pristine-seas-600: #00729a;
  --color-pristine-seas-700: #005a7b;
  --color-pristine-seas-800: #004761;
  --color-pristine-seas-900: #00364c;
  --color-pristine-seas-950: #002231;
  --color-dark-orange: #c35105;
  --color-dark-orange-50: #ffefe8;
  --color-dark-orange-100: #ffded0;
  --color-dark-orange-200: #ffc0a4;
  --color-dark-orange-300: #ff996a;
  --color-dark-orange-400: #e47137;
  --color-dark-orange-500: #c35105;
  --color-dark-orange-600: #9f4000;
  --color-dark-orange-700: #803200;
  --color-dark-orange-800: #662600;
  --color-dark-orange-900: #511c00;
  --color-dark-orange-950: #361000;
  --color-pinkling: #e380e9;
  --color-pinkling-50: #fff5ff;
  --color-pinkling-100: #fee9ff;
  --color-pinkling-200: #fdccff;
  --color-pinkling-300: #f9a8fe;
  --color-pinkling-400: #e380e9;
  --color-pinkling-500: #c362c9;
  --color-pinkling-600: #a344aa;
  --color-pinkling-700: #862d8c;
  --color-pinkling-800: #6b1b71;
  --color-pinkling-900: #540f59;
  --color-pinkling-950: #350539;
  --color-toxic-frog: #9cf189;
  --color-toxic-frog-50: #e2ffdc;
  --color-toxic-frog-100: #c8fcbd;
  --color-toxic-frog-200: #9cf189;
  --color-toxic-frog-300: #90d680;
  --color-toxic-frog-400: #69b857;
  --color-toxic-frog-500: #4a9c36;
  --color-toxic-frog-600: #2e8017;
  --color-toxic-frog-700: #1c6700;
  --color-toxic-frog-800: #145100;
  --color-toxic-frog-900: #0d3e00;
  --color-toxic-frog-950: #052700;
}