Maritime to Escargot Color Palette

About this palette

Maritime to Escargot is a 5-color pastel, light palette: #BCCAE6 (Maritime), #F0B8E3 (Rosecco), #FFCAD4 (Love Fumes), #C6F8EA (Glacial Drift), #FFF1D9 (Escargot). It mixes blue, pink, white tones and feels balanced overall. The strongest text pairing is #F0B8E3 on #FFF1D9 with a contrast ratio of 1.49:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maritime	rgb(188, 202, 230)	hsl(220, 46%, 82%)
Rosecco	rgb(240, 184, 227)	hsl(314, 65%, 83%)
Love Fumes	rgb(255, 202, 212)	hsl(349, 100%, 90%)
Glacial Drift	rgb(198, 248, 234)	hsl(163, 78%, 87%)
Escargot	rgb(255, 241, 217)	hsl(38, 100%, 93%)

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.

Color blindness preview

CSS variables

/* Maritime to Escargot — https://swatchly.xyz/palette/bccae6-f0b8e3-ffcad4-c6f8ea-fff1d9 */
:root {
  --maritime: #bccae6;
  --rosecco: #f0b8e3;
  --love-fumes: #ffcad4;
  --glacial-drift: #c6f8ea;
  --escargot: #fff1d9;
}

Tailwind CSS v4

/* Maritime to Escargot — https://swatchly.xyz/palette/bccae6-f0b8e3-ffcad4-c6f8ea-fff1d9 */
@theme {
  --color-maritime: #bccae6;
  --color-maritime-50: #f7faff;
  --color-maritime-100: #ebf1ff;
  --color-maritime-200: #d5dff3;
  --color-maritime-300: #bccae6;
  --color-maritime-400: #9ca9c2;
  --color-maritime-500: #7f8ca6;
  --color-maritime-600: #647089;
  --color-maritime-700: #4d586e;
  --color-maritime-800: #3a4457;
  --color-maritime-900: #2b3343;
  --color-maritime-950: #191f2b;
  --color-rosecco: #f0b8e3;
  --color-rosecco-50: #ffe4f8;
  --color-rosecco-100: #fbd4f2;
  --color-rosecco-200: #f0b8e3;
  --color-rosecco-300: #d7a6cc;
  --color-rosecco-400: #bb87af;
  --color-rosecco-500: #a16e96;
  --color-rosecco-600: #86567c;
  --color-rosecco-700: #6e4265;
  --color-rosecco-800: #593352;
  --color-rosecco-900: #462640;
  --color-rosecco-950: #2d1628;
  --color-love-fumes: #ffcad4;
  --color-love-fumes-50: #fff4f6;
  --color-love-fumes-100: #ffe6eb;
  --color-love-fumes-200: #ffcad4;
  --color-love-fumes-300: #e2b6be;
  --color-love-fumes-400: #c4949e;
  --color-love-fumes-500: #a87882;
  --color-love-fumes-600: #8b5e67;
  --color-love-fumes-700: #714851;
  --color-love-fumes-800: #5a373e;
  --color-love-fumes-900: #47292f;
  --color-love-fumes-950: #2d181d;
  --color-glacial-drift: #c6f8ea;
  --color-glacial-drift-50: #e2fcf4;
  --color-glacial-drift-100: #c6f8ea;
  --color-glacial-drift-200: #bde1d7;
  --color-glacial-drift-300: #a2cbc0;
  --color-glacial-drift-400: #7fada0;
  --color-glacial-drift-500: #629185;
  --color-glacial-drift-600: #49766b;
  --color-glacial-drift-700: #355f54;
  --color-glacial-drift-800: #254a41;
  --color-glacial-drift-900: #1a3a32;
  --color-glacial-drift-950: #0d241f;
  --color-escargot: #fff1d9;
  --color-escargot-50: #fff1d9;
  --color-escargot-100: #f1e8d9;
  --color-escargot-200: #dfd5c3;
  --color-escargot-300: #cabeab;
  --color-escargot-400: #ac9f8a;
  --color-escargot-500: #91846e;
  --color-escargot-600: #766a55;
  --color-escargot-700: #5f5441;
  --color-escargot-800: #4a4131;
  --color-escargot-900: #3a3224;
  --color-escargot-950: #241e14;
}