Cape Verde to Latte Color Palette

About this palette

Cape Verde to Latte is a 5-color cool palette: #005855 (Cape Verde), #02201F (Black Stallion), #F2E0FE (Minute Mauve), #7E5D9F (Scampi), #C4A280 (Latte). It mixes turquoise, purple, orange tones and feels cool overall. The strongest text pairing is #02201F on #F2E0FE with a contrast ratio of 13.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(0, 88, 85)	hsl(178, 100%, 17%)
Black Stallion	rgb(2, 32, 31)	hsl(178, 88%, 7%)
Minute Mauve	rgb(242, 224, 254)	hsl(276, 94%, 94%)
Scampi	rgb(126, 93, 159)	hsl(270, 26%, 49%)
Latte	rgb(196, 162, 128)	hsl(30, 37%, 64%)

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.

Aa13.73:1 Super#02201F on #F2E0FE
Aa13.73:1 Super#F2E0FE on #02201F
Aa7.18:1 Very good#02201F on #C4A280
Aa7.18:1 Very good#C4A280 on #02201F
Aa6.68:1 Good#005855 on #F2E0FE
Aa6.68:1 Good#F2E0FE on #005855
Aa4.27:1 Poor#F2E0FE on #7E5D9F
Aa4.27:1 Poor#7E5D9F on #F2E0FE

Color blindness preview

CSS variables

/* Cape Verde to Latte — https://swatchly.xyz/palette/005855-02201f-f2e0fe-7e5d9f-c4a280 */
:root {
  --cape-verde: #005855;
  --black-stallion: #02201f;
  --minute-mauve: #f2e0fe;
  --scampi: #7e5d9f;
  --latte: #c4a280;
}

Tailwind CSS v4

/* Cape Verde to Latte — https://swatchly.xyz/palette/005855-02201f-f2e0fe-7e5d9f-c4a280 */
@theme {
  --color-cape-verde: #005855;
  --color-cape-verde-50: #d8fefb;
  --color-cape-verde-100: #caf5f2;
  --color-cape-verde-200: #ade2de;
  --color-cape-verde-300: #8ecbc7;
  --color-cape-verde-400: #66aaa6;
  --color-cape-verde-500: #468d89;
  --color-cape-verde-600: #2b706d;
  --color-cape-verde-700: #005855;
  --color-cape-verde-800: #084442;
  --color-cape-verde-900: #023533;
  --color-cape-verde-950: #00211f;
  --color-black-stallion: #02201f;
  --color-black-stallion-50: #e7faf8;
  --color-black-stallion-100: #dbf0ef;
  --color-black-stallion-200: #c5dddc;
  --color-black-stallion-300: #abc8c6;
  --color-black-stallion-400: #8aa9a7;
  --color-black-stallion-500: #6d8c8b;
  --color-black-stallion-600: #53716f;
  --color-black-stallion-700: #3d5957;
  --color-black-stallion-800: #2d4443;
  --color-black-stallion-900: #1f3332;
  --color-black-stallion-950: #02201f;
  --color-minute-mauve: #f2e0fe;
  --color-minute-mauve-50: #f8eeff;
  --color-minute-mauve-100: #f2e0fe;
  --color-minute-mauve-200: #dccfe5;
  --color-minute-mauve-300: #c7b8d1;
  --color-minute-mauve-400: #a999b4;
  --color-minute-mauve-500: #8e7e99;
  --color-minute-mauve-600: #74647e;
  --color-minute-mauve-700: #5d4f66;
  --color-minute-mauve-800: #493d51;
  --color-minute-mauve-900: #382e3f;
  --color-minute-mauve-950: #231c28;
  --color-scampi: #7e5d9f;
  --color-scampi-50: #f8f2ff;
  --color-scampi-100: #f1e6ff;
  --color-scampi-200: #e4cdff;
  --color-scampi-300: #d1b4f1;
  --color-scampi-400: #b393d6;
  --color-scampi-500: #9977bb;
  --color-scampi-600: #7e5d9f;
  --color-scampi-700: #654783;
  --color-scampi-800: #50366a;
  --color-scampi-900: #3e2854;
  --color-scampi-950: #271737;
  --color-latte: #c4a280;
  --color-latte-50: #fff6ee;
  --color-latte-100: #ffebd9;
  --color-latte-200: #f1d8bf;
  --color-latte-300: #dfc2a5;
  --color-latte-400: #c4a280;
  --color-latte-500: #a68564;
  --color-latte-600: #896a4a;
  --color-latte-700: #6f5235;
  --color-latte-800: #583f25;
  --color-latte-900: #442f19;
  --color-latte-950: #2b1c0c;
}