Melting Glacier to Cape Verde color palette

E5FCF1Melting Glacier 321C2ABruised Plum 97E0C6Beach Glass 8A5C6EIndian Silk A58295Hatoba Pigeon 15523CCape Verde

Open in generator Export PNG, PDF, ASE…

About this palette

Melting Glacier to Cape Verde is a 6-color muted, vintage palette: #E5FCF1 (Melting Glacier), #321C2A (Bruised Plum), #97E0C6 (Beach Glass), #8A5C6E (Indian Silk), #A58295 (Hatoba Pigeon), #15523C (Cape Verde). It mixes white, red, turquoise, pink, green tones and feels warm overall. The strongest text pairing is #E5FCF1 on #321C2A with a contrast ratio of 14.62:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melting Glacier	rgb(229, 252, 241)	hsl(151, 79%, 94%)
Bruised Plum	rgb(50, 28, 42)	hsl(322, 28%, 15%)
Beach Glass	rgb(151, 224, 198)	hsl(159, 54%, 74%)
Indian Silk	rgb(138, 92, 110)	hsl(337, 20%, 45%)
Hatoba Pigeon	rgb(165, 130, 149)	hsl(327, 16%, 58%)
Cape Verde	rgb(21, 82, 60)	hsl(158, 59%, 20%)

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.

Aa14.62:1 Super#E5FCF1 on #321C2A
Aa14.62:1 Super#321C2A on #E5FCF1
Aa10.33:1 Very good#321C2A on #97E0C6
Aa10.33:1 Very good#97E0C6 on #321C2A
Aa8.47:1 Very good#E5FCF1 on #15523C
Aa8.47:1 Very good#15523C on #E5FCF1
Aa5.99:1 Good#97E0C6 on #15523C
Aa5.99:1 Good#15523C on #97E0C6

Color blindness preview

CSS variables

/* Melting Glacier to Cape Verde — https://swatchly.xyz/palette/e5fcf1-321c2a-97e0c6-8a5c6e-a58295-15523c */
:root {
  --melting-glacier: #e5fcf1;
  --bruised-plum: #321c2a;
  --beach-glass: #97e0c6;
  --indian-silk: #8a5c6e;
  --hatoba-pigeon: #a58295;
  --cape-verde: #15523c;
}

Tailwind CSS v4

/* Melting Glacier to Cape Verde — https://swatchly.xyz/palette/e5fcf1-321c2a-97e0c6-8a5c6e-a58295-15523c */
@theme {
  --color-melting-glacier: #e5fcf1;
  --color-melting-glacier-50: #e5fcf1;
  --color-melting-glacier-100: #e1efe9;
  --color-melting-glacier-200: #ccdcd4;
  --color-melting-glacier-300: #b4c6bd;
  --color-melting-glacier-400: #93a79e;
  --color-melting-glacier-500: #778c82;
  --color-melting-glacier-600: #5d7168;
  --color-melting-glacier-700: #485a52;
  --color-melting-glacier-800: #37473f;
  --color-melting-glacier-900: #293630;
  --color-melting-glacier-950: #18221d;
  --color-bruised-plum: #321c2a;
  --color-bruised-plum-50: #fff0f9;
  --color-bruised-plum-100: #f8e5f0;
  --color-bruised-plum-200: #e7d0dd;
  --color-bruised-plum-300: #d2b8c7;
  --color-bruised-plum-400: #b498a9;
  --color-bruised-plum-500: #997e8e;
  --color-bruised-plum-600: #7f6575;
  --color-bruised-plum-700: #68505e;
  --color-bruised-plum-800: #543f4c;
  --color-bruised-plum-900: #43313c;
  --color-bruised-plum-950: #321c2a;
  --color-beach-glass: #97e0c6;
  --color-beach-glass-50: #d0faea;
  --color-beach-glass-100: #c0f0de;
  --color-beach-glass-200: #97e0c6;
  --color-beach-glass-300: #8ac9b2;
  --color-beach-glass-400: #66ac94;
  --color-beach-glass-500: #4a927a;
  --color-beach-glass-600: #317862;
  --color-beach-glass-700: #1d614d;
  --color-beach-glass-800: #0e4e3d;
  --color-beach-glass-900: #053d2e;
  --color-beach-glass-950: #01261c;
  --color-indian-silk: #8a5c6e;
  --color-indian-silk-50: #fff1f6;
  --color-indian-silk-100: #ffe2ec;
  --color-indian-silk-200: #f3cbd9;
  --color-indian-silk-300: #dfb3c3;
  --color-indian-silk-400: #c292a4;
  --color-indian-silk-500: #a67688;
  --color-indian-silk-600: #8a5c6e;
  --color-indian-silk-700: #704757;
  --color-indian-silk-800: #593644;
  --color-indian-silk-900: #462834;
  --color-indian-silk-950: #2d1820;
  --color-hatoba-pigeon: #a58295;
  --color-hatoba-pigeon-50: #fff3f9;
  --color-hatoba-pigeon-100: #fee6f3;
  --color-hatoba-pigeon-200: #eed3e1;
  --color-hatoba-pigeon-300: #dbbccd;
  --color-hatoba-pigeon-400: #bf9daf;
  --color-hatoba-pigeon-500: #a58295;
  --color-hatoba-pigeon-600: #886779;
  --color-hatoba-pigeon-700: #6e4f60;
  --color-hatoba-pigeon-800: #573d4b;
  --color-hatoba-pigeon-900: #432d3a;
  --color-hatoba-pigeon-950: #2a1b23;
  --color-cape-verde: #15523c;
  --color-cape-verde-50: #defeee;
  --color-cape-verde-100: #d1f5e4;
  --color-cape-verde-200: #b8e3cf;
  --color-cape-verde-300: #9dcfb8;
  --color-cape-verde-400: #79b198;
  --color-cape-verde-500: #5d967d;
  --color-cape-verde-600: #437c64;
  --color-cape-verde-700: #2f644f;
  --color-cape-verde-800: #15523c;
  --color-cape-verde-900: #153f2e;
  --color-cape-verde-950: #09281c;
}