Babe to Nightly Activities Color Palette

About this palette

Babe to Nightly Activities is a 5-color warm palette: #E2787D (Babe), #E1DD6B (Succulent Lime), #7D7500 (Olive), #003335 (Elite Teal), #3B4B95 (Nightly Activities). It mixes red, yellow, turquoise, blue tones and feels warm overall. The strongest text pairing is #E1DD6B on #003335 with a contrast ratio of 9.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Babe	rgb(226, 120, 125)	hsl(357, 65%, 68%)
Succulent Lime	rgb(225, 221, 107)	hsl(58, 66%, 65%)
Olive	rgb(125, 117, 0)	hsl(56, 100%, 25%)
Elite Teal	rgb(0, 51, 53)	hsl(182, 100%, 10%)
Nightly Activities	rgb(59, 75, 149)	hsl(229, 43%, 41%)

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.

Aa9.68:1 Very good#E1DD6B on #003335
Aa9.68:1 Very good#003335 on #E1DD6B
Aa5.62:1 Good#E1DD6B on #3B4B95
Aa5.62:1 Good#3B4B95 on #E1DD6B
Aa4.73:1 Good#E2787D on #003335
Aa4.73:1 Good#003335 on #E2787D
Aa3.34:1 Poor#E1DD6B on #7D7500
Aa3.34:1 Poor#7D7500 on #E1DD6B

Color blindness preview

CSS variables

/* Babe to Nightly Activities — https://swatchly.xyz/palette/e2787d-e1dd6b-7d7500-003335-3b4b95 */
:root {
  --babe: #e2787d;
  --succulent-lime: #e1dd6b;
  --olive: #7d7500;
  --elite-teal: #003335;
  --nightly-activities: #3b4b95;
}

Tailwind CSS v4

/* Babe to Nightly Activities — https://swatchly.xyz/palette/e2787d-e1dd6b-7d7500-003335-3b4b95 */
@theme {
  --color-babe: #e2787d;
  --color-babe-50: #ffefef;
  --color-babe-100: #ffe0e0;
  --color-babe-200: #ffc2c2;
  --color-babe-300: #fe9ea0;
  --color-babe-400: #e2787d;
  --color-babe-500: #c45d64;
  --color-babe-600: #a6444c;
  --color-babe-700: #893139;
  --color-babe-800: #6f222a;
  --color-babe-900: #59171f;
  --color-babe-950: #3c0b11;
  --color-succulent-lime: #e1dd6b;
  --color-succulent-lime-50: #faf9be;
  --color-succulent-lime-100: #f0efad;
  --color-succulent-lime-200: #e1dd6b;
  --color-succulent-lime-300: #c9c668;
  --color-succulent-lime-400: #aba636;
  --color-succulent-lime-500: #908a00;
  --color-succulent-lime-600: #746f00;
  --color-succulent-lime-700: #5c5800;
  --color-succulent-lime-800: #484500;
  --color-succulent-lime-900: #373500;
  --color-succulent-lime-950: #222100;
  --color-olive: #7d7500;
  --color-olive-50: #fbf8c7;
  --color-olive-100: #f3f0b8;
  --color-olive-200: #e2de9c;
  --color-olive-300: #cec87c;
  --color-olive-400: #b1aa51;
  --color-olive-500: #978f2e;
  --color-olive-600: #7d7500;
  --color-olive-700: #635d00;
  --color-olive-800: #4d4800;
  --color-olive-900: #3b3700;
  --color-olive-950: #252200;
  --color-elite-teal: #003335;
  --color-elite-teal-50: #e1fbfc;
  --color-elite-teal-100: #d5f2f3;
  --color-elite-teal-200: #bcdfe1;
  --color-elite-teal-300: #a2cacb;
  --color-elite-teal-400: #7daaab;
  --color-elite-teal-500: #5f8d8f;
  --color-elite-teal-600: #457072;
  --color-elite-teal-700: #305859;
  --color-elite-teal-800: #204344;
  --color-elite-teal-900: #003335;
  --color-elite-teal-950: #0a1d1e;
  --color-nightly-activities: #3b4b95;
  --color-nightly-activities-50: #f1f5ff;
  --color-nightly-activities-100: #e4ebff;
  --color-nightly-activities-200: #c8d6ff;
  --color-nightly-activities-300: #a9bdff;
  --color-nightly-activities-400: #859be9;
  --color-nightly-activities-500: #6a7ecd;
  --color-nightly-activities-600: #5163ae;
  --color-nightly-activities-700: #3b4b95;
  --color-nightly-activities-800: #2d3a75;
  --color-nightly-activities-900: #212c5e;
  --color-nightly-activities-950: #131a3e;
}