Tip of the Iceberg to Mysterious Waters color palette

B4E9EFTip of the Iceberg 87AFBBOpen Seas BB7C6FDöner Kebab 835E50Acorn 24484EMysterious Waters

About this palette

Tip of the Iceberg to Mysterious Waters is a 5-color muted, cool, vintage palette: #B4E9EF (Tip of the Iceberg), #87AFBB (Open Seas), #BB7C6F (Döner Kebab), #835E50 (Acorn), #24484E (Mysterious Waters). It mixes turquoise, blue, red, brown tones and feels cool overall. The strongest text pairing is #B4E9EF on #24484E with a contrast ratio of 7.50:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tip of the Iceberg	rgb(180, 233, 239)	hsl(186, 65%, 82%)
Open Seas	rgb(135, 175, 187)	hsl(194, 28%, 63%)
Döner Kebab	rgb(187, 124, 111)	hsl(10, 36%, 58%)
Acorn	rgb(131, 94, 80)	hsl(16, 24%, 41%)
Mysterious Waters	rgb(36, 72, 78)	hsl(189, 37%, 22%)

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.

Aa7.50:1 Very good#B4E9EF on #24484E
Aa7.50:1 Very good#24484E on #B4E9EF
Aa4.30:1 Poor#B4E9EF on #835E50
Aa4.30:1 Poor#835E50 on #B4E9EF
Aa4.20:1 Poor#87AFBB on #24484E
Aa4.20:1 Poor#24484E on #87AFBB

Color blindness preview

CSS variables

/* Tip of the Iceberg to Mysterious Waters — https://swatchly.xyz/palette/b4e9ef-87afbb-bb7c6f-835e50-24484e */
:root {
  --tip-of-the-iceberg: #b4e9ef;
  --open-seas: #87afbb;
  --d-ner-kebab: #bb7c6f;
  --acorn: #835e50;
  --mysterious-waters: #24484e;
}

Tailwind CSS v4

/* Tip of the Iceberg to Mysterious Waters — https://swatchly.xyz/palette/b4e9ef-87afbb-bb7c6f-835e50-24484e */
@theme {
  --color-tip-of-the-iceberg: #b4e9ef;
  --color-tip-of-the-iceberg-50: #edfdff;
  --color-tip-of-the-iceberg-100: #d9f7fb;
  --color-tip-of-the-iceberg-200: #b4e9ef;
  --color-tip-of-the-iceberg-300: #a4cfd4;
  --color-tip-of-the-iceberg-400: #7fafb5;
  --color-tip-of-the-iceberg-500: #619399;
  --color-tip-of-the-iceberg-600: #46777c;
  --color-tip-of-the-iceberg-700: #315e64;
  --color-tip-of-the-iceberg-800: #21494e;
  --color-tip-of-the-iceberg-900: #16393d;
  --color-tip-of-the-iceberg-950: #0a2426;
  --color-open-seas: #87afbb;
  --color-open-seas-50: #ebfaff;
  --color-open-seas-100: #dbf3fb;
  --color-open-seas-200: #c4e1ea;
  --color-open-seas-300: #abcdd7;
  --color-open-seas-400: #87afbb;
  --color-open-seas-500: #6b929e;
  --color-open-seas-600: #507681;
  --color-open-seas-700: #3b5e68;
  --color-open-seas-800: #2b4952;
  --color-open-seas-900: #1e383f;
  --color-open-seas-950: #102228;
  --color-d-ner-kebab: #bb7c6f;
  --color-d-ner-kebab-50: #fff4f1;
  --color-d-ner-kebab-100: #ffe9e4;
  --color-d-ner-kebab-200: #ffcfc5;
  --color-d-ner-kebab-300: #f0b7ac;
  --color-d-ner-kebab-400: #d5978a;
  --color-d-ner-kebab-500: #bb7c6f;
  --color-d-ner-kebab-600: #9c6054;
  --color-d-ner-kebab-700: #80493e;
  --color-d-ner-kebab-800: #66372d;
  --color-d-ner-kebab-900: #502820;
  --color-d-ner-kebab-950: #341711;
  --color-acorn: #835e50;
  --color-acorn-50: #fff2ed;
  --color-acorn-100: #ffe4da;
  --color-acorn-200: #eecec2;
  --color-acorn-300: #dab6a8;
  --color-acorn-400: #bc9586;
  --color-acorn-500: #9f796a;
  --color-acorn-600: #835e50;
  --color-acorn-700: #6a493d;
  --color-acorn-800: #54382e;
  --color-acorn-900: #422b22;
  --color-acorn-950: #2a1913;
  --color-mysterious-waters: #24484e;
  --color-mysterious-waters-50: #e4fafe;
  --color-mysterious-waters-100: #d8f0f5;
  --color-mysterious-waters-200: #c1dee3;
  --color-mysterious-waters-300: #a7c8ce;
  --color-mysterious-waters-400: #84a9af;
  --color-mysterious-waters-500: #688d94;
  --color-mysterious-waters-600: #4e7279;
  --color-mysterious-waters-700: #3a5b61;
  --color-mysterious-waters-800: #24484e;
  --color-mysterious-waters-900: #1e373b;
  --color-mysterious-waters-950: #102225;
}