Battletoad to Sweetly Color Palette

About this palette

Battletoad to Sweetly is a 5-color cool palette: #00D05D (Battletoad), #1E173F (Nightwalker), #671EA3 (Wild Violet), #00A053 (Shamrock), #FFE6F2 (Sweetly). It mixes green, purple, white tones and feels cool overall. The strongest text pairing is #1E173F on #FFE6F2 with a contrast ratio of 14.29:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Battletoad	rgb(0, 208, 93)	hsl(147, 100%, 41%)
Nightwalker	rgb(30, 23, 63)	hsl(250, 47%, 17%)
Wild Violet	rgb(103, 30, 163)	hsl(273, 69%, 38%)
Shamrock	rgb(0, 160, 83)	hsl(151, 100%, 31%)
Sweetly	rgb(255, 230, 242)	hsl(331, 100%, 95%)

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.

Aa14.29:1 Super#1E173F on #FFE6F2
Aa14.29:1 Super#FFE6F2 on #1E173F
Aa8.15:1 Very good#00D05D on #1E173F
Aa8.15:1 Very good#1E173F on #00D05D
Aa7.79:1 Very good#671EA3 on #FFE6F2
Aa7.79:1 Very good#FFE6F2 on #671EA3
Aa4.92:1 Good#1E173F on #00A053
Aa4.92:1 Good#00A053 on #1E173F

Color blindness preview

CSS variables

/* Battletoad to Sweetly — https://swatchly.xyz/palette/00d05d-1e173f-671ea3-00a053-ffe6f2 */
:root {
  --battletoad: #00d05d;
  --nightwalker: #1e173f;
  --wild-violet: #671ea3;
  --shamrock: #00a053;
  --sweetly: #ffe6f2;
}

Tailwind CSS v4

/* Battletoad to Sweetly — https://swatchly.xyz/palette/00d05d-1e173f-671ea3-00a053-ffe6f2 */
@theme {
  --color-battletoad: #00d05d;
  --color-battletoad-50: #edfff0;
  --color-battletoad-100: #d3ffda;
  --color-battletoad-200: #97fbab;
  --color-battletoad-300: #70e98d;
  --color-battletoad-400: #00d05d;
  --color-battletoad-500: #00ad4c;
  --color-battletoad-600: #008b3c;
  --color-battletoad-700: #006e2e;
  --color-battletoad-800: #005522;
  --color-battletoad-900: #004118;
  --color-battletoad-950: #00280c;
  --color-nightwalker: #1e173f;
  --color-nightwalker-50: #f4f4ff;
  --color-nightwalker-100: #e9e9ff;
  --color-nightwalker-200: #d5d3fa;
  --color-nightwalker-300: #bebbe8;
  --color-nightwalker-400: #9e9bcc;
  --color-nightwalker-500: #837fb0;
  --color-nightwalker-600: #696593;
  --color-nightwalker-700: #534f79;
  --color-nightwalker-800: #403d61;
  --color-nightwalker-900: #312e4d;
  --color-nightwalker-950: #1e173f;
  --color-wild-violet: #671ea3;
  --color-wild-violet-50: #f7f3ff;
  --color-wild-violet-100: #f0e6ff;
  --color-wild-violet-200: #e0cbff;
  --color-wild-violet-300: #cfaaff;
  --color-wild-violet-400: #b77afc;
  --color-wild-violet-500: #9b5bdf;
  --color-wild-violet-600: #7e3ebd;
  --color-wild-violet-700: #671ea3;
  --color-wild-violet-800: #50197f;
  --color-wild-violet-900: #3f0f66;
  --color-wild-violet-950: #280644;
  --color-shamrock: #00a053;
  --color-shamrock-50: #deffe6;
  --color-shamrock-100: #b8ffcb;
  --color-shamrock-200: #98eeb1;
  --color-shamrock-300: #74da95;
  --color-shamrock-400: #42bc70;
  --color-shamrock-500: #00a053;
  --color-shamrock-600: #008142;
  --color-shamrock-700: #006733;
  --color-shamrock-800: #005027;
  --color-shamrock-900: #003e1c;
  --color-shamrock-950: #002710;
  --color-sweetly: #ffe6f2;
  --color-sweetly-50: #fff4f9;
  --color-sweetly-100: #ffe6f2;
  --color-sweetly-200: #e6d4dd;
  --color-sweetly-300: #d1bcc6;
  --color-sweetly-400: #b29ca6;
  --color-sweetly-500: #96808b;
  --color-sweetly-600: #7a6570;
  --color-sweetly-700: #624f58;
  --color-sweetly-800: #4d3d45;
  --color-sweetly-900: #3c2e35;
  --color-sweetly-950: #261c21;
}