Slightly in Love to Infinity Color Palette

About this palette

Slightly in Love to Infinity is a 4-color muted palette: #FFE3DD (Slightly in Love), #B8A37B (Taupe), #376E77 (Ocean’s Embrace), #252932 (Infinity). It mixes white, yellow, turquoise, gray tones and feels balanced overall. The strongest text pairing is #FFE3DD on #252932 with a contrast ratio of 11.99:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Slightly in Love	rgb(255, 227, 221)	hsl(11, 100%, 93%)
Taupe	rgb(184, 163, 123)	hsl(39, 30%, 60%)
Ocean’s Embrace	rgb(55, 110, 119)	hsl(188, 37%, 34%)
Infinity	rgb(37, 41, 50)	hsl(222, 15%, 17%)

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.99:1 Very good#FFE3DD on #252932
Aa11.99:1 Very good#252932 on #FFE3DD
Aa5.94:1 Good#B8A37B on #252932
Aa5.94:1 Good#252932 on #B8A37B
Aa4.72:1 Good#FFE3DD on #376E77
Aa4.72:1 Good#376E77 on #FFE3DD

Color blindness preview

CSS variables

/* Slightly in Love to Infinity — https://swatchly.xyz/palette/ffe3dd-b8a37b-376e77-252932 */
:root {
  --slightly-in-love: #ffe3dd;
  --taupe: #b8a37b;
  --ocean-s-embrace: #376e77;
  --infinity: #252932;
}

Tailwind CSS v4

/* Slightly in Love to Infinity — https://swatchly.xyz/palette/ffe3dd-b8a37b-376e77-252932 */
@theme {
  --color-slightly-in-love: #ffe3dd;
  --color-slightly-in-love-50: #fff1ee;
  --color-slightly-in-love-100: #ffe3dd;
  --color-slightly-in-love-200: #e6d1cd;
  --color-slightly-in-love-300: #d1bab5;
  --color-slightly-in-love-400: #b39b95;
  --color-slightly-in-love-500: #987f7a;
  --color-slightly-in-love-600: #7d6560;
  --color-slightly-in-love-700: #65504b;
  --color-slightly-in-love-800: #503d39;
  --color-slightly-in-love-900: #3e2f2b;
  --color-slightly-in-love-950: #271c1a;
  --color-taupe: #b8a37b;
  --color-taupe-50: #fff6e4;
  --color-taupe-100: #f9ecd3;
  --color-taupe-200: #e8d9bb;
  --color-taupe-300: #d4c2a0;
  --color-taupe-400: #b8a37b;
  --color-taupe-500: #9b8760;
  --color-taupe-600: #7f6c46;
  --color-taupe-700: #665532;
  --color-taupe-800: #514123;
  --color-taupe-900: #3e3117;
  --color-taupe-950: #271e0b;
  --color-ocean-s-embrace: #376e77;
  --color-ocean-s-embrace-50: #e1fbff;
  --color-ocean-s-embrace-100: #cef1f7;
  --color-ocean-s-embrace-200: #b3dee5;
  --color-ocean-s-embrace-300: #96c7cf;
  --color-ocean-s-embrace-400: #71a7b0;
  --color-ocean-s-embrace-500: #538a93;
  --color-ocean-s-embrace-600: #376e77;
  --color-ocean-s-embrace-700: #27585f;
  --color-ocean-s-embrace-800: #1a454c;
  --color-ocean-s-embrace-900: #10353b;
  --color-ocean-s-embrace-950: #072126;
  --color-infinity: #252932;
  --color-infinity-50: #f2f5fc;
  --color-infinity-100: #e8ebf3;
  --color-infinity-200: #d3d7e0;
  --color-infinity-300: #bcc1cb;
  --color-infinity-400: #9b9faa;
  --color-infinity-500: #7d828d;
  --color-infinity-600: #626670;
  --color-infinity-700: #4a4e57;
  --color-infinity-800: #363a41;
  --color-infinity-900: #252932;
  --color-infinity-950: #16181c;
}