Fruit of Passion to Long Passionate Night color palette

About this palette

Fruit of Passion to Long Passionate Night is a 5-color warm, vintage palette: #99708E (Fruit of Passion), #FFD5DB (We Peep), #321622 (Black Cherry), #DC9589 (Powder Blush), #61385B (Long Passionate Night). It mixes pink, red, purple tones and feels warm overall. The strongest text pairing is #FFD5DB on #321622 with a contrast ratio of 12.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Fruit of Passionrgb(153, 112, 142)hsl(316, 17%, 52%)
We Peeprgb(255, 213, 219)hsl(351, 100%, 92%)
Black Cherryrgb(50, 22, 34)hsl(334, 39%, 14%)
Powder Blushrgb(220, 149, 137)hsl(9, 54%, 70%)
Long Passionate Nightrgb(97, 56, 91)hsl(309, 27%, 30%)

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.

  • Aa12.40:1 Super#FFD5DB on #321622
  • Aa12.40:1 Super#321622 on #FFD5DB
  • Aa7.10:1 Very good#FFD5DB on #61385B
  • Aa7.10:1 Very good#61385B on #FFD5DB
  • Aa6.83:1 Good#321622 on #DC9589
  • Aa6.83:1 Good#DC9589 on #321622
  • Aa3.98:1 Poor#99708E on #321622
  • Aa3.98:1 Poor#321622 on #99708E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Fruit of Passion to Long Passionate Night — https://swatchly.xyz/palette/99708e-ffd5db-321622-dc9589-61385b */
:root {
  --fruit-of-passion: #99708e;
  --we-peep: #ffd5db;
  --black-cherry: #321622;
  --powder-blush: #dc9589;
  --long-passionate-night: #61385b;
}

Tailwind CSS v4

/* Fruit of Passion to Long Passionate Night — https://swatchly.xyz/palette/99708e-ffd5db-321622-dc9589-61385b */
@theme {
  --color-fruit-of-passion: #99708e;
  --color-fruit-of-passion-50: #ffeefa;
  --color-fruit-of-passion-100: #fcdef3;
  --color-fruit-of-passion-200: #eac8e0;
  --color-fruit-of-passion-300: #d5aeca;
  --color-fruit-of-passion-400: #b68cab;
  --color-fruit-of-passion-500: #99708e;
  --color-fruit-of-passion-600: #7e5874;
  --color-fruit-of-passion-700: #66445d;
  --color-fruit-of-passion-800: #52344a;
  --color-fruit-of-passion-900: #40273a;
  --color-fruit-of-passion-950: #291725;
  --color-we-peep: #ffd5db;
  --color-we-peep-50: #ffe6e9;
  --color-we-peep-100: #ffd5db;
  --color-we-peep-200: #e7c6ca;
  --color-we-peep-300: #d4b0b5;
  --color-we-peep-400: #b79297;
  --color-we-peep-500: #9d787d;
  --color-we-peep-600: #835f65;
  --color-we-peep-700: #6b4b50;
  --color-we-peep-800: #553a3e;
  --color-we-peep-900: #432b2f;
  --color-we-peep-950: #2b1a1d;
  --color-black-cherry: #321622;
  --color-black-cherry-50: #fff1f6;
  --color-black-cherry-100: #fde3ec;
  --color-black-cherry-200: #ecced9;
  --color-black-cherry-300: #d8b6c3;
  --color-black-cherry-400: #ba96a3;
  --color-black-cherry-500: #9f7b88;
  --color-black-cherry-600: #83616e;
  --color-black-cherry-700: #6a4c58;
  --color-black-cherry-800: #553a45;
  --color-black-cherry-900: #432c35;
  --color-black-cherry-950: #321622;
  --color-powder-blush: #dc9589;
  --color-powder-blush-50: #fff6f4;
  --color-powder-blush-100: #ffeae7;
  --color-powder-blush-200: #ffd1c9;
  --color-powder-blush-300: #f4b7ad;
  --color-powder-blush-400: #dc9589;
  --color-powder-blush-500: #bc786d;
  --color-powder-blush-600: #9e5d52;
  --color-powder-blush-700: #81463d;
  --color-powder-blush-800: #67342c;
  --color-powder-blush-900: #51261f;
  --color-powder-blush-950: #331510;
  --color-long-passionate-night: #61385b;
  --color-long-passionate-night-50: #fff0fc;
  --color-long-passionate-night-100: #ffe0f9;
  --color-long-passionate-night-200: #efcae8;
  --color-long-passionate-night-300: #ddb3d5;
  --color-long-passionate-night-400: #c093b8;
  --color-long-passionate-night-500: #a6789e;
  --color-long-passionate-night-600: #8b5f84;
  --color-long-passionate-night-700: #734b6d;
  --color-long-passionate-night-800: #61385b;
  --color-long-passionate-night-900: #4a2c46;
  --color-long-passionate-night-950: #301a2d;
}

Similar palettes