Start generating

Moonlit Forest to Never Forget color palette

446E64Moonlit ForestB2B8DFBlue Lips554047Chinotto9C9378PebbleDEC9A7Fiji SandsA4737FNever Forget
Open in generator Export PNG, PDF, ASE…

About this palette

Moonlit Forest to Never Forget is a 6-color muted, vintage palette: #446E64 (Moonlit Forest), #B2B8DF (Blue Lips), #554047 (Chinotto), #9C9378 (Pebble), #DEC9A7 (Fiji Sands), #A4737F (Never Forget). It mixes turquoise, purple, gray, yellow, pink tones and feels warm overall. The strongest text pairing is #554047 on #DEC9A7 with a contrast ratio of 5.89:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Moonlit Forestrgb(68, 110, 100)hsl(166, 24%, 35%)
Blue Lipsrgb(178, 184, 223)hsl(232, 41%, 79%)
Chinottorgb(85, 64, 71)hsl(340, 14%, 29%)
Pebblergb(156, 147, 120)hsl(45, 15%, 54%)
Fiji Sandsrgb(222, 201, 167)hsl(37, 45%, 76%)
Never Forgetrgb(164, 115, 127)hsl(345, 21%, 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.

  • Aa5.89:1 Good#554047 on #DEC9A7
  • Aa5.89:1 Good#DEC9A7 on #554047
  • Aa4.89:1 Good#B2B8DF on #554047
  • Aa4.89:1 Good#554047 on #B2B8DF
  • Aa3.56:1 Poor#446E64 on #DEC9A7
  • Aa3.56:1 Poor#DEC9A7 on #446E64
  • Aa3.10:1 Poor#554047 on #9C9378
  • Aa3.10:1 Poor#9C9378 on #554047

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Moonlit Forest to Never Forget — https://swatchly.xyz/palette/446e64-b2b8df-554047-9c9378-dec9a7-a4737f */
:root {
  --moonlit-forest: #446e64;
  --blue-lips: #b2b8df;
  --chinotto: #554047;
  --pebble: #9c9378;
  --fiji-sands: #dec9a7;
  --never-forget: #a4737f;
}

Tailwind CSS v4

/* Moonlit Forest to Never Forget — https://swatchly.xyz/palette/446e64-b2b8df-554047-9c9378-dec9a7-a4737f */
@theme {
  --color-moonlit-forest: #446e64;
  --color-moonlit-forest-50: #e3fcf5;
  --color-moonlit-forest-100: #d5f1e9;
  --color-moonlit-forest-200: #bcddd4;
  --color-moonlit-forest-300: #a0c6bc;
  --color-moonlit-forest-400: #7ca69c;
  --color-moonlit-forest-500: #5f8a7f;
  --color-moonlit-forest-600: #446e64;
  --color-moonlit-forest-700: #33584f;
  --color-moonlit-forest-800: #25453e;
  --color-moonlit-forest-900: #1a362f;
  --color-moonlit-forest-950: #0e211d;
  --color-blue-lips: #b2b8df;
  --color-blue-lips-50: #eff1ff;
  --color-blue-lips-100: #e1e5ff;
  --color-blue-lips-200: #cbd0ef;
  --color-blue-lips-300: #b2b8df;
  --color-blue-lips-400: #949abe;
  --color-blue-lips-500: #7a80a4;
  --color-blue-lips-600: #616689;
  --color-blue-lips-700: #4d5170;
  --color-blue-lips-800: #3c3f5a;
  --color-blue-lips-900: #2e3148;
  --color-blue-lips-950: #1c1e2e;
  --color-chinotto: #554047;
  --color-chinotto-50: #fff1f5;
  --color-chinotto-100: #f7e6eb;
  --color-chinotto-200: #e5d2d8;
  --color-chinotto-300: #d1bbc2;
  --color-chinotto-400: #b49ca3;
  --color-chinotto-500: #998189;
  --color-chinotto-600: #7e686f;
  --color-chinotto-700: #675359;
  --color-chinotto-800: #554047;
  --color-chinotto-900: #413137;
  --color-chinotto-950: #291e22;
  --color-pebble: #9c9378;
  --color-pebble-50: #fdf7e8;
  --color-pebble-100: #f5f0df;
  --color-pebble-200: #e5deca;
  --color-pebble-300: #d2cab3;
  --color-pebble-400: #b5ad93;
  --color-pebble-500: #9c9378;
  --color-pebble-600: #7f765c;
  --color-pebble-700: #655d45;
  --color-pebble-800: #4f4833;
  --color-pebble-900: #3c3624;
  --color-pebble-950: #252114;
  --color-fiji-sands: #dec9a7;
  --color-fiji-sands-50: #fffaf3;
  --color-fiji-sands-100: #fdf1de;
  --color-fiji-sands-200: #eddfc7;
  --color-fiji-sands-300: #dec9a7;
  --color-fiji-sands-400: #bba889;
  --color-fiji-sands-500: #9e8a6a;
  --color-fiji-sands-600: #816e4f;
  --color-fiji-sands-700: #675639;
  --color-fiji-sands-800: #504129;
  --color-fiji-sands-900: #3d311c;
  --color-fiji-sands-950: #271e0f;
  --color-never-forget: #a4737f;
  --color-never-forget-50: #fff0f3;
  --color-never-forget-100: #ffe1e8;
  --color-never-forget-200: #f2c9d2;
  --color-never-forget-300: #deb0bb;
  --color-never-forget-400: #c08f9b;
  --color-never-forget-500: #a4737f;
  --color-never-forget-600: #885a66;
  --color-never-forget-700: #6f4550;
  --color-never-forget-800: #59353e;
  --color-never-forget-900: #46282f;
  --color-never-forget-950: #2d171d;
}

Similar palettes