Tip of the Iceberg to Muted Purple color palette

About this palette

Tip of the Iceberg to Muted Purple is a 5-color cool, vintage palette: #BBE6EA (Tip of the Iceberg), #422E10 (Cola), #BF94CD (Violaceous), #735C2B (Olivary), #856197 (Muted Purple). It mixes turquoise, brown, purple tones and feels cool overall. The strongest text pairing is #BBE6EA on #422E10 with a contrast ratio of 9.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Tip of the Icebergrgb(187, 230, 234)hsl(185, 53%, 83%)
Colargb(66, 46, 16)hsl(36, 61%, 16%)
Violaceousrgb(191, 148, 205)hsl(285, 36%, 69%)
Olivaryrgb(115, 92, 43)hsl(41, 46%, 31%)
Muted Purplergb(133, 97, 151)hsl(280, 22%, 49%)

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.58:1 Very good#BBE6EA on #422E10
  • Aa9.58:1 Very good#422E10 on #BBE6EA
  • Aa5.11:1 Good#422E10 on #BF94CD
  • Aa5.11:1 Good#BF94CD on #422E10
  • Aa4.74:1 Good#BBE6EA on #735C2B
  • Aa4.74:1 Good#735C2B on #BBE6EA
  • Aa3.76:1 Poor#BBE6EA on #856197
  • Aa3.76:1 Poor#856197 on #BBE6EA

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Tip of the Iceberg to Muted Purple — https://swatchly.xyz/palette/bbe6ea-422e10-bf94cd-735c2b-856197 */
:root {
  --tip-of-the-iceberg: #bbe6ea;
  --cola: #422e10;
  --violaceous: #bf94cd;
  --olivary: #735c2b;
  --muted-purple: #856197;
}

Tailwind CSS v4

/* Tip of the Iceberg to Muted Purple — https://swatchly.xyz/palette/bbe6ea-422e10-bf94cd-735c2b-856197 */
@theme {
  --color-tip-of-the-iceberg: #bbe6ea;
  --color-tip-of-the-iceberg-50: #e9fdff;
  --color-tip-of-the-iceberg-100: #dcf5f7;
  --color-tip-of-the-iceberg-200: #bbe6ea;
  --color-tip-of-the-iceberg-300: #aacdd0;
  --color-tip-of-the-iceberg-400: #86adb1;
  --color-tip-of-the-iceberg-500: #689195;
  --color-tip-of-the-iceberg-600: #4e7579;
  --color-tip-of-the-iceberg-700: #395d60;
  --color-tip-of-the-iceberg-800: #29484b;
  --color-tip-of-the-iceberg-900: #1d383a;
  --color-tip-of-the-iceberg-950: #0f2325;
  --color-cola: #422e10;
  --color-cola-50: #fff3e4;
  --color-cola-100: #f9e9d4;
  --color-cola-200: #e7d4bc;
  --color-cola-300: #d3bda1;
  --color-cola-400: #b59d7f;
  --color-cola-500: #998262;
  --color-cola-600: #7d6749;
  --color-cola-700: #655136;
  --color-cola-800: #503f27;
  --color-cola-900: #422e10;
  --color-cola-950: #271d0e;
  --color-violaceous: #bf94cd;
  --color-violaceous-50: #fcf3ff;
  --color-violaceous-100: #f9e6ff;
  --color-violaceous-200: #eecef9;
  --color-violaceous-300: #dbb6e7;
  --color-violaceous-400: #bf94cd;
  --color-violaceous-500: #a278af;
  --color-violaceous-600: #855d92;
  --color-violaceous-700: #6b4777;
  --color-violaceous-800: #55355f;
  --color-violaceous-900: #42274b;
  --color-violaceous-950: #2a1630;
  --color-olivary: #735c2b;
  --color-olivary-50: #fff4de;
  --color-olivary-100: #fae9ca;
  --color-olivary-200: #ead7b2;
  --color-olivary-300: #d8c298;
  --color-olivary-400: #bca475;
  --color-olivary-500: #a28a59;
  --color-olivary-600: #897141;
  --color-olivary-700: #735c2b;
  --color-olivary-800: #5b471d;
  --color-olivary-900: #473612;
  --color-olivary-950: #2e2207;
  --color-muted-purple: #856197;
  --color-muted-purple-50: #faf1ff;
  --color-muted-purple-100: #f6e5ff;
  --color-muted-purple-200: #eacdf9;
  --color-muted-purple-300: #d6b6e7;
  --color-muted-purple-400: #ba96cc;
  --color-muted-purple-500: #9f7ab2;
  --color-muted-purple-600: #856197;
  --color-muted-purple-700: #6b4b7c;
  --color-muted-purple-800: #553863;
  --color-muted-purple-900: #422a4e;
  --color-muted-purple-950: #2a1833;
}

Similar palettes