Maritime to Vanilla Cream Color Palette

About this palette

Maritime to Vanilla Cream is a 5-color pastel, light, warm palette: #BDC8E4 (Maritime), #FFDAD5 (Strawberry Blonde), #D9BEA3 (Dune), #BDF2FA (Pale Sky), #F9E1AD (Vanilla Cream). It mixes blue, pink, orange, turquoise, yellow tones and feels warm overall. The strongest text pairing is #D9BEA3 on #BDF2FA with a contrast ratio of 1.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maritime	rgb(189, 200, 228)	hsl(223, 42%, 82%)
Strawberry Blonde	rgb(255, 218, 213)	hsl(7, 100%, 92%)
Dune	rgb(217, 190, 163)	hsl(30, 42%, 75%)
Pale Sky	rgb(189, 242, 250)	hsl(188, 86%, 86%)
Vanilla Cream	rgb(249, 225, 173)	hsl(41, 86%, 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.

Color blindness preview

CSS variables

/* Maritime to Vanilla Cream — https://swatchly.xyz/palette/bdc8e4-ffdad5-d9bea3-bdf2fa-f9e1ad */
:root {
  --maritime: #bdc8e4;
  --strawberry-blonde: #ffdad5;
  --dune: #d9bea3;
  --pale-sky: #bdf2fa;
  --vanilla-cream: #f9e1ad;
}

Tailwind CSS v4

/* Maritime to Vanilla Cream — https://swatchly.xyz/palette/bdc8e4-ffdad5-d9bea3-bdf2fa-f9e1ad */
@theme {
  --color-maritime: #bdc8e4;
  --color-maritime-50: #f6f9ff;
  --color-maritime-100: #eaf0ff;
  --color-maritime-200: #d6def2;
  --color-maritime-300: #bdc8e4;
  --color-maritime-400: #9da7c1;
  --color-maritime-500: #808aa4;
  --color-maritime-600: #656f87;
  --color-maritime-700: #4e576d;
  --color-maritime-800: #3b4356;
  --color-maritime-900: #2c3243;
  --color-maritime-950: #1a1f2b;
  --color-strawberry-blonde: #ffdad5;
  --color-strawberry-blonde-50: #ffe9e6;
  --color-strawberry-blonde-100: #ffdad5;
  --color-strawberry-blonde-200: #e6cac6;
  --color-strawberry-blonde-300: #d3b4b0;
  --color-strawberry-blonde-400: #b69591;
  --color-strawberry-blonde-500: #9c7b76;
  --color-strawberry-blonde-600: #81625e;
  --color-strawberry-blonde-700: #694d4a;
  --color-strawberry-blonde-800: #543b38;
  --color-strawberry-blonde-900: #412d2a;
  --color-strawberry-blonde-950: #2a1b19;
  --color-dune: #d9bea3;
  --color-dune-50: #fff4ea;
  --color-dune-100: #fbead9;
  --color-dune-200: #ead6c2;
  --color-dune-300: #d9bea3;
  --color-dune-400: #b79e85;
  --color-dune-500: #9c8369;
  --color-dune-600: #806850;
  --color-dune-700: #67513b;
  --color-dune-800: #513f2b;
  --color-dune-900: #3f2f1f;
  --color-dune-950: #281d11;
  --color-pale-sky: #bdf2fa;
  --color-pale-sky-50: #daf8fd;
  --color-pale-sky-100: #bdf2fa;
  --color-pale-sky-200: #b5dce2;
  --color-pale-sky-300: #9bc7ce;
  --color-pale-sky-400: #78a9b1;
  --color-pale-sky-500: #5c8f96;
  --color-pale-sky-600: #43747b;
  --color-pale-sky-700: #305d64;
  --color-pale-sky-800: #21494f;
  --color-pale-sky-900: #16393e;
  --color-pale-sky-950: #0a2327;
  --color-vanilla-cream: #f9e1ad;
  --color-vanilla-cream-50: #fcedcf;
  --color-vanilla-cream-100: #f9e1ad;
  --color-vanilla-cream-200: #e2cfa8;
  --color-vanilla-cream-300: #ceba8e;
  --color-vanilla-cream-400: #b19b6b;
  --color-vanilla-cream-500: #978150;
  --color-vanilla-cream-600: #7d6838;
  --color-vanilla-cream-700: #665326;
  --color-vanilla-cream-800: #514018;
  --color-vanilla-cream-900: #3f310f;
  --color-vanilla-cream-950: #281e06;
}