Maritime Outpost to Leafy color palette

1A4A81Maritime Outpost 361513Bruised Plum FBC8CCKendall Rose 5B7249Irish Clover 94A9D6Old World 67965DLeafy

Open in generator Export PNG, PDF, ASE…

About this palette

Maritime Outpost to Leafy is a 6-color cool palette: #1A4A81 (Maritime Outpost), #361513 (Bruised Plum), #FBC8CC (Kendall Rose), #5B7249 (Irish Clover), #94A9D6 (Old World), #67965D (Leafy). It mixes blue, brown, pink, green tones and feels cool overall. The strongest text pairing is #361513 on #FBC8CC with a contrast ratio of 11.18:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maritime Outpost	rgb(26, 74, 129)	hsl(212, 66%, 30%)
Bruised Plum	rgb(54, 21, 19)	hsl(3, 48%, 14%)
Kendall Rose	rgb(251, 200, 204)	hsl(355, 86%, 88%)
Irish Clover	rgb(91, 114, 73)	hsl(94, 22%, 37%)
Old World	rgb(148, 169, 214)	hsl(221, 45%, 71%)
Leafy	rgb(103, 150, 93)	hsl(109, 23%, 48%)

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.

Aa11.18:1 Very good#361513 on #FBC8CC
Aa11.18:1 Very good#FBC8CC on #361513
Aa6.99:1 Good#361513 on #94A9D6
Aa6.99:1 Good#94A9D6 on #361513
Aa6.08:1 Good#1A4A81 on #FBC8CC
Aa6.08:1 Good#FBC8CC on #1A4A81
Aa4.79:1 Good#361513 on #67965D
Aa4.79:1 Good#67965D on #361513

Color blindness preview

CSS variables

/* Maritime Outpost to Leafy — https://swatchly.xyz/palette/1a4a81-361513-fbc8cc-5b7249-94a9d6-67965d */
:root {
  --maritime-outpost: #1a4a81;
  --bruised-plum: #361513;
  --kendall-rose: #fbc8cc;
  --irish-clover: #5b7249;
  --old-world: #94a9d6;
  --leafy: #67965d;
}

Tailwind CSS v4

/* Maritime Outpost to Leafy — https://swatchly.xyz/palette/1a4a81-361513-fbc8cc-5b7249-94a9d6-67965d */
@theme {
  --color-maritime-outpost: #1a4a81;
  --color-maritime-outpost-50: #eff6ff;
  --color-maritime-outpost-100: #deedff;
  --color-maritime-outpost-200: #bddaff;
  --color-maritime-outpost-300: #9ac6fc;
  --color-maritime-outpost-400: #78a7e2;
  --color-maritime-outpost-500: #5c8dc9;
  --color-maritime-outpost-600: #4373ad;
  --color-maritime-outpost-700: #305d92;
  --color-maritime-outpost-800: #1a4a81;
  --color-maritime-outpost-900: #163962;
  --color-maritime-outpost-950: #0a2442;
  --color-bruised-plum: #361513;
  --color-bruised-plum-50: #fff2f0;
  --color-bruised-plum-100: #ffe4e1;
  --color-bruised-plum-200: #f1ceca;
  --color-bruised-plum-300: #ddb6b2;
  --color-bruised-plum-400: #c09691;
  --color-bruised-plum-500: #a47a76;
  --color-bruised-plum-600: #88615d;
  --color-bruised-plum-700: #6f4b48;
  --color-bruised-plum-800: #593a37;
  --color-bruised-plum-900: #462c29;
  --color-bruised-plum-950: #361513;
  --color-kendall-rose: #fbc8cc;
  --color-kendall-rose-50: #fff1f2;
  --color-kendall-rose-100: #ffe3e5;
  --color-kendall-rose-200: #fbc8cc;
  --color-kendall-rose-300: #dfb4b7;
  --color-kendall-rose-400: #c29397;
  --color-kendall-rose-500: #a6787c;
  --color-kendall-rose-600: #8a5e62;
  --color-kendall-rose-700: #70494d;
  --color-kendall-rose-800: #59373b;
  --color-kendall-rose-900: #46292c;
  --color-kendall-rose-950: #2d191b;
  --color-irish-clover: #5b7249;
  --color-irish-clover-50: #ecfbe2;
  --color-irish-clover-100: #e0f1d5;
  --color-irish-clover-200: #cbdebc;
  --color-irish-clover-300: #b2c8a2;
  --color-irish-clover-400: #91a97f;
  --color-irish-clover-500: #758d63;
  --color-irish-clover-600: #5b7249;
  --color-irish-clover-700: #475b36;
  --color-irish-clover-800: #364728;
  --color-irish-clover-900: #28371c;
  --color-irish-clover-950: #18220f;
  --color-old-world: #94a9d6;
  --color-old-world-50: #f4f8ff;
  --color-old-world-100: #e8efff;
  --color-old-world-200: #cdddff;
  --color-old-world-300: #b6c8ee;
  --color-old-world-400: #94a9d6;
  --color-old-world-500: #788cb7;
  --color-old-world-600: #5d7099;
  --color-old-world-700: #47587e;
  --color-old-world-800: #354465;
  --color-old-world-900: #27334f;
  --color-old-world-950: #161f32;
  --color-leafy: #67965d;
  --color-leafy-50: #e3ffdd;
  --color-leafy-100: #d7f6d0;
  --color-leafy-200: #c0e5b8;
  --color-leafy-300: #a6d09d;
  --color-leafy-400: #83b179;
  --color-leafy-500: #67965d;
  --color-leafy-600: #4d7a44;
  --color-leafy-700: #396230;
  --color-leafy-800: #294d21;
  --color-leafy-900: #1d3c16;
  --color-leafy-950: #0f260a;
}