Fruit of Passion to Caribbean Blue color palette

9A6079Fruit of Passion FFF7F1Seashell 351728Chocolate Kiss 00514FCape Verde 00C7E0Caribbean Blue

About this palette

Fruit of Passion to Caribbean Blue is a 5-color vintage palette: #9A6079 (Fruit of Passion), #FFF7F1 (Seashell), #351728 (Chocolate Kiss), #00514F (Cape Verde), #00C7E0 (Caribbean Blue). It mixes red, white, turquoise tones and feels balanced overall. The strongest text pairing is #FFF7F1 on #351728 with a contrast ratio of 15.20:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fruit of Passion	rgb(154, 96, 121)	hsl(334, 23%, 49%)
Seashell	rgb(255, 247, 241)	hsl(26, 100%, 97%)
Chocolate Kiss	rgb(53, 23, 40)	hsl(326, 39%, 15%)
Cape Verde	rgb(0, 81, 79)	hsl(179, 100%, 16%)
Caribbean Blue	rgb(0, 199, 224)	hsl(187, 100%, 44%)

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.

Aa15.20:1 Super#FFF7F1 on #351728
Aa15.20:1 Super#351728 on #FFF7F1
Aa8.66:1 Very good#FFF7F1 on #00514F
Aa8.66:1 Very good#00514F on #FFF7F1
Aa7.85:1 Very good#351728 on #00C7E0
Aa7.85:1 Very good#00C7E0 on #351728
Aa4.59:1 Good#9A6079 on #FFF7F1
Aa4.59:1 Good#FFF7F1 on #9A6079

Color blindness preview

CSS variables

/* Fruit of Passion to Caribbean Blue — https://swatchly.xyz/palette/9a6079-fff7f1-351728-00514f-00c7e0 */
:root {
  --fruit-of-passion: #9a6079;
  --seashell: #fff7f1;
  --chocolate-kiss: #351728;
  --cape-verde: #00514f;
  --caribbean-blue: #00c7e0;
}

Tailwind CSS v4

/* Fruit of Passion to Caribbean Blue — https://swatchly.xyz/palette/9a6079-fff7f1-351728-00514f-00c7e0 */
@theme {
  --color-fruit-of-passion: #9a6079;
  --color-fruit-of-passion-50: #fff1f6;
  --color-fruit-of-passion-100: #ffe5ef;
  --color-fruit-of-passion-200: #fbcbde;
  --color-fruit-of-passion-300: #eab4ca;
  --color-fruit-of-passion-400: #cf94ac;
  --color-fruit-of-passion-500: #b57992;
  --color-fruit-of-passion-600: #9a6079;
  --color-fruit-of-passion-700: #7e4960;
  --color-fruit-of-passion-800: #65374b;
  --color-fruit-of-passion-900: #4f283a;
  --color-fruit-of-passion-950: #331724;
  --color-seashell: #fff7f1;
  --color-seashell-50: #fff7f1;
  --color-seashell-100: #f2ede9;
  --color-seashell-200: #ded9d4;
  --color-seashell-300: #c8c1bc;
  --color-seashell-400: #a8a19c;
  --color-seashell-500: #8c8580;
  --color-seashell-600: #716a65;
  --color-seashell-700: #5a544f;
  --color-seashell-800: #46413d;
  --color-seashell-900: #36322e;
  --color-seashell-950: #221f1c;
  --color-chocolate-kiss: #351728;
  --color-chocolate-kiss-50: #fff0f8;
  --color-chocolate-kiss-100: #fde3f0;
  --color-chocolate-kiss-200: #eccddd;
  --color-chocolate-kiss-300: #d8b5c7;
  --color-chocolate-kiss-400: #bb95a8;
  --color-chocolate-kiss-500: #a07a8d;
  --color-chocolate-kiss-600: #856173;
  --color-chocolate-kiss-700: #6c4c5d;
  --color-chocolate-kiss-800: #573b4a;
  --color-chocolate-kiss-900: #462d3a;
  --color-chocolate-kiss-950: #351728;
  --color-cape-verde: #00514f;
  --color-cape-verde-50: #dafefb;
  --color-cape-verde-100: #ccf5f2;
  --color-cape-verde-200: #b2e3e0;
  --color-cape-verde-300: #96cecb;
  --color-cape-verde-400: #72b0ad;
  --color-cape-verde-500: #549592;
  --color-cape-verde-600: #3a7b78;
  --color-cape-verde-700: #256361;
  --color-cape-verde-800: #00514f;
  --color-cape-verde-900: #0b3e3c;
  --color-cape-verde-950: #032726;
  --color-caribbean-blue: #00c7e0;
  --color-caribbean-blue-50: #c9f6ff;
  --color-caribbean-blue-100: #9ef0ff;
  --color-caribbean-blue-200: #6bddf1;
  --color-caribbean-blue-300: #00c7e0;
  --color-caribbean-blue-400: #00a7bd;
  --color-caribbean-blue-500: #008c9e;
  --color-caribbean-blue-600: #007281;
  --color-caribbean-blue-700: #005b68;
  --color-caribbean-blue-800: #004953;
  --color-caribbean-blue-900: #003a43;
  --color-caribbean-blue-950: #00242a;
}