Pine Needle to Mother Earth color palette

284C44Pine Needle D3DFFBPuffy Cloud 675F48Ochicha Latte C9B2BCStrawberry Latte 7C9E90Mother Earth

About this palette

Pine Needle to Mother Earth is a 5-color muted, cool palette: #284C44 (Pine Needle), #D3DFFB (Puffy Cloud), #675F48 (Ochicha Latte), #C9B2BC (Strawberry Latte), #7C9E90 (Mother Earth). It mixes turquoise, blue, brown, gray tones and feels cool overall. The strongest text pairing is #284C44 on #D3DFFB with a contrast ratio of 7.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Needle	rgb(40, 76, 68)	hsl(167, 31%, 23%)
Puffy Cloud	rgb(211, 223, 251)	hsl(222, 83%, 91%)
Ochicha Latte	rgb(103, 95, 72)	hsl(45, 18%, 34%)
Strawberry Latte	rgb(201, 178, 188)	hsl(334, 18%, 74%)
Mother Earth	rgb(124, 158, 144)	hsl(155, 15%, 55%)

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.

Aa7.12:1 Very good#284C44 on #D3DFFB
Aa7.12:1 Very good#D3DFFB on #284C44
Aa4.79:1 Good#284C44 on #C9B2BC
Aa4.79:1 Good#C9B2BC on #284C44
Aa4.75:1 Good#D3DFFB on #675F48
Aa4.75:1 Good#675F48 on #D3DFFB
Aa3.24:1 Poor#284C44 on #7C9E90
Aa3.24:1 Poor#7C9E90 on #284C44

Color blindness preview

CSS variables

/* Pine Needle to Mother Earth — https://swatchly.xyz/palette/284c44-d3dffb-675f48-c9b2bc-7c9e90 */
:root {
  --pine-needle: #284c44;
  --puffy-cloud: #d3dffb;
  --ochicha-latte: #675f48;
  --strawberry-latte: #c9b2bc;
  --mother-earth: #7c9e90;
}

Tailwind CSS v4

/* Pine Needle to Mother Earth — https://swatchly.xyz/palette/284c44-d3dffb-675f48-c9b2bc-7c9e90 */
@theme {
  --color-pine-needle: #284c44;
  --color-pine-needle-50: #e5fbf5;
  --color-pine-needle-100: #d9f2eb;
  --color-pine-needle-200: #c2dfd7;
  --color-pine-needle-300: #a8cac1;
  --color-pine-needle-400: #86aba2;
  --color-pine-needle-500: #6b9087;
  --color-pine-needle-600: #51766d;
  --color-pine-needle-700: #3d5f57;
  --color-pine-needle-800: #284c44;
  --color-pine-needle-900: #213a34;
  --color-pine-needle-950: #122420;
  --color-puffy-cloud: #d3dffb;
  --color-puffy-cloud-50: #f8faff;
  --color-puffy-cloud-100: #ecf2ff;
  --color-puffy-cloud-200: #d3dffb;
  --color-puffy-cloud-300: #bdc7de;
  --color-puffy-cloud-400: #9ba6bf;
  --color-puffy-cloud-500: #7f89a3;
  --color-puffy-cloud-600: #646e86;
  --color-puffy-cloud-700: #4d566c;
  --color-puffy-cloud-800: #3a4255;
  --color-puffy-cloud-900: #2c3342;
  --color-puffy-cloud-950: #1a1f2a;
  --color-ochicha-latte: #675f48;
  --color-ochicha-latte-50: #faf5e6;
  --color-ochicha-latte-100: #f1ebdb;
  --color-ochicha-latte-200: #e0d9c6;
  --color-ochicha-latte-300: #ccc5af;
  --color-ochicha-latte-400: #afa78f;
  --color-ochicha-latte-500: #958d75;
  --color-ochicha-latte-600: #7c745d;
  --color-ochicha-latte-700: #675f48;
  --color-ochicha-latte-800: #514a37;
  --color-ochicha-latte-900: #3e3928;
  --color-ochicha-latte-950: #282317;
  --color-strawberry-latte: #c9b2bc;
  --color-strawberry-latte-50: #fbedf3;
  --color-strawberry-latte-100: #f1e1e8;
  --color-strawberry-latte-200: #decbd3;
  --color-strawberry-latte-300: #c9b2bc;
  --color-strawberry-latte-400: #aa949e;
  --color-strawberry-latte-500: #907b84;
  --color-strawberry-latte-600: #76626b;
  --color-strawberry-latte-700: #5f4d55;
  --color-strawberry-latte-800: #4c3c43;
  --color-strawberry-latte-900: #3c2e34;
  --color-strawberry-latte-950: #261c20;
  --color-mother-earth: #7c9e90;
  --color-mother-earth-50: #e2f6ed;
  --color-mother-earth-100: #d3ebe1;
  --color-mother-earth-200: #bad6ca;
  --color-mother-earth-300: #9fbfb1;
  --color-mother-earth-400: #7c9e90;
  --color-mother-earth-500: #648577;
  --color-mother-earth-600: #4d6c5f;
  --color-mother-earth-700: #3a574c;
  --color-mother-earth-800: #2c453b;
  --color-mother-earth-900: #21362e;
  --color-mother-earth-950: #13231d;
}