Tip of the Iceberg to Rich Black Color Palette

About this palette

Tip of the Iceberg to Rich Black is a 5-color cool, monochromatic, gradient palette: #B1E6EC (Tip of the Iceberg), #90C2C9 (Cerulean Skies), #3F9FA5 (Baltic), #006773 (Wakame Green), #004048 (Rich Black). It mixes turquoise tones and feels cool overall. The strongest text pairing is #B1E6EC on #004048 with a contrast ratio of 8.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tip of the Iceberg	rgb(177, 230, 236)	hsl(186, 61%, 81%)
Cerulean Skies	rgb(144, 194, 201)	hsl(187, 35%, 68%)
Baltic	rgb(63, 159, 165)	hsl(184, 45%, 45%)
Wakame Green	rgb(0, 103, 115)	hsl(186, 100%, 23%)
Rich Black	rgb(0, 64, 72)	hsl(187, 100%, 14%)

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.

Aa8.43:1 Very good#B1E6EC on #004048
Aa8.43:1 Very good#004048 on #B1E6EC
Aa5.88:1 Good#90C2C9 on #004048
Aa5.88:1 Good#004048 on #90C2C9
Aa4.83:1 Good#B1E6EC on #006773
Aa4.83:1 Good#006773 on #B1E6EC
Aa3.67:1 Poor#3F9FA5 on #004048
Aa3.67:1 Poor#004048 on #3F9FA5

Color blindness preview

CSS variables

/* Tip of the Iceberg to Rich Black — https://swatchly.xyz/palette/b1e6ec-90c2c9-3f9fa5-006773-004048 */
:root {
  --tip-of-the-iceberg: #b1e6ec;
  --cerulean-skies: #90c2c9;
  --baltic: #3f9fa5;
  --wakame-green: #006773;
  --rich-black: #004048;
}

Tailwind CSS v4

/* Tip of the Iceberg to Rich Black — https://swatchly.xyz/palette/b1e6ec-90c2c9-3f9fa5-006773-004048 */
@theme {
  --color-tip-of-the-iceberg: #b1e6ec;
  --color-tip-of-the-iceberg-50: #e6fdff;
  --color-tip-of-the-iceberg-100: #d6f5f8;
  --color-tip-of-the-iceberg-200: #b1e6ec;
  --color-tip-of-the-iceberg-300: #a1cdd2;
  --color-tip-of-the-iceberg-400: #7daeb3;
  --color-tip-of-the-iceberg-500: #5f9297;
  --color-tip-of-the-iceberg-600: #45767c;
  --color-tip-of-the-iceberg-700: #305e63;
  --color-tip-of-the-iceberg-800: #21494e;
  --color-tip-of-the-iceberg-900: #16393d;
  --color-tip-of-the-iceberg-950: #0a2426;
  --color-cerulean-skies: #90c2c9;
  --color-cerulean-skies-50: #daf7fb;
  --color-cerulean-skies-100: #cbecf1;
  --color-cerulean-skies-200: #b1d8de;
  --color-cerulean-skies-300: #90c2c9;
  --color-cerulean-skies-400: #74a4aa;
  --color-cerulean-skies-500: #598a91;
  --color-cerulean-skies-600: #427077;
  --color-cerulean-skies-700: #2f5a60;
  --color-cerulean-skies-800: #21484d;
  --color-cerulean-skies-900: #17393d;
  --color-cerulean-skies-950: #0b2327;
  --color-baltic: #3f9fa5;
  --color-baltic-50: #e0fdff;
  --color-baltic-100: #c6fafd;
  --color-baltic-200: #aae9ed;
  --color-baltic-300: #8cd6db;
  --color-baltic-400: #63b9bf;
  --color-baltic-500: #3f9fa5;
  --color-baltic-600: #198288;
  --color-baltic-700: #00686d;
  --color-baltic-800: #005155;
  --color-baltic-900: #003e41;
  --color-baltic-950: #002629;
  --color-wakame-green: #006773;
  --color-wakame-green-50: #e1fbff;
  --color-wakame-green-100: #c5f5fd;
  --color-wakame-green-200: #abe4ee;
  --color-wakame-green-300: #8ed0db;
  --color-wakame-green-400: #67b2be;
  --color-wakame-green-500: #4798a4;
  --color-wakame-green-600: #297d8a;
  --color-wakame-green-700: #006773;
  --color-wakame-green-800: #00515a;
  --color-wakame-green-900: #003e46;
  --color-wakame-green-950: #00272d;
  --color-rich-black: #004048;
  --color-rich-black-50: #e1fbff;
  --color-rich-black-100: #d0f2f8;
  --color-rich-black-200: #b7e0e7;
  --color-rich-black-300: #9ccad2;
  --color-rich-black-400: #79adb5;
  --color-rich-black-500: #5c929b;
  --color-rich-black-600: #437881;
  --color-rich-black-700: #306269;
  --color-rich-black-800: #214e55;
  --color-rich-black-900: #004048;
  --color-rich-black-950: #0a282c;
}