Start generating

Cape Verde to Dreamy Candy Forest color palette

005752Cape VerdeFBCEA7Peach Beach533000Moelleux au Chocolat008672Shadows of TimeAA98F2Dreamy Candy Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Cape Verde to Dreamy Candy Forest is a 5-color cool, vintage palette: #005752 (Cape Verde), #FBCEA7 (Peach Beach), #533000 (Moelleux au Chocolat), #008672 (Shadows of Time), #AA98F2 (Dreamy Candy Forest). It mixes turquoise, orange, brown, purple tones and feels cool overall. The strongest text pairing is #FBCEA7 on #533000 with a contrast ratio of 8.09:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cape Verdergb(0, 87, 82)hsl(177, 100%, 17%)
Peach Beachrgb(251, 206, 167)hsl(28, 91%, 82%)
Moelleux au Chocolatrgb(83, 48, 0)hsl(35, 100%, 16%)
Shadows of Timergb(0, 134, 114)hsl(171, 100%, 26%)
Dreamy Candy Forestrgb(170, 152, 242)hsl(252, 78%, 77%)

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.

  • Aa8.09:1 Very good#FBCEA7 on #533000
  • Aa8.09:1 Very good#533000 on #FBCEA7
  • Aa5.83:1 Good#005752 on #FBCEA7
  • Aa5.83:1 Good#FBCEA7 on #005752
  • Aa4.74:1 Good#533000 on #AA98F2
  • Aa4.74:1 Good#AA98F2 on #533000
  • Aa3.41:1 Poor#005752 on #AA98F2
  • Aa3.41:1 Poor#AA98F2 on #005752

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cape Verde to Dreamy Candy Forest — https://swatchly.xyz/palette/005752-fbcea7-533000-008672-aa98f2 */
:root {
  --cape-verde: #005752;
  --peach-beach: #fbcea7;
  --moelleux-au-chocolat: #533000;
  --shadows-of-time: #008672;
  --dreamy-candy-forest: #aa98f2;
}

Tailwind CSS v4

/* Cape Verde to Dreamy Candy Forest — https://swatchly.xyz/palette/005752-fbcea7-533000-008672-aa98f2 */
@theme {
  --color-cape-verde: #005752;
  --color-cape-verde-50: #d9fefa;
  --color-cape-verde-100: #cbf5f1;
  --color-cape-verde-200: #b0e3de;
  --color-cape-verde-300: #95d0ca;
  --color-cape-verde-400: #71b3ad;
  --color-cape-verde-500: #549993;
  --color-cape-verde-600: #397f7a;
  --color-cape-verde-700: #256964;
  --color-cape-verde-800: #005752;
  --color-cape-verde-900: #08433f;
  --color-cape-verde-950: #012b28;
  --color-peach-beach: #fbcea7;
  --color-peach-beach-50: #fff3e9;
  --color-peach-beach-100: #ffe6d2;
  --color-peach-beach-200: #fbcea7;
  --color-peach-beach-300: #dfb999;
  --color-peach-beach-400: #c19975;
  --color-peach-beach-500: #a67d58;
  --color-peach-beach-600: #89633f;
  --color-peach-beach-700: #704d2c;
  --color-peach-beach-800: #593b1e;
  --color-peach-beach-900: #462c14;
  --color-peach-beach-950: #2d1a09;
  --color-moelleux-au-chocolat: #533000;
  --color-moelleux-au-chocolat-50: #fff3e7;
  --color-moelleux-au-chocolat-100: #ffe6ce;
  --color-moelleux-au-chocolat-200: #f1d1b1;
  --color-moelleux-au-chocolat-300: #deb994;
  --color-moelleux-au-chocolat-400: #c29a71;
  --color-moelleux-au-chocolat-500: #a88056;
  --color-moelleux-au-chocolat-600: #8d673d;
  --color-moelleux-au-chocolat-700: #75522b;
  --color-moelleux-au-chocolat-800: #60401d;
  --color-moelleux-au-chocolat-900: #533000;
  --color-moelleux-au-chocolat-950: #331f08;
  --color-shadows-of-time: #008672;
  --color-shadows-of-time-50: #d9fff5;
  --color-shadows-of-time-100: #c0fbec;
  --color-shadows-of-time-200: #a4ebd9;
  --color-shadows-of-time-300: #85d7c4;
  --color-shadows-of-time-400: #5abba6;
  --color-shadows-of-time-500: #34a08b;
  --color-shadows-of-time-600: #008672;
  --color-shadows-of-time-700: #006b5a;
  --color-shadows-of-time-800: #005346;
  --color-shadows-of-time-900: #004035;
  --color-shadows-of-time-950: #002821;
  --color-dreamy-candy-forest: #aa98f2;
  --color-dreamy-candy-forest-50: #f7f6ff;
  --color-dreamy-candy-forest-100: #eeecff;
  --color-dreamy-candy-forest-200: #dcd6ff;
  --color-dreamy-candy-forest-300: #c7bcff;
  --color-dreamy-candy-forest-400: #aa98f2;
  --color-dreamy-candy-forest-500: #8e7bd2;
  --color-dreamy-candy-forest-600: #725fb3;
  --color-dreamy-candy-forest-700: #5b4895;
  --color-dreamy-candy-forest-800: #473679;
  --color-dreamy-candy-forest-900: #362760;
  --color-dreamy-candy-forest-950: #21163f;
}

Similar palettes