Infinity to Tip of the Iceberg Color Palette

About this palette

Infinity to Tip of the Iceberg is a 4-color muted, cool, gradient palette: #212C36 (Infinity), #3E6978 (Ocean’s Embrace), #8F89B6 (Magic Carpet), #BBE2EB (Tip of the Iceberg). It mixes gray, blue, purple, turquoise tones and feels cool overall. The strongest text pairing is #212C36 on #BBE2EB with a contrast ratio of 10.28:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Infinity	rgb(33, 44, 54)	hsl(209, 24%, 17%)
Ocean’s Embrace	rgb(62, 105, 120)	hsl(196, 32%, 36%)
Magic Carpet	rgb(143, 137, 182)	hsl(248, 24%, 63%)
Tip of the Iceberg	rgb(187, 226, 235)	hsl(191, 55%, 83%)

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.

Aa10.28:1 Very good#212C36 on #BBE2EB
Aa10.28:1 Very good#BBE2EB on #212C36
Aa4.34:1 Poor#3E6978 on #BBE2EB
Aa4.34:1 Poor#BBE2EB on #3E6978
Aa4.34:1 Poor#212C36 on #8F89B6
Aa4.34:1 Poor#8F89B6 on #212C36

Color blindness preview

CSS variables

/* Infinity to Tip of the Iceberg — https://swatchly.xyz/palette/212c36-3e6978-8f89b6-bbe2eb */
:root {
  --infinity: #212c36;
  --ocean-s-embrace: #3e6978;
  --magic-carpet: #8f89b6;
  --tip-of-the-iceberg: #bbe2eb;
}

Tailwind CSS v4

/* Infinity to Tip of the Iceberg — https://swatchly.xyz/palette/212c36-3e6978-8f89b6-bbe2eb */
@theme {
  --color-infinity: #212c36;
  --color-infinity-50: #eef6fe;
  --color-infinity-100: #e4ecf5;
  --color-infinity-200: #ced9e3;
  --color-infinity-300: #b7c3ce;
  --color-infinity-400: #95a2ae;
  --color-infinity-500: #788591;
  --color-infinity-600: #5d6974;
  --color-infinity-700: #46515b;
  --color-infinity-800: #333c45;
  --color-infinity-900: #212c36;
  --color-infinity-950: #141a1e;
  --color-ocean-s-embrace: #3e6978;
  --color-ocean-s-embrace-50: #e7f9ff;
  --color-ocean-s-embrace-100: #d2effa;
  --color-ocean-s-embrace-200: #b8dae7;
  --color-ocean-s-embrace-300: #9bc3d1;
  --color-ocean-s-embrace-400: #77a2b2;
  --color-ocean-s-embrace-500: #5a8595;
  --color-ocean-s-embrace-600: #3e6978;
  --color-ocean-s-embrace-700: #2e5360;
  --color-ocean-s-embrace-800: #21414d;
  --color-ocean-s-embrace-900: #17333c;
  --color-ocean-s-embrace-950: #0c2026;
  --color-magic-carpet: #8f89b6;
  --color-magic-carpet-50: #f6f6ff;
  --color-magic-carpet-100: #eeecff;
  --color-magic-carpet-200: #dcd8fb;
  --color-magic-carpet-300: #c7c2ea;
  --color-magic-carpet-400: #a9a3cf;
  --color-magic-carpet-500: #8f89b6;
  --color-magic-carpet-600: #736d98;
  --color-magic-carpet-700: #5b557c;
  --color-magic-carpet-800: #464163;
  --color-magic-carpet-900: #35314e;
  --color-magic-carpet-950: #201d32;
  --color-tip-of-the-iceberg: #bbe2eb;
  --color-tip-of-the-iceberg-50: #e9fbff;
  --color-tip-of-the-iceberg-100: #dbf2f8;
  --color-tip-of-the-iceberg-200: #bbe2eb;
  --color-tip-of-the-iceberg-300: #a9cad1;
  --color-tip-of-the-iceberg-400: #87aab2;
  --color-tip-of-the-iceberg-500: #6a8e97;
  --color-tip-of-the-iceberg-600: #50737b;
  --color-tip-of-the-iceberg-700: #3b5c63;
  --color-tip-of-the-iceberg-800: #2b484e;
  --color-tip-of-the-iceberg-900: #1f373c;
  --color-tip-of-the-iceberg-950: #112226;
}