Sky to Slime Girl color palette

60D1FFSky C6D9FFIcy Plains FF81BDBubblegum Beam 64D100Blinking Terminal 00F6FFHey Blue!00C38ESlime Girl

Open in generator Export PNG, PDF, ASE…

About this palette

Sky to Slime Girl is a 6-color vibrant, light, cool, neon palette: #60D1FF (Sky), #C6D9FF (Icy Plains), #FF81BD (Bubblegum Beam), #64D100 (Blinking Terminal), #00F6FF (Hey Blue!), #00C38E (Slime Girl). It mixes blue, pink, green, turquoise tones and feels cool overall. The strongest text pairing is #FF81BD on #00F6FF with a contrast ratio of 1.71:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sky	rgb(96, 209, 255)	hsl(197, 100%, 69%)
Icy Plains	rgb(198, 217, 255)	hsl(220, 100%, 89%)
Bubblegum Beam	rgb(255, 129, 189)	hsl(331, 100%, 75%)
Blinking Terminal	rgb(100, 209, 0)	hsl(91, 100%, 41%)
Hey Blue!	rgb(0, 246, 255)	hsl(182, 100%, 50%)
Slime Girl	rgb(0, 195, 142)	hsl(164, 100%, 38%)

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

/* Sky to Slime Girl — https://swatchly.xyz/palette/60d1ff-c6d9ff-ff81bd-64d100-00f6ff-00c38e */
:root {
  --sky: #60d1ff;
  --icy-plains: #c6d9ff;
  --bubblegum-beam: #ff81bd;
  --blinking-terminal: #64d100;
  --hey-blue: #00f6ff;
  --slime-girl: #00c38e;
}

Tailwind CSS v4

/* Sky to Slime Girl — https://swatchly.xyz/palette/60d1ff-c6d9ff-ff81bd-64d100-00f6ff-00c38e */
@theme {
  --color-sky: #60d1ff;
  --color-sky-50: #eaf8ff;
  --color-sky-100: #d4f1ff;
  --color-sky-200: #a4e3ff;
  --color-sky-300: #60d1ff;
  --color-sky-400: #42b0db;
  --color-sky-500: #0394bf;
  --color-sky-600: #00779b;
  --color-sky-700: #005e7c;
  --color-sky-800: #004a61;
  --color-sky-900: #00394c;
  --color-sky-950: #002331;
  --color-icy-plains: #c6d9ff;
  --color-icy-plains-50: #f1f6ff;
  --color-icy-plains-100: #e3ecff;
  --color-icy-plains-200: #c6d9ff;
  --color-icy-plains-300: #b2c2e2;
  --color-icy-plains-400: #91a2c5;
  --color-icy-plains-500: #7687a9;
  --color-icy-plains-600: #5c6c8d;
  --color-icy-plains-700: #475573;
  --color-icy-plains-800: #36425c;
  --color-icy-plains-900: #283348;
  --color-icy-plains-950: #171f2f;
  --color-bubblegum-beam: #ff81bd;
  --color-bubblegum-beam-50: #ffe5ef;
  --color-bubblegum-beam-100: #ffd2e5;
  --color-bubblegum-beam-200: #ffafd2;
  --color-bubblegum-beam-300: #ff81bd;
  --color-bubblegum-beam-400: #de65a0;
  --color-bubblegum-beam-500: #c24a87;
  --color-bubblegum-beam-600: #a5326f;
  --color-bubblegum-beam-700: #89205a;
  --color-bubblegum-beam-800: #711248;
  --color-bubblegum-beam-900: #5d0939;
  --color-bubblegum-beam-950: #3d0224;
  --color-blinking-terminal: #64d100;
  --color-blinking-terminal-50: #cdffb7;
  --color-blinking-terminal-100: #b0f98e;
  --color-blinking-terminal-200: #90e665;
  --color-blinking-terminal-300: #64d100;
  --color-blinking-terminal-400: #53b000;
  --color-blinking-terminal-500: #449300;
  --color-blinking-terminal-600: #367800;
  --color-blinking-terminal-700: #2a6000;
  --color-blinking-terminal-800: #204d00;
  --color-blinking-terminal-900: #183d00;
  --color-blinking-terminal-950: #0c2600;
  --color-hey-blue: #00f6ff;
  --color-hey-blue-50: #dcfeff;
  --color-hey-blue-100: #b3fcff;
  --color-hey-blue-200: #00f6ff;
  --color-hey-blue-300: #37dbe2;
  --color-hey-blue-400: #00b9bf;
  --color-hey-blue-500: #009a9f;
  --color-hey-blue-600: #007c80;
  --color-hey-blue-700: #006266;
  --color-hey-blue-800: #004c50;
  --color-hey-blue-900: #003b3e;
  --color-hey-blue-950: #002527;
  --color-slime-girl: #00c38e;
  --color-slime-girl-50: #e1fff1;
  --color-slime-girl-100: #bcffe1;
  --color-slime-girl-200: #90f2c9;
  --color-slime-girl-300: #68dfb0;
  --color-slime-girl-400: #00c38e;
  --color-slime-girl-500: #00a276;
  --color-slime-girl-600: #00835e;
  --color-slime-girl-700: #00684a;
  --color-slime-girl-800: #005139;
  --color-slime-girl-900: #003e2b;
  --color-slime-girl-950: #002719;
}