Inland Waters to Green Tea color palette

7D93A0Inland Waters E7D1D5Ephemeral Red 737765Mangrove 293A47Astral Nomad 5F4B52Dark Chocolate B2B799Green Tea

Open in generator Export PNG, PDF, ASE…

About this palette

Inland Waters to Green Tea is a 6-color muted palette: #7D93A0 (Inland Waters), #E7D1D5 (Ephemeral Red), #737765 (Mangrove), #293A47 (Astral Nomad), #5F4B52 (Dark Chocolate), #B2B799 (Green Tea). It mixes gray, green tones and feels cool overall. The strongest text pairing is #E7D1D5 on #293A47 with a contrast ratio of 8.09:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Inland Waters	rgb(125, 147, 160)	hsl(202, 16%, 56%)
Ephemeral Red	rgb(231, 209, 213)	hsl(349, 31%, 86%)
Mangrove	rgb(115, 119, 101)	hsl(73, 8%, 43%)
Astral Nomad	rgb(41, 58, 71)	hsl(206, 27%, 22%)
Dark Chocolate	rgb(95, 75, 82)	hsl(339, 12%, 33%)
Green Tea	rgb(178, 183, 153)	hsl(70, 17%, 66%)

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.09:1 Very good#E7D1D5 on #293A47
Aa8.09:1 Very good#293A47 on #E7D1D5
Aa5.66:1 Good#293A47 on #B2B799
Aa5.66:1 Good#B2B799 on #293A47
Aa5.54:1 Good#E7D1D5 on #5F4B52
Aa5.54:1 Good#5F4B52 on #E7D1D5
Aa3.87:1 Poor#5F4B52 on #B2B799
Aa3.87:1 Poor#B2B799 on #5F4B52

Color blindness preview

CSS variables

/* Inland Waters to Green Tea — https://swatchly.xyz/palette/7d93a0-e7d1d5-737765-293a47-5f4b52-b2b799 */
:root {
  --inland-waters: #7d93a0;
  --ephemeral-red: #e7d1d5;
  --mangrove: #737765;
  --astral-nomad: #293a47;
  --dark-chocolate: #5f4b52;
  --green-tea: #b2b799;
}

Tailwind CSS v4

/* Inland Waters to Green Tea — https://swatchly.xyz/palette/7d93a0-e7d1d5-737765-293a47-5f4b52-b2b799 */
@theme {
  --color-inland-waters: #7d93a0;
  --color-inland-waters-50: #eef9ff;
  --color-inland-waters-100: #e3f1f9;
  --color-inland-waters-200: #cfdfe9;
  --color-inland-waters-300: #b8cbd6;
  --color-inland-waters-400: #98adba;
  --color-inland-waters-500: #7d93a0;
  --color-inland-waters-600: #617783;
  --color-inland-waters-700: #4b5e69;
  --color-inland-waters-800: #384953;
  --color-inland-waters-900: #293840;
  --color-inland-waters-950: #182228;
  --color-ephemeral-red: #e7d1d5;
  --color-ephemeral-red-50: #fef1f4;
  --color-ephemeral-red-100: #f5e7ea;
  --color-ephemeral-red-200: #e7d1d5;
  --color-ephemeral-red-300: #cebbbf;
  --color-ephemeral-red-400: #b09c9f;
  --color-ephemeral-red-500: #948084;
  --color-ephemeral-red-600: #79666a;
  --color-ephemeral-red-700: #615053;
  --color-ephemeral-red-800: #4d3e41;
  --color-ephemeral-red-900: #3b2f31;
  --color-ephemeral-red-950: #251d1e;
  --color-mangrove: #737765;
  --color-mangrove-50: #f4f7eb;
  --color-mangrove-100: #ecefe2;
  --color-mangrove-200: #d9ddce;
  --color-mangrove-300: #c4c8b8;
  --color-mangrove-400: #a6aa98;
  --color-mangrove-500: #8c907e;
  --color-mangrove-600: #737765;
  --color-mangrove-700: #5b5e4e;
  --color-mangrove-800: #474a3b;
  --color-mangrove-900: #36382c;
  --color-mangrove-950: #21231a;
  --color-astral-nomad: #293a47;
  --color-astral-nomad-50: #ecf7ff;
  --color-astral-nomad-100: #e0edf8;
  --color-astral-nomad-200: #cbdae6;
  --color-astral-nomad-300: #b2c4d1;
  --color-astral-nomad-400: #92a5b4;
  --color-astral-nomad-500: #788b9a;
  --color-astral-nomad-600: #5f7180;
  --color-astral-nomad-700: #4a5b68;
  --color-astral-nomad-800: #3a4954;
  --color-astral-nomad-900: #293a47;
  --color-astral-nomad-950: #1b242c;
  --color-dark-chocolate: #5f4b52;
  --color-dark-chocolate-50: #fff1f5;
  --color-dark-chocolate-100: #f6e6ec;
  --color-dark-chocolate-200: #e3d1d7;
  --color-dark-chocolate-300: #ceb9c0;
  --color-dark-chocolate-400: #af98a0;
  --color-dark-chocolate-500: #927c84;
  --color-dark-chocolate-600: #766269;
  --color-dark-chocolate-700: #5f4b52;
  --color-dark-chocolate-800: #4a3a40;
  --color-dark-chocolate-900: #392c31;
  --color-dark-chocolate-950: #241b1e;
  --color-green-tea: #b2b799;
  --color-green-tea-50: #edf0de;
  --color-green-tea-100: #e1e4cf;
  --color-green-tea-200: #cbcfb6;
  --color-green-tea-300: #b2b799;
  --color-green-tea-400: #959a7d;
  --color-green-tea-500: #7c8165;
  --color-green-tea-600: #65694e;
  --color-green-tea-700: #50543c;
  --color-green-tea-800: #40432e;
  --color-green-tea-900: #323523;
  --color-green-tea-950: #1f2114;
}