Cape Verde to Prismarine Color Palette

About this palette

Cape Verde to Prismarine is a 5-color cool, vintage palette: #005353 (Cape Verde), #E98FA4 (Pomelo Red), #9DCFC3 (Wintermint), #AB7887 (Never Forget), #007471 (Prismarine). It mixes turquoise, pink tones and feels cool overall. The strongest text pairing is #005353 on #9DCFC3 with a contrast ratio of 5.14:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(0, 83, 83)	hsl(180, 100%, 16%)
Pomelo Red	rgb(233, 143, 164)	hsl(346, 67%, 74%)
Wintermint	rgb(157, 207, 195)	hsl(166, 34%, 71%)
Never Forget	rgb(171, 120, 135)	hsl(342, 23%, 57%)
Prismarine	rgb(0, 116, 113)	hsl(178, 100%, 23%)

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.

Aa5.14:1 Good#005353 on #9DCFC3
Aa5.14:1 Good#9DCFC3 on #005353
Aa3.78:1 Poor#005353 on #E98FA4
Aa3.78:1 Poor#E98FA4 on #005353
Aa3.25:1 Poor#9DCFC3 on #007471
Aa3.25:1 Poor#007471 on #9DCFC3

Color blindness preview

CSS variables

/* Cape Verde to Prismarine — https://swatchly.xyz/palette/005353-e98fa4-9dcfc3-ab7887-007471 */
:root {
  --cape-verde: #005353;
  --pomelo-red: #e98fa4;
  --wintermint: #9dcfc3;
  --never-forget: #ab7887;
  --prismarine: #007471;
}

Tailwind CSS v4

/* Cape Verde to Prismarine — https://swatchly.xyz/palette/005353-e98fa4-9dcfc3-ab7887-007471 */
@theme {
  --color-cape-verde: #005353;
  --color-cape-verde-50: #d9fefd;
  --color-cape-verde-100: #ccf5f4;
  --color-cape-verde-200: #b1e3e2;
  --color-cape-verde-300: #96cecd;
  --color-cape-verde-400: #71b1b0;
  --color-cape-verde-500: #549696;
  --color-cape-verde-600: #397c7c;
  --color-cape-verde-700: #256565;
  --color-cape-verde-800: #005353;
  --color-cape-verde-900: #0a403f;
  --color-cape-verde-950: #022928;
  --color-pomelo-red: #e98fa4;
  --color-pomelo-red-50: #fff7f9;
  --color-pomelo-red-100: #ffecf0;
  --color-pomelo-red-200: #ffd3db;
  --color-pomelo-red-300: #feb3c3;
  --color-pomelo-red-400: #e98fa4;
  --color-pomelo-red-500: #c87287;
  --color-pomelo-red-600: #a8556a;
  --color-pomelo-red-700: #8a3e53;
  --color-pomelo-red-800: #6e2c3f;
  --color-pomelo-red-900: #561f2f;
  --color-pomelo-red-950: #37101b;
  --color-wintermint: #9dcfc3;
  --color-wintermint-50: #e2fdf6;
  --color-wintermint-100: #d6f4ed;
  --color-wintermint-200: #bee2d9;
  --color-wintermint-300: #9dcfc3;
  --color-wintermint-400: #80aea3;
  --color-wintermint-500: #629388;
  --color-wintermint-600: #48776d;
  --color-wintermint-700: #345f56;
  --color-wintermint-800: #254b43;
  --color-wintermint-900: #193a33;
  --color-wintermint-950: #0c241f;
  --color-never-forget: #ab7887;
  --color-never-forget-50: #fff2f5;
  --color-never-forget-100: #ffe4eb;
  --color-never-forget-200: #f6ccd7;
  --color-never-forget-300: #e3b4c1;
  --color-never-forget-400: #c693a2;
  --color-never-forget-500: #ab7887;
  --color-never-forget-600: #8e5e6c;
  --color-never-forget-700: #744855;
  --color-never-forget-800: #5c3642;
  --color-never-forget-900: #482832;
  --color-never-forget-950: #2e181f;
  --color-prismarine: #007471;
  --color-prismarine-50: #d5fffc;
  --color-prismarine-100: #c1f6f3;
  --color-prismarine-200: #a2e3df;
  --color-prismarine-300: #81cdc9;
  --color-prismarine-400: #56ada9;
  --color-prismarine-500: #32908d;
  --color-prismarine-600: #007471;
  --color-prismarine-700: #005c5a;
  --color-prismarine-800: #004846;
  --color-prismarine-900: #003836;
  --color-prismarine-950: #002322;
}