Bubbles to Elite Teal Color Palette

About this palette

Bubbles to Elite Teal is a 5-color cool, gradient palette: #E6FFF7 (Bubbles), #93C892 (Irish Spring), #5C9C68 (Leafy), #1C6454 (Philodendron), #052F34 (Elite Teal). It mixes white, green, turquoise tones and feels cool overall. The strongest text pairing is #E6FFF7 on #052F34 with a contrast ratio of 13.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubbles	rgb(230, 255, 247)	hsl(161, 100%, 95%)
Irish Spring	rgb(147, 200, 146)	hsl(119, 33%, 68%)
Leafy	rgb(92, 156, 104)	hsl(131, 26%, 49%)
Philodendron	rgb(28, 100, 84)	hsl(167, 56%, 25%)
Elite Teal	rgb(5, 47, 52)	hsl(186, 82%, 11%)

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.

Aa13.68:1 Super#E6FFF7 on #052F34
Aa13.68:1 Super#052F34 on #E6FFF7
Aa7.46:1 Very good#93C892 on #052F34
Aa7.46:1 Very good#052F34 on #93C892
Aa6.67:1 Good#E6FFF7 on #1C6454
Aa6.67:1 Good#1C6454 on #E6FFF7
Aa4.38:1 Poor#5C9C68 on #052F34
Aa4.38:1 Poor#052F34 on #5C9C68

Color blindness preview

CSS variables

/* Bubbles to Elite Teal — https://swatchly.xyz/palette/e6fff7-93c892-5c9c68-1c6454-052f34 */
:root {
  --bubbles: #e6fff7;
  --irish-spring: #93c892;
  --leafy: #5c9c68;
  --philodendron: #1c6454;
  --elite-teal: #052f34;
}

Tailwind CSS v4

/* Bubbles to Elite Teal — https://swatchly.xyz/palette/e6fff7-93c892-5c9c68-1c6454-052f34 */
@theme {
  --color-bubbles: #e6fff7;
  --color-bubbles-50: #e6fff7;
  --color-bubbles-100: #e3f2ed;
  --color-bubbles-200: #cdded9;
  --color-bubbles-300: #b4c8c1;
  --color-bubbles-400: #92a8a1;
  --color-bubbles-500: #768c85;
  --color-bubbles-600: #5c716b;
  --color-bubbles-700: #475a54;
  --color-bubbles-800: #354741;
  --color-bubbles-900: #283632;
  --color-bubbles-950: #17221f;
  --color-irish-spring: #93c892;
  --color-irish-spring-50: #dbfbda;
  --color-irish-spring-100: #cdf0cc;
  --color-irish-spring-200: #b3ddb2;
  --color-irish-spring-300: #93c892;
  --color-irish-spring-400: #77a976;
  --color-irish-spring-500: #5c8f5c;
  --color-irish-spring-600: #457545;
  --color-irish-spring-700: #325f33;
  --color-irish-spring-800: #244c25;
  --color-irish-spring-900: #1a3c1b;
  --color-irish-spring-950: #0d260e;
  --color-leafy: #5c9c68;
  --color-leafy-50: #e2ffe6;
  --color-leafy-100: #d1f9d7;
  --color-leafy-200: #b9e8c0;
  --color-leafy-300: #9ed4a6;
  --color-leafy-400: #79b784;
  --color-leafy-500: #5c9c68;
  --color-leafy-600: #41804e;
  --color-leafy-700: #2c6739;
  --color-leafy-800: #1c5129;
  --color-leafy-900: #113f1d;
  --color-leafy-950: #06270f;
  --color-philodendron: #1c6454;
  --color-philodendron-50: #dafff3;
  --color-philodendron-100: #ccf6e9;
  --color-philodendron-200: #b2e4d5;
  --color-philodendron-300: #96cfbf;
  --color-philodendron-400: #71b19f;
  --color-philodendron-500: #539684;
  --color-philodendron-600: #387b6a;
  --color-philodendron-700: #1c6454;
  --color-philodendron-800: #144e41;
  --color-philodendron-900: #093d32;
  --color-philodendron-950: #03261f;
  --color-elite-teal: #052f34;
  --color-elite-teal-50: #e3fafd;
  --color-elite-teal-100: #d7f1f4;
  --color-elite-teal-200: #bfdee2;
  --color-elite-teal-300: #a5c8cd;
  --color-elite-teal-400: #81a8ad;
  --color-elite-teal-500: #638a90;
  --color-elite-teal-600: #486d73;
  --color-elite-teal-700: #335459;
  --color-elite-teal-800: #223f43;
  --color-elite-teal-900: #052f34;
  --color-elite-teal-950: #0b1a1d;
}