Moonlit Forest to Jungle King Color Palette

About this palette

Moonlit Forest to Jungle King is a 5-color muted palette: #486B6C (Moonlit Forest), #D4C5D9 (Mecha Kitty), #FFF7ED (Fatback), #9A84A1 (Hatoba Pigeon), #584C35 (Jungle King). It mixes turquoise, gray, white, purple, brown tones and feels cool overall. The strongest text pairing is #FFF7ED on #584C35 with a contrast ratio of 7.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moonlit Forest	rgb(72, 107, 108)	hsl(182, 20%, 35%)
Mecha Kitty	rgb(212, 197, 217)	hsl(285, 21%, 81%)
Fatback	rgb(255, 247, 237)	hsl(33, 100%, 96%)
Hatoba Pigeon	rgb(154, 132, 161)	hsl(286, 13%, 57%)
Jungle King	rgb(88, 76, 53)	hsl(39, 25%, 28%)

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.91:1 Very good#FFF7ED on #584C35
Aa7.91:1 Very good#584C35 on #FFF7ED
Aa5.50:1 Good#486B6C on #FFF7ED
Aa5.50:1 Good#FFF7ED on #486B6C
Aa5.11:1 Good#D4C5D9 on #584C35
Aa5.11:1 Good#584C35 on #D4C5D9
Aa3.56:1 Poor#486B6C on #D4C5D9
Aa3.56:1 Poor#D4C5D9 on #486B6C

Color blindness preview

CSS variables

/* Moonlit Forest to Jungle King — https://swatchly.xyz/palette/486b6c-d4c5d9-fff7ed-9a84a1-584c35 */
:root {
  --moonlit-forest: #486b6c;
  --mecha-kitty: #d4c5d9;
  --fatback: #fff7ed;
  --hatoba-pigeon: #9a84a1;
  --jungle-king: #584c35;
}

Tailwind CSS v4

/* Moonlit Forest to Jungle King — https://swatchly.xyz/palette/486b6c-d4c5d9-fff7ed-9a84a1-584c35 */
@theme {
  --color-moonlit-forest: #486b6c;
  --color-moonlit-forest-50: #e5fafa;
  --color-moonlit-forest-100: #d7eff0;
  --color-moonlit-forest-200: #bedbdc;
  --color-moonlit-forest-300: #a3c4c5;
  --color-moonlit-forest-400: #80a4a4;
  --color-moonlit-forest-500: #638788;
  --color-moonlit-forest-600: #486b6c;
  --color-moonlit-forest-700: #375556;
  --color-moonlit-forest-800: #284344;
  --color-moonlit-forest-900: #1d3434;
  --color-moonlit-forest-950: #102021;
  --color-mecha-kitty: #d4c5d9;
  --color-mecha-kitty-50: #fdf8ff;
  --color-mecha-kitty-100: #f7effa;
  --color-mecha-kitty-200: #e6dcea;
  --color-mecha-kitty-300: #d4c5d9;
  --color-mecha-kitty-400: #b2a4b6;
  --color-mecha-kitty-500: #958799;
  --color-mecha-kitty-600: #786b7d;
  --color-mecha-kitty-700: #5f5363;
  --color-mecha-kitty-800: #4a3f4d;
  --color-mecha-kitty-900: #382f3b;
  --color-mecha-kitty-950: #231d25;
  --color-fatback: #fff7ed;
  --color-fatback-50: #fff7ed;
  --color-fatback-100: #f2ede7;
  --color-fatback-200: #ded9d1;
  --color-fatback-300: #c8c1b9;
  --color-fatback-400: #a8a198;
  --color-fatback-500: #8d857c;
  --color-fatback-600: #716b62;
  --color-fatback-700: #5a544d;
  --color-fatback-800: #47413b;
  --color-fatback-900: #37322c;
  --color-fatback-950: #221f1b;
  --color-hatoba-pigeon: #9a84a1;
  --color-hatoba-pigeon-50: #fcf3ff;
  --color-hatoba-pigeon-100: #f6e8fb;
  --color-hatoba-pigeon-200: #e5d4eb;
  --color-hatoba-pigeon-300: #d1bed8;
  --color-hatoba-pigeon-400: #b49fbb;
  --color-hatoba-pigeon-500: #9a84a1;
  --color-hatoba-pigeon-600: #7e6984;
  --color-hatoba-pigeon-700: #65516b;
  --color-hatoba-pigeon-800: #4f3e54;
  --color-hatoba-pigeon-900: #3d2f41;
  --color-hatoba-pigeon-950: #261c29;
  --color-jungle-king: #584c35;
  --color-jungle-king-50: #fcf4e5;
  --color-jungle-king-100: #f3eada;
  --color-jungle-king-200: #dfd5c1;
  --color-jungle-king-300: #c9bda6;
  --color-jungle-king-400: #a99c83;
  --color-jungle-king-500: #8c7f66;
  --color-jungle-king-600: #70644d;
  --color-jungle-king-700: #584c35;
  --color-jungle-king-800: #443b29;
  --color-jungle-king-900: #352d1e;
  --color-jungle-king-950: #211b11;
}