Slightly in Love to Moonscape color palette

FFE5D7Slightly in Love 739D8BParisian Patina D8C1B5Cafe Latte 143543Blue Whale 6C4253Wine Stain 876B78Moonscape

Open in generator Export PNG, PDF, ASE…

About this palette

Slightly in Love to Moonscape is a 6-color muted palette: #FFE5D7 (Slightly in Love), #739D8B (Parisian Patina), #D8C1B5 (Cafe Latte), #143543 (Blue Whale), #6C4253 (Wine Stain), #876B78 (Moonscape). It mixes white, turquoise, gray, blue, red tones and feels balanced overall. The strongest text pairing is #FFE5D7 on #143543 with a contrast ratio of 10.77:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Slightly in Love	rgb(255, 229, 215)	hsl(21, 100%, 92%)
Parisian Patina	rgb(115, 157, 139)	hsl(154, 18%, 53%)
Cafe Latte	rgb(216, 193, 181)	hsl(21, 31%, 78%)
Blue Whale	rgb(20, 53, 67)	hsl(198, 54%, 17%)
Wine Stain	rgb(108, 66, 83)	hsl(336, 24%, 34%)
Moonscape	rgb(135, 107, 120)	hsl(332, 12%, 47%)

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.

Aa10.77:1 Very good#FFE5D7 on #143543
Aa10.77:1 Very good#143543 on #FFE5D7
Aa7.54:1 Very good#D8C1B5 on #143543
Aa7.54:1 Very good#143543 on #D8C1B5
Aa6.86:1 Good#FFE5D7 on #6C4253
Aa6.86:1 Good#6C4253 on #FFE5D7
Aa4.81:1 Good#D8C1B5 on #6C4253
Aa4.81:1 Good#6C4253 on #D8C1B5

Color blindness preview

CSS variables

/* Slightly in Love to Moonscape — https://swatchly.xyz/palette/ffe5d7-739d8b-d8c1b5-143543-6c4253-876b78 */
:root {
  --slightly-in-love: #ffe5d7;
  --parisian-patina: #739d8b;
  --cafe-latte: #d8c1b5;
  --blue-whale: #143543;
  --wine-stain: #6c4253;
  --moonscape: #876b78;
}

Tailwind CSS v4

/* Slightly in Love to Moonscape — https://swatchly.xyz/palette/ffe5d7-739d8b-d8c1b5-143543-6c4253-876b78 */
@theme {
  --color-slightly-in-love: #ffe5d7;
  --color-slightly-in-love-50: #fff2eb;
  --color-slightly-in-love-100: #ffe5d7;
  --color-slightly-in-love-200: #e6d3c9;
  --color-slightly-in-love-300: #d1bcb0;
  --color-slightly-in-love-400: #b39c8f;
  --color-slightly-in-love-500: #988174;
  --color-slightly-in-love-600: #7c665b;
  --color-slightly-in-love-700: #645046;
  --color-slightly-in-love-800: #4f3e35;
  --color-slightly-in-love-900: #3e2f27;
  --color-slightly-in-love-950: #271d17;
  --color-parisian-patina: #739d8b;
  --color-parisian-patina-50: #e6fef3;
  --color-parisian-patina-100: #ddf7eb;
  --color-parisian-patina-200: #c8e6d9;
  --color-parisian-patina-300: #b0d3c3;
  --color-parisian-patina-400: #8fb6a5;
  --color-parisian-patina-500: #739d8b;
  --color-parisian-patina-600: #57806f;
  --color-parisian-patina-700: #406656;
  --color-parisian-patina-800: #2e5042;
  --color-parisian-patina-900: #203d32;
  --color-parisian-patina-950: #11261d;
  --color-cafe-latte: #d8c1b5;
  --color-cafe-latte-50: #fff6f1;
  --color-cafe-latte-100: #faece4;
  --color-cafe-latte-200: #e9d8cf;
  --color-cafe-latte-300: #d8c1b5;
  --color-cafe-latte-400: #b6a196;
  --color-cafe-latte-500: #9a8479;
  --color-cafe-latte-600: #7e695f;
  --color-cafe-latte-700: #655249;
  --color-cafe-latte-800: #4f3f37;
  --color-cafe-latte-900: #3d3029;
  --color-cafe-latte-950: #261d18;
  --color-blue-whale: #143543;
  --color-blue-whale-50: #e9f8ff;
  --color-blue-whale-100: #d9effa;
  --color-blue-whale-200: #c2dcea;
  --color-blue-whale-300: #a8c6d5;
  --color-blue-whale-400: #85a7b7;
  --color-blue-whale-500: #698b9b;
  --color-blue-whale-600: #4f707f;
  --color-blue-whale-700: #3b5866;
  --color-blue-whale-800: #2a4551;
  --color-blue-whale-900: #143543;
  --color-blue-whale-950: #102027;
  --color-wine-stain: #6c4253;
  --color-wine-stain-50: #fff1f6;
  --color-wine-stain-100: #ffe2ed;
  --color-wine-stain-200: #f1cbd8;
  --color-wine-stain-300: #dcb1c1;
  --color-wine-stain-400: #be90a1;
  --color-wine-stain-500: #a27385;
  --color-wine-stain-600: #84596a;
  --color-wine-stain-700: #6c4253;
  --color-wine-stain-800: #543341;
  --color-wine-stain-900: #422632;
  --color-wine-stain-950: #2a161e;
  --color-moonscape: #876b78;
  --color-moonscape-50: #fff1f7;
  --color-moonscape-100: #fae7ef;
  --color-moonscape-200: #ead3de;
  --color-moonscape-300: #d7bdc9;
  --color-moonscape-400: #bb9eab;
  --color-moonscape-500: #a18491;
  --color-moonscape-600: #876b78;
  --color-moonscape-700: #6d545f;
  --color-moonscape-800: #56404b;
  --color-moonscape-900: #433039;
  --color-moonscape-950: #2a1d23;
}