Purple Void to Cape Verde Color Palette

About this palette

Purple Void to Cape Verde is a 5-color vintage palette: #3A1C42 (Purple Void), #FCF6FF (Ghost White), #F6B53C (Solar Power), #9D7345 (Mocha), #00564F (Cape Verde). It mixes purple, white, yellow, orange, turquoise tones and feels balanced overall. The strongest text pairing is #3A1C42 on #FCF6FF with a contrast ratio of 13.87:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Void	rgb(58, 28, 66)	hsl(287, 40%, 18%)
Ghost White	rgb(252, 246, 255)	hsl(280, 100%, 98%)
Solar Power	rgb(246, 181, 60)	hsl(39, 91%, 60%)
Mocha	rgb(157, 115, 69)	hsl(31, 39%, 44%)
Cape Verde	rgb(0, 86, 79)	hsl(175, 100%, 17%)

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.87:1 Super#3A1C42 on #FCF6FF
Aa13.87:1 Super#FCF6FF on #3A1C42
Aa8.14:1 Very good#3A1C42 on #F6B53C
Aa8.14:1 Very good#F6B53C on #3A1C42
Aa8.09:1 Very good#FCF6FF on #00564F
Aa8.09:1 Very good#00564F on #FCF6FF
Aa4.74:1 Good#F6B53C on #00564F
Aa4.74:1 Good#00564F on #F6B53C

Color blindness preview

CSS variables

/* Purple Void to Cape Verde — https://swatchly.xyz/palette/3a1c42-fcf6ff-f6b53c-9d7345-00564f */
:root {
  --purple-void: #3a1c42;
  --ghost-white: #fcf6ff;
  --solar-power: #f6b53c;
  --mocha: #9d7345;
  --cape-verde: #00564f;
}

Tailwind CSS v4

/* Purple Void to Cape Verde — https://swatchly.xyz/palette/3a1c42-fcf6ff-f6b53c-9d7345-00564f */
@theme {
  --color-purple-void: #3a1c42;
  --color-purple-void-50: #fcf1ff;
  --color-purple-void-100: #f9e2ff;
  --color-purple-void-200: #e8ccf0;
  --color-purple-void-300: #d3b4dc;
  --color-purple-void-400: #b491bd;
  --color-purple-void-500: #9774a0;
  --color-purple-void-600: #795982;
  --color-purple-void-700: #5f4367;
  --color-purple-void-800: #49304f;
  --color-purple-void-900: #3a1c42;
  --color-purple-void-950: #201324;
  --color-ghost-white: #fcf6ff;
  --color-ghost-white-50: #fcf6ff;
  --color-ghost-white-100: #f0ecf2;
  --color-ghost-white-200: #dcd8de;
  --color-ghost-white-300: #c5c0c8;
  --color-ghost-white-400: #a6a0a8;
  --color-ghost-white-500: #8a848c;
  --color-ghost-white-600: #6f6a71;
  --color-ghost-white-700: #58535a;
  --color-ghost-white-800: #454147;
  --color-ghost-white-900: #353136;
  --color-ghost-white-950: #211e22;
  --color-solar-power: #f6b53c;
  --color-solar-power-50: #fff4e4;
  --color-solar-power-100: #ffe9c6;
  --color-solar-power-200: #ffd085;
  --color-solar-power-300: #f6b53c;
  --color-solar-power-400: #d29617;
  --color-solar-power-500: #b17c00;
  --color-solar-power-600: #8f6300;
  --color-solar-power-700: #714e00;
  --color-solar-power-800: #593c00;
  --color-solar-power-900: #452e00;
  --color-solar-power-950: #2c1c00;
  --color-mocha: #9d7345;
  --color-mocha-50: #fff1e2;
  --color-mocha-100: #ffe2c5;
  --color-mocha-200: #efcba7;
  --color-mocha-300: #dab288;
  --color-mocha-400: #ba9063;
  --color-mocha-500: #9d7345;
  --color-mocha-600: #825b2f;
  --color-mocha-700: #6a471e;
  --color-mocha-800: #553712;
  --color-mocha-900: #442a0a;
  --color-mocha-950: #2c1904;
  --color-cape-verde: #00564f;
  --color-cape-verde-50: #d9fef9;
  --color-cape-verde-100: #cbf5ef;
  --color-cape-verde-200: #b1e3dc;
  --color-cape-verde-300: #96d0c8;
  --color-cape-verde-400: #71b3aa;
  --color-cape-verde-500: #549990;
  --color-cape-verde-600: #397f77;
  --color-cape-verde-700: #256861;
  --color-cape-verde-800: #00564f;
  --color-cape-verde-900: #09423d;
  --color-cape-verde-950: #022a27;
}