Cape Verde to Warm Light Color Palette

About this palette

Cape Verde to Warm Light is a 4-color vintage palette: #00523C (Cape Verde), #6C6DAB (Twinkle Night), #FB92D5 (Bubblegum Kisses), #FFFAD6 (Warm Light). It mixes turquoise, purple, pink, white tones and feels balanced overall. The strongest text pairing is #00523C on #FFFAD6 with a contrast ratio of 8.76:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(0, 82, 60)	hsl(164, 100%, 16%)
Twinkle Night	rgb(108, 109, 171)	hsl(239, 27%, 55%)
Bubblegum Kisses	rgb(251, 146, 213)	hsl(322, 93%, 78%)
Warm Light	rgb(255, 250, 214)	hsl(53, 100%, 92%)

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.76:1 Very good#00523C on #FFFAD6
Aa8.76:1 Very good#FFFAD6 on #00523C
Aa4.51:1 Good#6C6DAB on #FFFAD6
Aa4.51:1 Good#FFFAD6 on #6C6DAB
Aa4.48:1 Poor#00523C on #FB92D5
Aa4.48:1 Poor#FB92D5 on #00523C

Color blindness preview

CSS variables

/* Cape Verde to Warm Light — https://swatchly.xyz/palette/00523c-6c6dab-fb92d5-fffad6 */
:root {
  --cape-verde: #00523c;
  --twinkle-night: #6c6dab;
  --bubblegum-kisses: #fb92d5;
  --warm-light: #fffad6;
}

Tailwind CSS v4

/* Cape Verde to Warm Light — https://swatchly.xyz/palette/00523c-6c6dab-fb92d5-fffad6 */
@theme {
  --color-cape-verde: #00523c;
  --color-cape-verde-50: #dbffef;
  --color-cape-verde-100: #cdf6e4;
  --color-cape-verde-200: #b3e5d0;
  --color-cape-verde-300: #97d0b9;
  --color-cape-verde-400: #72b299;
  --color-cape-verde-500: #54977e;
  --color-cape-verde-600: #3a7c64;
  --color-cape-verde-700: #26654f;
  --color-cape-verde-800: #00523c;
  --color-cape-verde-900: #0b3e2e;
  --color-cape-verde-950: #03281c;
  --color-twinkle-night: #6c6dab;
  --color-twinkle-night-50: #f3f4ff;
  --color-twinkle-night-100: #e9ebff;
  --color-twinkle-night-200: #d4d7ff;
  --color-twinkle-night-300: #bdc0f9;
  --color-twinkle-night-400: #9fa1df;
  --color-twinkle-night-500: #8586c6;
  --color-twinkle-night-600: #6c6dab;
  --color-twinkle-night-700: #55558e;
  --color-twinkle-night-800: #414173;
  --color-twinkle-night-900: #31315b;
  --color-twinkle-night-950: #1e1d3c;
  --color-bubblegum-kisses: #fb92d5;
  --color-bubblegum-kisses-50: #ffebf7;
  --color-bubblegum-kisses-100: #ffdbf0;
  --color-bubblegum-kisses-200: #ffb9e4;
  --color-bubblegum-kisses-300: #fb92d5;
  --color-bubblegum-kisses-400: #d875b5;
  --color-bubblegum-kisses-500: #bc599b;
  --color-bubblegum-kisses-600: #9f4080;
  --color-bubblegum-kisses-700: #832d68;
  --color-bubblegum-kisses-800: #6b1e53;
  --color-bubblegum-kisses-900: #561442;
  --color-bubblegum-kisses-950: #38092a;
  --color-warm-light: #fffad6;
  --color-warm-light-50: #fffad6;
  --color-warm-light-100: #f2efda;
  --color-warm-light-200: #dedbc1;
  --color-warm-light-300: #c8c4a7;
  --color-warm-light-400: #a8a484;
  --color-warm-light-500: #8d8867;
  --color-warm-light-600: #716d4e;
  --color-warm-light-700: #5a563a;
  --color-warm-light-800: #47432a;
  --color-warm-light-900: #37331e;
  --color-warm-light-950: #222010;
}