Slightly in Love to Darkest Forest color palette

About this palette

Slightly in Love to Darkest Forest is a 5-color warm, earthy, vintage palette: #FEE5D4 (Slightly in Love), #EAAB7B (Manhattan), #3690C5 (Magical Merlin), #5F477B (In the Vines), #2D2F0B (Darkest Forest). It mixes orange, blue, purple, green tones and feels warm overall. The strongest text pairing is #FEE5D4 on #2D2F0B with a contrast ratio of 11.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Slightly in Lovergb(254, 229, 212)hsl(24, 95%, 91%)
Manhattanrgb(234, 171, 123)hsl(26, 73%, 70%)
Magical Merlinrgb(54, 144, 197)hsl(202, 57%, 49%)
In the Vinesrgb(95, 71, 123)hsl(268, 27%, 38%)
Darkest Forestrgb(45, 47, 11)hsl(63, 62%, 11%)

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.

  • Aa11.41:1 Very good#FEE5D4 on #2D2F0B
  • Aa11.41:1 Very good#2D2F0B on #FEE5D4
  • Aa6.97:1 Good#EAAB7B on #2D2F0B
  • Aa6.97:1 Good#2D2F0B on #EAAB7B
  • Aa6.50:1 Good#FEE5D4 on #5F477B
  • Aa6.50:1 Good#5F477B on #FEE5D4
  • Aa3.97:1 Poor#EAAB7B on #5F477B
  • Aa3.97:1 Poor#5F477B on #EAAB7B

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Slightly in Love to Darkest Forest — https://swatchly.xyz/palette/fee5d4-eaab7b-3690c5-5f477b-2d2f0b */
:root {
  --slightly-in-love: #fee5d4;
  --manhattan: #eaab7b;
  --magical-merlin: #3690c5;
  --in-the-vines: #5f477b;
  --darkest-forest: #2d2f0b;
}

Tailwind CSS v4

/* Slightly in Love to Darkest Forest — https://swatchly.xyz/palette/fee5d4-eaab7b-3690c5-5f477b-2d2f0b */
@theme {
  --color-slightly-in-love: #fee5d4;
  --color-slightly-in-love-50: #fff2e9;
  --color-slightly-in-love-100: #fee5d4;
  --color-slightly-in-love-200: #e5d3c6;
  --color-slightly-in-love-300: #d1bcae;
  --color-slightly-in-love-400: #b39c8d;
  --color-slightly-in-love-500: #978172;
  --color-slightly-in-love-600: #7c6758;
  --color-slightly-in-love-700: #645144;
  --color-slightly-in-love-800: #4f3e33;
  --color-slightly-in-love-900: #3e3026;
  --color-slightly-in-love-950: #271d16;
  --color-manhattan: #eaab7b;
  --color-manhattan-50: #ffeee2;
  --color-manhattan-100: #ffe0ca;
  --color-manhattan-200: #f8c7a2;
  --color-manhattan-300: #eaab7b;
  --color-manhattan-400: #c98d60;
  --color-manhattan-500: #ae7344;
  --color-manhattan-600: #915a2c;
  --color-manhattan-700: #784519;
  --color-manhattan-800: #61350c;
  --color-manhattan-900: #4d2804;
  --color-manhattan-950: #321701;
  --color-magical-merlin: #3690c5;
  --color-magical-merlin-50: #ecf7ff;
  --color-magical-merlin-100: #d9efff;
  --color-magical-merlin-200: #b1dfff;
  --color-magical-merlin-300: #83cbfb;
  --color-magical-merlin-400: #59ace0;
  --color-magical-merlin-500: #3690c5;
  --color-magical-merlin-600: #1274a7;
  --color-magical-merlin-700: #005c88;
  --color-magical-merlin-800: #00486b;
  --color-magical-merlin-900: #003754;
  --color-magical-merlin-950: #002236;
  --color-in-the-vines: #5f477b;
  --color-in-the-vines-50: #f8f2ff;
  --color-in-the-vines-100: #f0e6ff;
  --color-in-the-vines-200: #e0cdfa;
  --color-in-the-vines-300: #cbb5e8;
  --color-in-the-vines-400: #ac94cc;
  --color-in-the-vines-500: #9178b0;
  --color-in-the-vines-600: #765e93;
  --color-in-the-vines-700: #5f477b;
  --color-in-the-vines-800: #4a3761;
  --color-in-the-vines-900: #39294c;
  --color-in-the-vines-950: #241832;
  --color-darkest-forest: #2d2f0b;
  --color-darkest-forest-50: #f5f8e1;
  --color-darkest-forest-100: #ebeed5;
  --color-darkest-forest-200: #d7dbbd;
  --color-darkest-forest-300: #c1c4a3;
  --color-darkest-forest-400: #a0a47f;
  --color-darkest-forest-500: #848762;
  --color-darkest-forest-600: #686c48;
  --color-darkest-forest-700: #515433;
  --color-darkest-forest-800: #3d3f24;
  --color-darkest-forest-900: #2d2f0b;
  --color-darkest-forest-950: #1a1c0c;
}

Similar palettes