Battletoad to Green Dynasty color palette

37CB5CBattletoad A17EFFPeriwinkle 9320EAViolet 0094BDSwimmer FF9C98Mad Pinker 00998DGreen Dynasty

Open in generator Export PNG, PDF, ASE…

About this palette

Battletoad to Green Dynasty is a 6-color vibrant, cool, neon palette: #37CB5C (Battletoad), #A17EFF (Periwinkle), #9320EA (Violet), #0094BD (Swimmer), #FF9C98 (Mad Pinker), #00998D (Green Dynasty). It mixes green, purple, blue, pink, turquoise tones and feels cool overall. The strongest text pairing is #9320EA on #FF9C98 with a contrast ratio of 2.88:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Battletoad	rgb(55, 203, 92)	hsl(135, 59%, 51%)
Periwinkle	rgb(161, 126, 255)	hsl(256, 100%, 75%)
Violet	rgb(147, 32, 234)	hsl(274, 83%, 52%)
Swimmer	rgb(0, 148, 189)	hsl(193, 100%, 37%)
Mad Pinker	rgb(255, 156, 152)	hsl(2, 100%, 80%)
Green Dynasty	rgb(0, 153, 141)	hsl(175, 100%, 30%)

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

/* Battletoad to Green Dynasty — https://swatchly.xyz/palette/37cb5c-a17eff-9320ea-0094bd-ff9c98-00998d */
:root {
  --battletoad: #37cb5c;
  --periwinkle: #a17eff;
  --violet: #9320ea;
  --swimmer: #0094bd;
  --mad-pinker: #ff9c98;
  --green-dynasty: #00998d;
}

Tailwind CSS v4

/* Battletoad to Green Dynasty — https://swatchly.xyz/palette/37cb5c-a17eff-9320ea-0094bd-ff9c98-00998d */
@theme {
  --color-battletoad: #37cb5c;
  --color-battletoad-50: #ebffed;
  --color-battletoad-100: #d0ffd4;
  --color-battletoad-200: #9ef7a9;
  --color-battletoad-300: #7ae58b;
  --color-battletoad-400: #37cb5c;
  --color-battletoad-500: #00ab41;
  --color-battletoad-600: #008a33;
  --color-battletoad-700: #006d26;
  --color-battletoad-800: #00551c;
  --color-battletoad-900: #004013;
  --color-battletoad-950: #002809;
  --color-periwinkle: #a17eff;
  --color-periwinkle-50: #f2f0ff;
  --color-periwinkle-100: #e7e3ff;
  --color-periwinkle-200: #d3c9ff;
  --color-periwinkle-300: #bdabff;
  --color-periwinkle-400: #a17eff;
  --color-periwinkle-500: #8863e1;
  --color-periwinkle-600: #6f49c2;
  --color-periwinkle-700: #5a35a3;
  --color-periwinkle-800: #472587;
  --color-periwinkle-900: #381a6e;
  --color-periwinkle-950: #240d4b;
  --color-violet: #9320ea;
  --color-violet-50: #f7f3ff;
  --color-violet-100: #f0e7ff;
  --color-violet-200: #e2cfff;
  --color-violet-300: #d2b1ff;
  --color-violet-400: #bc84ff;
  --color-violet-500: #aa52ff;
  --color-violet-600: #9320ea;
  --color-violet-700: #7700c3;
  --color-violet-800: #5e009b;
  --color-violet-900: #49007a;
  --color-violet-950: #2e0051;
  --color-swimmer: #0094bd;
  --color-swimmer-50: #e9f8ff;
  --color-swimmer-100: #d2f1ff;
  --color-swimmer-200: #a0e3ff;
  --color-swimmer-300: #73cff3;
  --color-swimmer-400: #41b0d8;
  --color-swimmer-500: #0094bd;
  --color-swimmer-600: #007799;
  --color-swimmer-700: #005f7a;
  --color-swimmer-800: #004a60;
  --color-swimmer-900: #00394b;
  --color-swimmer-950: #002330;
  --color-mad-pinker: #ff9c98;
  --color-mad-pinker-50: #ffeeec;
  --color-mad-pinker-100: #ffdfdc;
  --color-mad-pinker-200: #ffc1bd;
  --color-mad-pinker-300: #ff9c98;
  --color-mad-pinker-400: #dc7f7c;
  --color-mad-pinker-500: #c06361;
  --color-mad-pinker-600: #a24a49;
  --color-mad-pinker-700: #863737;
  --color-mad-pinker-800: #6d2728;
  --color-mad-pinker-900: #571c1d;
  --color-mad-pinker-950: #390f0f;
  --color-green-dynasty: #00998d;
  --color-green-dynasty-50: #d5fff9;
  --color-green-dynasty-100: #b8faf0;
  --color-green-dynasty-200: #98e8dd;
  --color-green-dynasty-300: #74d3c8;
  --color-green-dynasty-400: #41b5a9;
  --color-green-dynasty-500: #00998d;
  --color-green-dynasty-600: #007b71;
  --color-green-dynasty-700: #00625a;
  --color-green-dynasty-800: #004d46;
  --color-green-dynasty-900: #003b36;
  --color-green-dynasty-950: #002522;
}