Start generating

Mint to Cape Verde color palette

00B693MintF9EAFFStrawberry BonbonFBB8C3Matt Pink926A9ECrown Jewels92535EVelour Scar005446Cape Verde
Open in generator Export PNG, PDF, ASE…

About this palette

Mint to Cape Verde is a 6-color palette: #00B693 (Mint), #F9EAFF (Strawberry Bonbon), #FBB8C3 (Matt Pink), #926A9E (Crown Jewels), #92535E (Velour Scar), #005446 (Cape Verde). It mixes turquoise, white, pink, purple, red tones and feels cool overall. The strongest text pairing is #F9EAFF on #005446 with a contrast ratio of 7.74:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mintrgb(0, 182, 147)hsl(168, 100%, 36%)
Strawberry Bonbonrgb(249, 234, 255)hsl(283, 100%, 96%)
Matt Pinkrgb(251, 184, 195)hsl(350, 89%, 85%)
Crown Jewelsrgb(146, 106, 158)hsl(286, 21%, 52%)
Velour Scarrgb(146, 83, 94)hsl(350, 28%, 45%)
Cape Verdergb(0, 84, 70)hsl(170, 100%, 16%)

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.

  • Aa7.74:1 Very good#F9EAFF on #005446
  • Aa7.74:1 Very good#005446 on #F9EAFF
  • Aa5.41:1 Good#FBB8C3 on #005446
  • Aa5.41:1 Good#005446 on #FBB8C3
  • Aa5.04:1 Good#F9EAFF on #92535E
  • Aa5.04:1 Good#92535E on #F9EAFF
  • Aa3.82:1 Poor#F9EAFF on #926A9E
  • Aa3.82:1 Poor#926A9E on #F9EAFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mint to Cape Verde — https://swatchly.xyz/palette/00b693-f9eaff-fbb8c3-926a9e-92535e-005446 */
:root {
  --mint: #00b693;
  --strawberry-bonbon: #f9eaff;
  --matt-pink: #fbb8c3;
  --crown-jewels: #926a9e;
  --velour-scar: #92535e;
  --cape-verde: #005446;
}

Tailwind CSS v4

/* Mint to Cape Verde — https://swatchly.xyz/palette/00b693-f9eaff-fbb8c3-926a9e-92535e-005446 */
@theme {
  --color-mint: #00b693;
  --color-mint-50: #d1ffef;
  --color-mint-100: #acfbe2;
  --color-mint-200: #88eacc;
  --color-mint-300: #5fd4b4;
  --color-mint-400: #00b693;
  --color-mint-500: #00987a;
  --color-mint-600: #007a62;
  --color-mint-700: #00624e;
  --color-mint-800: #004d3d;
  --color-mint-900: #003c2f;
  --color-mint-950: #00261d;
  --color-strawberry-bonbon: #f9eaff;
  --color-strawberry-bonbon-50: #f9eaff;
  --color-strawberry-bonbon-100: #ede3f1;
  --color-strawberry-bonbon-200: #dbd0df;
  --color-strawberry-bonbon-300: #c6b9cb;
  --color-strawberry-bonbon-400: #a89aad;
  --color-strawberry-bonbon-500: #8d8093;
  --color-strawberry-bonbon-600: #736678;
  --color-strawberry-bonbon-700: #5c5061;
  --color-strawberry-bonbon-800: #483e4c;
  --color-strawberry-bonbon-900: #382f3b;
  --color-strawberry-bonbon-950: #231d25;
  --color-matt-pink: #fbb8c3;
  --color-matt-pink-50: #ffe7ea;
  --color-matt-pink-100: #ffd6dc;
  --color-matt-pink-200: #fbb8c3;
  --color-matt-pink-300: #e1a6b0;
  --color-matt-pink-400: #c58792;
  --color-matt-pink-500: #aa6d78;
  --color-matt-pink-600: #8f5560;
  --color-matt-pink-700: #76424c;
  --color-matt-pink-800: #60333c;
  --color-matt-pink-900: #4c252d;
  --color-matt-pink-950: #31151b;
  --color-crown-jewels: #926a9e;
  --color-crown-jewels-50: #fbeeff;
  --color-crown-jewels-100: #f7dcff;
  --color-crown-jewels-200: #e5c4f0;
  --color-crown-jewels-300: #cfa9db;
  --color-crown-jewels-400: #af87bc;
  --color-crown-jewels-500: #926a9e;
  --color-crown-jewels-600: #785383;
  --color-crown-jewels-700: #61406b;
  --color-crown-jewels-800: #4e3056;
  --color-crown-jewels-900: #3d2445;
  --color-crown-jewels-950: #28162d;
  --color-velour-scar: #92535e;
  --color-velour-scar-50: #fff1f3;
  --color-velour-scar-100: #ffe2e6;
  --color-velour-scar-200: #fdc6cd;
  --color-velour-scar-300: #eaacb5;
  --color-velour-scar-400: #cc8a94;
  --color-velour-scar-500: #af6e78;
  --color-velour-scar-600: #92535e;
  --color-velour-scar-700: #773f49;
  --color-velour-scar-800: #5f2f38;
  --color-velour-scar-900: #4b232b;
  --color-velour-scar-950: #311419;
  --color-cape-verde: #005446;
  --color-cape-verde-50: #dafff4;
  --color-cape-verde-100: #ccf6ea;
  --color-cape-verde-200: #b2e4d6;
  --color-cape-verde-300: #96d0c1;
  --color-cape-verde-400: #72b2a2;
  --color-cape-verde-500: #549887;
  --color-cape-verde-600: #3a7d6e;
  --color-cape-verde-700: #256658;
  --color-cape-verde-800: #005446;
  --color-cape-verde-900: #0a4036;
  --color-cape-verde-950: #032921;
}

Similar palettes