Tip of the Iceberg to Shadow Play color palette

B5E3E4Tip of the Iceberg DD9D83Blushing Rose 44807BParadiso 184A7CMaritime Outpost 2C150BShadow Play

Open in generator Export PNG, PDF, ASE…

About this palette

Tip of the Iceberg to Shadow Play is a 5-color cool, vintage palette: #B5E3E4 (Tip of the Iceberg), #DD9D83 (Blushing Rose), #44807B (Paradiso), #184A7C (Maritime Outpost), #2C150B (Shadow Play). It mixes turquoise, orange, blue, brown tones and feels cool overall. The strongest text pairing is #B5E3E4 on #2C150B with a contrast ratio of 12.36:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tip of the Iceberg	rgb(181, 227, 228)	hsl(181, 47%, 80%)
Blushing Rose	rgb(221, 157, 131)	hsl(17, 57%, 69%)
Paradiso	rgb(68, 128, 123)	hsl(175, 31%, 38%)
Maritime Outpost	rgb(24, 74, 124)	hsl(210, 68%, 29%)
Shadow Play	rgb(44, 21, 11)	hsl(18, 60%, 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.

Aa12.36:1 Super#B5E3E4 on #2C150B
Aa12.36:1 Super#2C150B on #B5E3E4
Aa7.57:1 Very good#DD9D83 on #2C150B
Aa7.57:1 Very good#2C150B on #DD9D83
Aa6.53:1 Good#B5E3E4 on #184A7C
Aa6.53:1 Good#184A7C on #B5E3E4
Aa3.99:1 Poor#DD9D83 on #184A7C
Aa3.99:1 Poor#184A7C on #DD9D83

Color blindness preview

CSS variables

/* Tip of the Iceberg to Shadow Play — https://swatchly.xyz/palette/b5e3e4-dd9d83-44807b-184a7c-2c150b */
:root {
  --tip-of-the-iceberg: #b5e3e4;
  --blushing-rose: #dd9d83;
  --paradiso: #44807b;
  --maritime-outpost: #184a7c;
  --shadow-play: #2c150b;
}

Tailwind CSS v4

/* Tip of the Iceberg to Shadow Play — https://swatchly.xyz/palette/b5e3e4-dd9d83-44807b-184a7c-2c150b */
@theme {
  --color-tip-of-the-iceberg: #b5e3e4;
  --color-tip-of-the-iceberg-50: #e3fcfc;
  --color-tip-of-the-iceberg-100: #d7f3f3;
  --color-tip-of-the-iceberg-200: #b5e3e4;
  --color-tip-of-the-iceberg-300: #a4cacb;
  --color-tip-of-the-iceberg-400: #81acac;
  --color-tip-of-the-iceberg-500: #649091;
  --color-tip-of-the-iceberg-600: #4b7576;
  --color-tip-of-the-iceberg-700: #365d5e;
  --color-tip-of-the-iceberg-800: #27494a;
  --color-tip-of-the-iceberg-900: #1b3839;
  --color-tip-of-the-iceberg-950: #0e2324;
  --color-blushing-rose: #dd9d83;
  --color-blushing-rose-50: #fff8f5;
  --color-blushing-rose-100: #ffeee7;
  --color-blushing-rose-200: #ffd6c6;
  --color-blushing-rose-300: #f4bea9;
  --color-blushing-rose-400: #dd9d83;
  --color-blushing-rose-500: #bd8067;
  --color-blushing-rose-600: #9e634b;
  --color-blushing-rose-700: #814b35;
  --color-blushing-rose-800: #663824;
  --color-blushing-rose-900: #4f2818;
  --color-blushing-rose-950: #32170b;
  --color-paradiso: #44807b;
  --color-paradiso-50: #dcfdfa;
  --color-paradiso-100: #d1f6f2;
  --color-paradiso-200: #b9e5e0;
  --color-paradiso-300: #9fd1cc;
  --color-paradiso-400: #7bb4ae;
  --color-paradiso-500: #5e9a94;
  --color-paradiso-600: #44807b;
  --color-paradiso-700: #2e6762;
  --color-paradiso-800: #1d514d;
  --color-paradiso-900: #113e3b;
  --color-paradiso-950: #062725;
  --color-maritime-outpost: #184a7c;
  --color-maritime-outpost-50: #eef6ff;
  --color-maritime-outpost-100: #ddedff;
  --color-maritime-outpost-200: #bbdbff;
  --color-maritime-outpost-300: #9ac6f8;
  --color-maritime-outpost-400: #77a8de;
  --color-maritime-outpost-500: #5b8dc4;
  --color-maritime-outpost-600: #4373a8;
  --color-maritime-outpost-700: #2f5d8d;
  --color-maritime-outpost-800: #184a7c;
  --color-maritime-outpost-900: #15395e;
  --color-maritime-outpost-950: #09243f;
  --color-shadow-play: #2c150b;
  --color-shadow-play-50: #fff2ed;
  --color-shadow-play-100: #fbe6de;
  --color-shadow-play-200: #ead2c7;
  --color-shadow-play-300: #d6baaf;
  --color-shadow-play-400: #b89a8e;
  --color-shadow-play-500: #9c7e71;
  --color-shadow-play-600: #7f6357;
  --color-shadow-play-700: #664d42;
  --color-shadow-play-800: #503a31;
  --color-shadow-play-900: #3d2b24;
  --color-shadow-play-950: #2c150b;
}