Cape Verde to Cotton Boll Color Palette

About this palette

Cape Verde to Cotton Boll is a 5-color vintage palette: #1F5146 (Cape Verde), #8B6B00 (Muddy Brown), #4D87D2 (Blue Jay), #EEA4C7 (Elastic Pink), #E7EEFF (Cotton Boll). It mixes turquoise, brown, blue, pink, white tones and feels balanced overall. The strongest text pairing is #1F5146 on #E7EEFF with a contrast ratio of 7.78:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(31, 81, 70)	hsl(167, 45%, 22%)
Muddy Brown	rgb(139, 107, 0)	hsl(46, 100%, 27%)
Blue Jay	rgb(77, 135, 210)	hsl(214, 60%, 56%)
Elastic Pink	rgb(238, 164, 199)	hsl(332, 69%, 79%)
Cotton Boll	rgb(231, 238, 255)	hsl(222, 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.78:1 Very good#1F5146 on #E7EEFF
Aa7.78:1 Very good#E7EEFF on #1F5146
Aa4.64:1 Good#1F5146 on #EEA4C7
Aa4.64:1 Good#EEA4C7 on #1F5146
Aa4.30:1 Poor#8B6B00 on #E7EEFF
Aa4.30:1 Poor#E7EEFF on #8B6B00
Aa3.16:1 Poor#4D87D2 on #E7EEFF
Aa3.16:1 Poor#E7EEFF on #4D87D2

Color blindness preview

CSS variables

/* Cape Verde to Cotton Boll — https://swatchly.xyz/palette/1f5146-8b6b00-4d87d2-eea4c7-e7eeff */
:root {
  --cape-verde: #1f5146;
  --muddy-brown: #8b6b00;
  --blue-jay: #4d87d2;
  --elastic-pink: #eea4c7;
  --cotton-boll: #e7eeff;
}

Tailwind CSS v4

/* Cape Verde to Cotton Boll — https://swatchly.xyz/palette/1f5146-8b6b00-4d87d2-eea4c7-e7eeff */
@theme {
  --color-cape-verde: #1f5146;
  --color-cape-verde-50: #e0fdf4;
  --color-cape-verde-100: #d4f3ea;
  --color-cape-verde-200: #bbe1d7;
  --color-cape-verde-300: #a1cdc1;
  --color-cape-verde-400: #7fafa2;
  --color-cape-verde-500: #639488;
  --color-cape-verde-600: #4a7a6e;
  --color-cape-verde-700: #366358;
  --color-cape-verde-800: #1f5146;
  --color-cape-verde-900: #1b3e36;
  --color-cape-verde-950: #0d2721;
  --color-muddy-brown: #8b6b00;
  --color-muddy-brown-50: #fff4db;
  --color-muddy-brown-100: #ffeab9;
  --color-muddy-brown-200: #f0d79b;
  --color-muddy-brown-300: #ddc07b;
  --color-muddy-brown-400: #c0a051;
  --color-muddy-brown-500: #a6852d;
  --color-muddy-brown-600: #8b6b00;
  --color-muddy-brown-700: #6f5500;
  --color-muddy-brown-800: #574200;
  --color-muddy-brown-900: #433200;
  --color-muddy-brown-950: #2a1f00;
  --color-blue-jay: #4d87d2;
  --color-blue-jay-50: #eff6ff;
  --color-blue-jay-100: #deecff;
  --color-blue-jay-200: #bedaff;
  --color-blue-jay-300: #97c4ff;
  --color-blue-jay-400: #6ba3ed;
  --color-blue-jay-500: #4d87d2;
  --color-blue-jay-600: #346cb3;
  --color-blue-jay-700: #205596;
  --color-blue-jay-800: #12417a;
  --color-blue-jay-900: #093262;
  --color-blue-jay-950: #031e41;
  --color-elastic-pink: #eea4c7;
  --color-elastic-pink-50: #ffeef5;
  --color-elastic-pink-100: #ffdfed;
  --color-elastic-pink-200: #fbc2dc;
  --color-elastic-pink-300: #eea4c7;
  --color-elastic-pink-400: #cc87a8;
  --color-elastic-pink-500: #b06b8d;
  --color-elastic-pink-600: #935272;
  --color-elastic-pink-700: #793e5c;
  --color-elastic-pink-800: #612e48;
  --color-elastic-pink-900: #4d2238;
  --color-elastic-pink-950: #321323;
  --color-cotton-boll: #e7eeff;
  --color-cotton-boll-50: #f4f7ff;
  --color-cotton-boll-100: #e7eeff;
  --color-cotton-boll-200: #d5dae6;
  --color-cotton-boll-300: #bdc3d1;
  --color-cotton-boll-400: #9da3b2;
  --color-cotton-boll-500: #818796;
  --color-cotton-boll-600: #666c7a;
  --color-cotton-boll-700: #505562;
  --color-cotton-boll-800: #3e424e;
  --color-cotton-boll-900: #2f333c;
  --color-cotton-boll-950: #1c1f26;
}