Mother Earth to Shipyard Color Palette

About this palette

Mother Earth to Shipyard is a 5-color muted, cool palette: #899A84 (Mother Earth), #F7E6DC (Grandma’s Cameo), #A8BFAB (Meadow Morn), #45384D (Call It a Night), #537181 (Shipyard). It mixes green, white, purple, blue tones and feels cool overall. The strongest text pairing is #F7E6DC on #45384D with a contrast ratio of 8.99:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mother Earth	rgb(137, 154, 132)	hsl(106, 10%, 56%)
Grandma’s Cameo	rgb(247, 230, 220)	hsl(22, 63%, 92%)
Meadow Morn	rgb(168, 191, 171)	hsl(128, 15%, 70%)
Call It a Night	rgb(69, 56, 77)	hsl(277, 16%, 26%)
Shipyard	rgb(83, 113, 129)	hsl(201, 22%, 42%)

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.

Aa8.99:1 Very good#F7E6DC on #45384D
Aa8.99:1 Very good#45384D on #F7E6DC
Aa5.56:1 Good#A8BFAB on #45384D
Aa5.56:1 Good#45384D on #A8BFAB
Aa4.28:1 Poor#F7E6DC on #537181
Aa4.28:1 Poor#537181 on #F7E6DC
Aa3.64:1 Poor#899A84 on #45384D
Aa3.64:1 Poor#45384D on #899A84

Color blindness preview

CSS variables

/* Mother Earth to Shipyard — https://swatchly.xyz/palette/899a84-f7e6dc-a8bfab-45384d-537181 */
:root {
  --mother-earth: #899a84;
  --grandma-s-cameo: #f7e6dc;
  --meadow-morn: #a8bfab;
  --call-it-a-night: #45384d;
  --shipyard: #537181;
}

Tailwind CSS v4

/* Mother Earth to Shipyard — https://swatchly.xyz/palette/899a84-f7e6dc-a8bfab-45384d-537181 */
@theme {
  --color-mother-earth: #899a84;
  --color-mother-earth-50: #e9f4e6;
  --color-mother-earth-100: #dce8d8;
  --color-mother-earth-200: #c5d3c1;
  --color-mother-earth-300: #abbba6;
  --color-mother-earth-400: #899a84;
  --color-mother-earth-500: #71816c;
  --color-mother-earth-600: #596955;
  --color-mother-earth-700: #465442;
  --color-mother-earth-800: #374333;
  --color-mother-earth-900: #2a3427;
  --color-mother-earth-950: #1a2218;
  --color-grandma-s-cameo: #f7e6dc;
  --color-grandma-s-cameo-50: #fbf2ec;
  --color-grandma-s-cameo-100: #f7e6dc;
  --color-grandma-s-cameo-200: #e0d4cc;
  --color-grandma-s-cameo-300: #cbbdb5;
  --color-grandma-s-cameo-400: #ad9d94;
  --color-grandma-s-cameo-500: #928279;
  --color-grandma-s-cameo-600: #776860;
  --color-grandma-s-cameo-700: #5f524b;
  --color-grandma-s-cameo-800: #4b4039;
  --color-grandma-s-cameo-900: #3a312b;
  --color-grandma-s-cameo-950: #241e1a;
  --color-meadow-morn: #a8bfab;
  --color-meadow-morn-50: #e7f5e9;
  --color-meadow-morn-100: #daeadc;
  --color-meadow-morn-200: #c3d6c5;
  --color-meadow-morn-300: #a8bfab;
  --color-meadow-morn-400: #8ba18e;
  --color-meadow-morn-500: #718774;
  --color-meadow-morn-600: #596e5c;
  --color-meadow-morn-700: #465848;
  --color-meadow-morn-800: #364638;
  --color-meadow-morn-900: #29372b;
  --color-meadow-morn-950: #18221a;
  --color-call-it-a-night: #45384d;
  --color-call-it-a-night-50: #faf2ff;
  --color-call-it-a-night-100: #f1e7f7;
  --color-call-it-a-night-200: #ded2e6;
  --color-call-it-a-night-300: #c7bad0;
  --color-call-it-a-night-400: #a899b1;
  --color-call-it-a-night-500: #8c7d95;
  --color-call-it-a-night-600: #706279;
  --color-call-it-a-night-700: #584c60;
  --color-call-it-a-night-800: #45384d;
  --color-call-it-a-night-900: #342b3a;
  --color-call-it-a-night-950: #201a24;
  --color-shipyard: #537181;
  --color-shipyard-50: #eaf8ff;
  --color-shipyard-100: #dbeffa;
  --color-shipyard-200: #c4dce9;
  --color-shipyard-300: #aac6d5;
  --color-shipyard-400: #89a7b7;
  --color-shipyard-500: #6d8c9c;
  --color-shipyard-600: #537181;
  --color-shipyard-700: #3f5a68;
  --color-shipyard-800: #2f4653;
  --color-shipyard-900: #223641;
  --color-shipyard-950: #132229;
}