Moon Rock to Green Tea color palette

8F7674Moon Rock 456569Mediterranea 2A4245Emerald Forest CFC9DEDust of the Moon B6B497Green Tea

About this palette

Moon Rock to Green Tea is a 5-color muted palette: #8F7674 (Moon Rock), #456569 (Mediterranea), #2A4245 (Emerald Forest), #CFC9DE (Dust of the Moon), #B6B497 (Green Tea). It mixes gray, turquoise, yellow tones and feels balanced overall. The strongest text pairing is #2A4245 on #CFC9DE with a contrast ratio of 6.65:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moon Rock	rgb(143, 118, 116)	hsl(4, 11%, 51%)
Mediterranea	rgb(69, 101, 105)	hsl(187, 21%, 34%)
Emerald Forest	rgb(42, 66, 69)	hsl(187, 24%, 22%)
Dust of the Moon	rgb(207, 201, 222)	hsl(257, 24%, 83%)
Green Tea	rgb(182, 180, 151)	hsl(56, 18%, 65%)

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.

Aa6.65:1 Good#2A4245 on #CFC9DE
Aa6.65:1 Good#CFC9DE on #2A4245
Aa5.07:1 Good#2A4245 on #B6B497
Aa5.07:1 Good#B6B497 on #2A4245
Aa3.94:1 Poor#456569 on #CFC9DE
Aa3.94:1 Poor#CFC9DE on #456569
Aa3.00:1 Poor#456569 on #B6B497
Aa3.00:1 Poor#B6B497 on #456569

Color blindness preview

CSS variables

/* Moon Rock to Green Tea — https://swatchly.xyz/palette/8f7674-456569-2a4245-cfc9de-b6b497 */
:root {
  --moon-rock: #8f7674;
  --mediterranea: #456569;
  --emerald-forest: #2a4245;
  --dust-of-the-moon: #cfc9de;
  --green-tea: #b6b497;
}

Tailwind CSS v4

/* Moon Rock to Green Tea — https://swatchly.xyz/palette/8f7674-456569-2a4245-cfc9de-b6b497 */
@theme {
  --color-moon-rock: #8f7674;
  --color-moon-rock-50: #ffefee;
  --color-moon-rock-100: #f5e3e1;
  --color-moon-rock-200: #e2cdcb;
  --color-moon-rock-300: #ccb4b2;
  --color-moon-rock-400: #ac9390;
  --color-moon-rock-500: #8f7674;
  --color-moon-rock-600: #755e5c;
  --color-moon-rock-700: #5e4a48;
  --color-moon-rock-800: #4b3938;
  --color-moon-rock-900: #3b2c2b;
  --color-moon-rock-950: #261b1a;
  --color-mediterranea: #456569;
  --color-mediterranea-50: #e6f9fc;
  --color-mediterranea-100: #daf0f3;
  --color-mediterranea-200: #c5dfe2;
  --color-mediterranea-300: #aecbce;
  --color-mediterranea-400: #8daeb2;
  --color-mediterranea-500: #739498;
  --color-mediterranea-600: #5a7b7f;
  --color-mediterranea-700: #456569;
  --color-mediterranea-800: #344f53;
  --color-mediterranea-900: #263d40;
  --color-mediterranea-950: #152729;
  --color-emerald-forest: #2a4245;
  --color-emerald-forest-50: #e9f9fa;
  --color-emerald-forest-100: #deeff1;
  --color-emerald-forest-200: #c7dcdf;
  --color-emerald-forest-300: #aec5c8;
  --color-emerald-forest-400: #8ba5a8;
  --color-emerald-forest-500: #6f898c;
  --color-emerald-forest-600: #556d70;
  --color-emerald-forest-700: #3f5558;
  --color-emerald-forest-800: #2a4245;
  --color-emerald-forest-900: #223234;
  --color-emerald-forest-950: #131f20;
  --color-dust-of-the-moon: #cfc9de;
  --color-dust-of-the-moon-50: #efebf8;
  --color-dust-of-the-moon-100: #e4dfee;
  --color-dust-of-the-moon-200: #cfc9de;
  --color-dust-of-the-moon-300: #bab5c7;
  --color-dust-of-the-moon-400: #9d97ab;
  --color-dust-of-the-moon-500: #837e91;
  --color-dust-of-the-moon-600: #6b6577;
  --color-dust-of-the-moon-700: #565161;
  --color-dust-of-the-moon-800: #44404e;
  --color-dust-of-the-moon-900: #34313d;
  --color-dust-of-the-moon-950: #201e26;
  --color-green-tea: #b6b497;
  --color-green-tea-50: #f0efdc;
  --color-green-tea-100: #e4e2ce;
  --color-green-tea-200: #ceccb5;
  --color-green-tea-300: #b6b497;
  --color-green-tea-400: #99977c;
  --color-green-tea-500: #817f63;
  --color-green-tea-600: #69674d;
  --color-green-tea-700: #54523b;
  --color-green-tea-800: #43412d;
  --color-green-tea-900: #353422;
  --color-green-tea-950: #212013;
}