Heart’s Content to Creamy Lemon Color Palette

About this palette

Heart’s Content to Creamy Lemon is a 4-color pastel, light palette: #E5B2BC (Heart’s Content), #B5E5B6 (Glaucous Green), #9CF9F3 (Eternal Winter), #FDEDB3 (Creamy Lemon). It mixes pink, green, turquoise, yellow tones and feels balanced overall. The strongest text pairing is #E5B2BC on #FDEDB3 with a contrast ratio of 1.57:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heart’s Content	rgb(229, 178, 188)	hsl(348, 50%, 80%)
Glaucous Green	rgb(181, 229, 182)	hsl(121, 48%, 80%)
Eternal Winter	rgb(156, 249, 243)	hsl(176, 89%, 79%)
Creamy Lemon	rgb(253, 237, 179)	hsl(47, 95%, 85%)

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.

Color blindness preview

CSS variables

/* Heart’s Content to Creamy Lemon — https://swatchly.xyz/palette/e5b2bc-b5e5b6-9cf9f3-fdedb3 */
:root {
  --heart-s-content: #e5b2bc;
  --glaucous-green: #b5e5b6;
  --eternal-winter: #9cf9f3;
  --creamy-lemon: #fdedb3;
}

Tailwind CSS v4

/* Heart’s Content to Creamy Lemon — https://swatchly.xyz/palette/e5b2bc-b5e5b6-9cf9f3-fdedb3 */
@theme {
  --color-heart-s-content: #e5b2bc;
  --color-heart-s-content-50: #fff2f4;
  --color-heart-s-content-100: #ffe4e9;
  --color-heart-s-content-200: #f3cdd4;
  --color-heart-s-content-300: #e5b2bc;
  --color-heart-s-content-400: #c3939d;
  --color-heart-s-content-500: #a77881;
  --color-heart-s-content-600: #8a5e67;
  --color-heart-s-content-700: #704851;
  --color-heart-s-content-800: #5a373f;
  --color-heart-s-content-900: #46292f;
  --color-heart-s-content-950: #2d181d;
  --color-glaucous-green: #b5e5b6;
  --color-glaucous-green-50: #e2fde2;
  --color-glaucous-green-100: #d6f4d6;
  --color-glaucous-green-200: #b5e5b6;
  --color-glaucous-green-300: #a4cca5;
  --color-glaucous-green-400: #82ae83;
  --color-glaucous-green-500: #669367;
  --color-glaucous-green-600: #4d784f;
  --color-glaucous-green-700: #39603b;
  --color-glaucous-green-800: #294c2b;
  --color-glaucous-green-900: #1d3b1f;
  --color-glaucous-green-950: #102511;
  --color-eternal-winter: #9cf9f3;
  --color-eternal-winter-50: #c9fcf8;
  --color-eternal-winter-100: #9cf9f3;
  --color-eternal-winter-200: #9ee2dd;
  --color-eternal-winter-300: #7fcec9;
  --color-eternal-winter-400: #57b0ab;
  --color-eternal-winter-500: #349591;
  --color-eternal-winter-600: #0f7b77;
  --color-eternal-winter-700: #00635f;
  --color-eternal-winter-800: #004d4a;
  --color-eternal-winter-900: #003c39;
  --color-eternal-winter-950: #002524;
  --color-creamy-lemon: #fdedb3;
  --color-creamy-lemon-50: #fff7d9;
  --color-creamy-lemon-100: #fdedb3;
  --color-creamy-lemon-200: #e4d9b0;
  --color-creamy-lemon-300: #cfc293;
  --color-creamy-lemon-400: #b1a26d;
  --color-creamy-lemon-500: #958650;
  --color-creamy-lemon-600: #7a6b36;
  --color-creamy-lemon-700: #625523;
  --color-creamy-lemon-800: #4d4215;
  --color-creamy-lemon-900: #3c320b;
  --color-creamy-lemon-950: #261f04;
}