Teal to Pink Elephants Color Palette

About this palette

Teal to Pink Elephants is a 5-color vibrant, cool palette: #007F7E (Teal), #8D8F00 (Snakes in the Grass), #00B68A (Slime Girl), #92B400 (Citrus), #FF94E1 (Pink Elephants). It mixes turquoise, yellow, green, pink tones and feels cool overall. The strongest text pairing is #007F7E on #FF94E1 with a contrast ratio of 2.44:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Teal	rgb(0, 127, 126)	hsl(180, 100%, 25%)
Snakes in the Grass	rgb(141, 143, 0)	hsl(61, 100%, 28%)
Slime Girl	rgb(0, 182, 138)	hsl(165, 100%, 36%)
Citrus	rgb(146, 180, 0)	hsl(71, 100%, 35%)
Pink Elephants	rgb(255, 148, 225)	hsl(317, 100%, 79%)

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

/* Teal to Pink Elephants — https://swatchly.xyz/palette/007f7e-8d8f00-00b68a-92b400-ff94e1 */
:root {
  --teal: #007f7e;
  --snakes-in-the-grass: #8d8f00;
  --slime-girl: #00b68a;
  --citrus: #92b400;
  --pink-elephants: #ff94e1;
}

Tailwind CSS v4

/* Teal to Pink Elephants — https://swatchly.xyz/palette/007f7e-8d8f00-00b68a-92b400-ff94e1 */
@theme {
  --color-teal: #007f7e;
  --color-teal-50: #d5fffe;
  --color-teal-100: #c0f8f7;
  --color-teal-200: #a3e7e5;
  --color-teal-300: #83d3d1;
  --color-teal-400: #58b5b3;
  --color-teal-500: #339a99;
  --color-teal-600: #007f7e;
  --color-teal-700: #006564;
  --color-teal-800: #004f4e;
  --color-teal-900: #003d3c;
  --color-teal-950: #002626;
  --color-snakes-in-the-grass: #8d8f00;
  --color-snakes-in-the-grass-50: #f7fbc1;
  --color-snakes-in-the-grass-100: #eef2b0;
  --color-snakes-in-the-grass-200: #dbdf90;
  --color-snakes-in-the-grass-300: #c6ca6d;
  --color-snakes-in-the-grass-400: #a8ab3c;
  --color-snakes-in-the-grass-500: #8d8f00;
  --color-snakes-in-the-grass-600: #717300;
  --color-snakes-in-the-grass-700: #5a5b00;
  --color-snakes-in-the-grass-800: #464700;
  --color-snakes-in-the-grass-900: #353600;
  --color-snakes-in-the-grass-950: #212200;
  --color-slime-girl: #00b68a;
  --color-slime-girl-50: #d2ffec;
  --color-slime-girl-100: #acfcdc;
  --color-slime-girl-200: #88eac5;
  --color-slime-girl-300: #5fd5ac;
  --color-slime-girl-400: #00b68a;
  --color-slime-girl-500: #009873;
  --color-slime-girl-600: #007b5c;
  --color-slime-girl-700: #006249;
  --color-slime-girl-800: #004d39;
  --color-slime-girl-900: #003c2b;
  --color-slime-girl-950: #00261b;
  --color-citrus: #92b400;
  --color-citrus-50: #edffc7;
  --color-citrus-100: #e0f9a8;
  --color-citrus-200: #cbe785;
  --color-citrus-300: #b3d25e;
  --color-citrus-400: #92b400;
  --color-citrus-500: #799600;
  --color-citrus-600: #617800;
  --color-citrus-700: #4c5f00;
  --color-citrus-800: #3b4a00;
  --color-citrus-900: #2c3900;
  --color-citrus-950: #1b2300;
  --color-pink-elephants: #ff94e1;
  --color-pink-elephants-50: #ffeef9;
  --color-pink-elephants-100: #ffdef4;
  --color-pink-elephants-200: #ffbeeb;
  --color-pink-elephants-300: #ff94e1;
  --color-pink-elephants-400: #db77c0;
  --color-pink-elephants-500: #bf5aa5;
  --color-pink-elephants-600: #a14089;
  --color-pink-elephants-700: #842b70;
  --color-pink-elephants-800: #6b1c59;
  --color-pink-elephants-900: #561247;
  --color-pink-elephants-950: #38072d;
}