Cape Verde to Hay Day color palette

1E5249Cape Verde 81495DNocturne Red 53887CAloe Vera A2B1D6Mont Blanc DACC83Hay Day

About this palette

Cape Verde to Hay Day is a 5-color cool, vintage palette: #1E5249 (Cape Verde), #81495D (Nocturne Red), #53887C (Aloe Vera), #A2B1D6 (Mont Blanc), #DACC83 (Hay Day). It mixes turquoise, red, blue, yellow tones and feels cool overall. The strongest text pairing is #1E5249 on #DACC83 with a contrast ratio of 5.49:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(30, 82, 73)	hsl(170, 46%, 22%)
Nocturne Red	rgb(129, 73, 93)	hsl(339, 28%, 40%)
Aloe Vera	rgb(83, 136, 124)	hsl(166, 24%, 43%)
Mont Blanc	rgb(162, 177, 214)	hsl(223, 39%, 74%)
Hay Day	rgb(218, 204, 131)	hsl(50, 54%, 68%)

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.

Aa5.49:1 Good#1E5249 on #DACC83
Aa5.49:1 Good#DACC83 on #1E5249
Aa4.25:1 Poor#81495D on #DACC83
Aa4.25:1 Poor#DACC83 on #81495D
Aa4.15:1 Poor#1E5249 on #A2B1D6
Aa4.15:1 Poor#A2B1D6 on #1E5249
Aa3.22:1 Poor#81495D on #A2B1D6
Aa3.22:1 Poor#A2B1D6 on #81495D

Color blindness preview

CSS variables

/* Cape Verde to Hay Day — https://swatchly.xyz/palette/1e5249-81495d-53887c-a2b1d6-dacc83 */
:root {
  --cape-verde: #1e5249;
  --nocturne-red: #81495d;
  --aloe-vera: #53887c;
  --mont-blanc: #a2b1d6;
  --hay-day: #dacc83;
}

Tailwind CSS v4

/* Cape Verde to Hay Day — https://swatchly.xyz/palette/1e5249-81495d-53887c-a2b1d6-dacc83 */
@theme {
  --color-cape-verde: #1e5249;
  --color-cape-verde-50: #e0fdf6;
  --color-cape-verde-100: #d3f3ec;
  --color-cape-verde-200: #bae1d8;
  --color-cape-verde-300: #a0cdc3;
  --color-cape-verde-400: #7eafa5;
  --color-cape-verde-500: #62958a;
  --color-cape-verde-600: #497b71;
  --color-cape-verde-700: #35645b;
  --color-cape-verde-800: #1e5249;
  --color-cape-verde-900: #1a3f38;
  --color-cape-verde-950: #0d2823;
  --color-nocturne-red: #81495d;
  --color-nocturne-red-50: #fff1f5;
  --color-nocturne-red-100: #ffe3eb;
  --color-nocturne-red-200: #fbcad9;
  --color-nocturne-red-300: #e9b2c4;
  --color-nocturne-red-400: #ce92a6;
  --color-nocturne-red-500: #b4778c;
  --color-nocturne-red-600: #985e72;
  --color-nocturne-red-700: #81495d;
  --color-nocturne-red-800: #663849;
  --color-nocturne-red-900: #512938;
  --color-nocturne-red-950: #351823;
  --color-aloe-vera: #53887c;
  --color-aloe-vera-50: #dcfbf3;
  --color-aloe-vera-100: #cdf0e7;
  --color-aloe-vera-200: #b2dcd2;
  --color-aloe-vera-300: #96c5ba;
  --color-aloe-vera-400: #71a599;
  --color-aloe-vera-500: #53887c;
  --color-aloe-vera-600: #3c6f64;
  --color-aloe-vera-700: #2a594f;
  --color-aloe-vera-800: #1d463e;
  --color-aloe-vera-900: #143730;
  --color-aloe-vera-950: #09231e;
  --color-mont-blanc: #a2b1d6;
  --color-mont-blanc-50: #e5edff;
  --color-mont-blanc-100: #d5e0fb;
  --color-mont-blanc-200: #bdcae9;
  --color-mont-blanc-300: #a2b1d6;
  --color-mont-blanc-400: #8694b8;
  --color-mont-blanc-500: #6e7c9e;
  --color-mont-blanc-600: #576484;
  --color-mont-blanc-700: #45506d;
  --color-mont-blanc-800: #353f59;
  --color-mont-blanc-900: #2a3248;
  --color-mont-blanc-950: #191f2f;
  --color-hay-day: #dacc83;
  --color-hay-day-50: #fffbe4;
  --color-hay-day-100: #fbf3ca;
  --color-hay-day-200: #eae1b0;
  --color-hay-day-300: #dacc83;
  --color-hay-day-400: #b7aa67;
  --color-hay-day-500: #9b8d46;
  --color-hay-day-600: #7e7128;
  --color-hay-day-700: #655810;
  --color-hay-day-800: #4f4400;
  --color-hay-day-900: #3c3300;
  --color-hay-day-950: #251f00;
}