Little Mermaid to Deep Pool Teal color palette

2E4440Little Mermaid 73A299Emerald Oasis E5F6F4Melting Glacier BAD9D6Catch the Wave 337069Deep Pool Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Little Mermaid to Deep Pool Teal is a 5-color muted palette: #2E4440 (Little Mermaid), #73A299 (Emerald Oasis), #E5F6F4 (Melting Glacier), #BAD9D6 (Catch the Wave), #337069 (Deep Pool Teal). It mixes gray, turquoise, white tones and feels cool overall. The strongest text pairing is #2E4440 on #E5F6F4 with a contrast ratio of 9.33:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Little Mermaid	rgb(46, 68, 64)	hsl(169, 19%, 22%)
Emerald Oasis	rgb(115, 162, 153)	hsl(169, 20%, 54%)
Melting Glacier	rgb(229, 246, 244)	hsl(173, 49%, 93%)
Catch the Wave	rgb(186, 217, 214)	hsl(174, 29%, 79%)
Deep Pool Teal	rgb(51, 112, 105)	hsl(173, 37%, 32%)

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.

Aa9.33:1 Very good#2E4440 on #E5F6F4
Aa9.33:1 Very good#E5F6F4 on #2E4440
Aa6.93:1 Good#2E4440 on #BAD9D6
Aa6.93:1 Good#BAD9D6 on #2E4440
Aa5.14:1 Good#E5F6F4 on #337069
Aa5.14:1 Good#337069 on #E5F6F4
Aa3.82:1 Poor#BAD9D6 on #337069
Aa3.82:1 Poor#337069 on #BAD9D6

Color blindness preview

CSS variables

/* Little Mermaid to Deep Pool Teal — https://swatchly.xyz/palette/2e4440-73a299-e5f6f4-bad9d6-337069 */
:root {
  --little-mermaid: #2e4440;
  --emerald-oasis: #73a299;
  --melting-glacier: #e5f6f4;
  --catch-the-wave: #bad9d6;
  --deep-pool-teal: #337069;
}

Tailwind CSS v4

/* Little Mermaid to Deep Pool Teal — https://swatchly.xyz/palette/2e4440-73a299-e5f6f4-bad9d6-337069 */
@theme {
  --color-little-mermaid: #2e4440;
  --color-little-mermaid-50: #eaf9f6;
  --color-little-mermaid-100: #dfefec;
  --color-little-mermaid-200: #c9dcd8;
  --color-little-mermaid-300: #b0c6c1;
  --color-little-mermaid-400: #8ea6a1;
  --color-little-mermaid-500: #728a85;
  --color-little-mermaid-600: #586f6a;
  --color-little-mermaid-700: #435753;
  --color-little-mermaid-800: #2e4440;
  --color-little-mermaid-900: #253431;
  --color-little-mermaid-950: #15201e;
  --color-emerald-oasis: #73a299;
  --color-emerald-oasis-50: #ddf8f3;
  --color-emerald-oasis-100: #ceeee7;
  --color-emerald-oasis-200: #b4d9d2;
  --color-emerald-oasis-300: #98c2ba;
  --color-emerald-oasis-400: #73a299;
  --color-emerald-oasis-500: #5a8880;
  --color-emerald-oasis-600: #436f67;
  --color-emerald-oasis-700: #315952;
  --color-emerald-oasis-800: #234741;
  --color-emerald-oasis-900: #193833;
  --color-emerald-oasis-950: #0d2420;
  --color-melting-glacier: #e5f6f4;
  --color-melting-glacier-50: #e5f6f4;
  --color-melting-glacier-100: #e0ebea;
  --color-melting-glacier-200: #ccd8d7;
  --color-melting-glacier-300: #b5c3c1;
  --color-melting-glacier-400: #95a4a2;
  --color-melting-glacier-500: #7a8988;
  --color-melting-glacier-600: #616f6e;
  --color-melting-glacier-700: #4b5857;
  --color-melting-glacier-800: #3a4544;
  --color-melting-glacier-900: #2b3534;
  --color-melting-glacier-950: #1a2120;
  --color-catch-the-wave: #bad9d6;
  --color-catch-the-wave-50: #e4f6f4;
  --color-catch-the-wave-100: #d7ebe9;
  --color-catch-the-wave-200: #bad9d6;
  --color-catch-the-wave-300: #a8c2c0;
  --color-catch-the-wave-400: #88a5a2;
  --color-catch-the-wave-500: #6d8a88;
  --color-catch-the-wave-600: #55706e;
  --color-catch-the-wave-700: #415a58;
  --color-catch-the-wave-800: #314745;
  --color-catch-the-wave-900: #243735;
  --color-catch-the-wave-950: #152221;
  --color-deep-pool-teal: #337069;
  --color-deep-pool-teal-50: #dcfdf8;
  --color-deep-pool-teal-100: #cdf3ed;
  --color-deep-pool-teal-200: #b1e0d9;
  --color-deep-pool-teal-300: #94c9c1;
  --color-deep-pool-teal-400: #6ea9a1;
  --color-deep-pool-teal-500: #508c85;
  --color-deep-pool-teal-600: #337069;
  --color-deep-pool-teal-700: #235953;
  --color-deep-pool-teal-800: #164641;
  --color-deep-pool-teal-900: #0d3733;
  --color-deep-pool-teal-950: #05221f;
}