Start generating

Cape Verde to Sugar Glaze color palette

005455Cape Verde007979PrismarineFFBA73Nouveau-RicheA350C4Fuchsia PheromoneC073FFIllicit PurpleFFF0E4Sugar Glaze
Open in generator Export PNG, PDF, ASE…

About this palette

Cape Verde to Sugar Glaze is a 6-color cool palette: #005455 (Cape Verde), #007979 (Prismarine), #FFBA73 (Nouveau-Riche), #A350C4 (Fuchsia Pheromone), #C073FF (Illicit Purple), #FFF0E4 (Sugar Glaze). It mixes turquoise, orange, purple, white tones and feels cool overall. The strongest text pairing is #005455 on #FFF0E4 with a contrast ratio of 7.85:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cape Verdergb(0, 84, 85)hsl(181, 100%, 17%)
Prismarinergb(0, 121, 121)hsl(180, 100%, 24%)
Nouveau-Richergb(255, 186, 115)hsl(30, 100%, 73%)
Fuchsia Pheromonergb(163, 80, 196)hsl(283, 50%, 54%)
Illicit Purplergb(192, 115, 255)hsl(273, 100%, 73%)
Sugar Glazergb(255, 240, 228)hsl(27, 100%, 95%)

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.85:1 Very good#005455 on #FFF0E4
  • Aa7.85:1 Very good#FFF0E4 on #005455
  • Aa5.22:1 Good#005455 on #FFBA73
  • Aa5.22:1 Good#FFBA73 on #005455
  • Aa4.70:1 Good#007979 on #FFF0E4
  • Aa4.70:1 Good#FFF0E4 on #007979
  • Aa4.18:1 Poor#A350C4 on #FFF0E4
  • Aa4.18:1 Poor#FFF0E4 on #A350C4

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cape Verde to Sugar Glaze — https://swatchly.xyz/palette/005455-007979-ffba73-a350c4-c073ff-fff0e4 */
:root {
  --cape-verde: #005455;
  --prismarine: #007979;
  --nouveau-riche: #ffba73;
  --fuchsia-pheromone: #a350c4;
  --illicit-purple: #c073ff;
  --sugar-glaze: #fff0e4;
}

Tailwind CSS v4

/* Cape Verde to Sugar Glaze — https://swatchly.xyz/palette/005455-007979-ffba73-a350c4-c073ff-fff0e4 */
@theme {
  --color-cape-verde: #005455;
  --color-cape-verde-50: #d9fefd;
  --color-cape-verde-100: #cbf5f4;
  --color-cape-verde-200: #b1e3e2;
  --color-cape-verde-300: #96cecf;
  --color-cape-verde-400: #71b1b1;
  --color-cape-verde-500: #549797;
  --color-cape-verde-600: #397d7d;
  --color-cape-verde-700: #256667;
  --color-cape-verde-800: #005455;
  --color-cape-verde-900: #094041;
  --color-cape-verde-950: #02292a;
  --color-prismarine: #007979;
  --color-prismarine-50: #d4fffe;
  --color-prismarine-100: #c0f7f6;
  --color-prismarine-200: #a3e5e4;
  --color-prismarine-300: #82cfcf;
  --color-prismarine-400: #57b1b0;
  --color-prismarine-500: #339594;
  --color-prismarine-600: #007979;
  --color-prismarine-700: #006060;
  --color-prismarine-800: #004b4b;
  --color-prismarine-900: #003a3a;
  --color-prismarine-950: #002424;
  --color-nouveau-riche: #ffba73;
  --color-nouveau-riche-50: #fff9f3;
  --color-nouveau-riche-100: #ffeedf;
  --color-nouveau-riche-200: #ffd7b0;
  --color-nouveau-riche-300: #ffba73;
  --color-nouveau-riche-400: #d99a58;
  --color-nouveau-riche-500: #bc7c33;
  --color-nouveau-riche-600: #9d5f0c;
  --color-nouveau-riche-700: #7e4a00;
  --color-nouveau-riche-800: #623800;
  --color-nouveau-riche-900: #4b2a00;
  --color-nouveau-riche-950: #301900;
  --color-fuchsia-pheromone: #a350c4;
  --color-fuchsia-pheromone-50: #faeeff;
  --color-fuchsia-pheromone-100: #f4ddff;
  --color-fuchsia-pheromone-200: #ebbeff;
  --color-fuchsia-pheromone-300: #e097ff;
  --color-fuchsia-pheromone-400: #c16fe3;
  --color-fuchsia-pheromone-500: #a350c4;
  --color-fuchsia-pheromone-600: #8838a6;
  --color-fuchsia-pheromone-700: #6f258a;
  --color-fuchsia-pheromone-800: #5a1771;
  --color-fuchsia-pheromone-900: #480e5c;
  --color-fuchsia-pheromone-950: #2f053e;
  --color-illicit-purple: #c073ff;
  --color-illicit-purple-50: #f7f0ff;
  --color-illicit-purple-100: #f0e3ff;
  --color-illicit-purple-200: #e3c7ff;
  --color-illicit-purple-300: #d4a7ff;
  --color-illicit-purple-400: #c073ff;
  --color-illicit-purple-500: #a457e1;
  --color-illicit-purple-600: #893bc1;
  --color-illicit-purple-700: #7025a2;
  --color-illicit-purple-800: #5a1586;
  --color-illicit-purple-900: #470a6c;
  --color-illicit-purple-950: #2e0349;
  --color-sugar-glaze: #fff0e4;
  --color-sugar-glaze-50: #fff0e4;
  --color-sugar-glaze-100: #f1e7e0;
  --color-sugar-glaze-200: #dfd4cb;
  --color-sugar-glaze-300: #cabdb3;
  --color-sugar-glaze-400: #ab9e93;
  --color-sugar-glaze-500: #908378;
  --color-sugar-glaze-600: #76695f;
  --color-sugar-glaze-700: #5e534a;
  --color-sugar-glaze-800: #4a4038;
  --color-sugar-glaze-900: #39312a;
  --color-sugar-glaze-950: #241e19;
}

Similar palettes