Slightly in Love to Rainy Mood color palette

FFE4DFSlightly in Love 351C1ABruised Plum 115F6ABeau Vert E0AFAFSakura 46949DRainy Mood

About this palette

Slightly in Love to Rainy Mood is a 5-color muted, vintage palette: #FFE4DF (Slightly in Love), #351C1A (Bruised Plum), #115F6A (Beau Vert), #E0AFAF (Sakura), #46949D (Rainy Mood). It mixes white, brown, turquoise, pink tones and feels balanced overall. The strongest text pairing is #FFE4DF on #351C1A with a contrast ratio of 13.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Slightly in Love	rgb(255, 228, 223)	hsl(9, 100%, 94%)
Bruised Plum	rgb(53, 28, 26)	hsl(4, 34%, 15%)
Beau Vert	rgb(17, 95, 106)	hsl(187, 72%, 24%)
Sakura	rgb(224, 175, 175)	hsl(0, 44%, 78%)
Rainy Mood	rgb(70, 148, 157)	hsl(186, 38%, 45%)

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.

Aa13.07:1 Super#FFE4DF on #351C1A
Aa13.07:1 Super#351C1A on #FFE4DF
Aa8.20:1 Very good#351C1A on #E0AFAF
Aa8.20:1 Very good#E0AFAF on #351C1A
Aa6.07:1 Good#FFE4DF on #115F6A
Aa6.07:1 Good#115F6A on #FFE4DF
Aa4.49:1 Poor#351C1A on #46949D
Aa4.49:1 Poor#46949D on #351C1A

Color blindness preview

CSS variables

/* Slightly in Love to Rainy Mood — https://swatchly.xyz/palette/ffe4df-351c1a-115f6a-e0afaf-46949d */
:root {
  --slightly-in-love: #ffe4df;
  --bruised-plum: #351c1a;
  --beau-vert: #115f6a;
  --sakura: #e0afaf;
  --rainy-mood: #46949d;
}

Tailwind CSS v4

/* Slightly in Love to Rainy Mood — https://swatchly.xyz/palette/ffe4df-351c1a-115f6a-e0afaf-46949d */
@theme {
  --color-slightly-in-love: #ffe4df;
  --color-slightly-in-love-50: #fff2ef;
  --color-slightly-in-love-100: #ffe4df;
  --color-slightly-in-love-200: #e6d2cf;
  --color-slightly-in-love-300: #d1bbb7;
  --color-slightly-in-love-400: #b39b97;
  --color-slightly-in-love-500: #98807b;
  --color-slightly-in-love-600: #7c6661;
  --color-slightly-in-love-700: #64504c;
  --color-slightly-in-love-800: #4f3d3a;
  --color-slightly-in-love-900: #3e2f2c;
  --color-slightly-in-love-950: #271c1a;
  --color-bruised-plum: #351c1a;
  --color-bruised-plum-50: #fff2f0;
  --color-bruised-plum-100: #fce5e3;
  --color-bruised-plum-200: #ebd0ce;
  --color-bruised-plum-300: #d6b9b6;
  --color-bruised-plum-400: #b99995;
  --color-bruised-plum-500: #9e7e7b;
  --color-bruised-plum-600: #836562;
  --color-bruised-plum-700: #6c504d;
  --color-bruised-plum-800: #573f3d;
  --color-bruised-plum-900: #46312f;
  --color-bruised-plum-950: #351c1a;
  --color-beau-vert: #115f6a;
  --color-beau-vert-50: #e2fbff;
  --color-beau-vert-100: #caf4fb;
  --color-beau-vert-200: #afe2eb;
  --color-beau-vert-300: #92ccd6;
  --color-beau-vert-400: #6badb9;
  --color-beau-vert-500: #4c929d;
  --color-beau-vert-600: #317681;
  --color-beau-vert-700: #115f6a;
  --color-beau-vert-800: #0c4a53;
  --color-beau-vert-900: #033941;
  --color-beau-vert-950: #002429;
  --color-sakura: #e0afaf;
  --color-sakura-50: #ffefef;
  --color-sakura-100: #ffe0e0;
  --color-sakura-200: #f0cac9;
  --color-sakura-300: #e0afaf;
  --color-sakura-400: #bf9191;
  --color-sakura-500: #a47677;
  --color-sakura-600: #885d5e;
  --color-sakura-700: #6f4849;
  --color-sakura-800: #593738;
  --color-sakura-900: #462a2a;
  --color-sakura-950: #2d1919;
  --color-rainy-mood: #46949d;
  --color-rainy-mood-50: #dffcff;
  --color-rainy-mood-100: #c7f5fb;
  --color-rainy-mood-200: #ace3ea;
  --color-rainy-mood-300: #8eced6;
  --color-rainy-mood-400: #66afb8;
  --color-rainy-mood-500: #46949d;
  --color-rainy-mood-600: #297981;
  --color-rainy-mood-700: #126169;
  --color-rainy-mood-800: #004c53;
  --color-rainy-mood-900: #003b40;
  --color-rainy-mood-950: #002529;
}