Start generating

Ice to Cape Verde color palette

D4FFF8Ice00DBCBIce Climber00BDAESuper Rare Jade2E8881Emerald Whispers00584DCape Verde005147Cape Verde
Open in generator Export PNG, PDF, ASE…

About this palette

Ice to Cape Verde is a 6-color cool, monochromatic palette: #D4FFF8 (Ice), #00DBCB (Ice Climber), #00BDAE (Super Rare Jade), #2E8881 (Emerald Whispers), #00584D (Cape Verde), #005147 (Cape Verde). It mixes white, turquoise tones and feels cool overall. The strongest text pairing is #D4FFF8 on #005147 with a contrast ratio of 8.58:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Icergb(212, 255, 248)hsl(170, 100%, 92%)
Ice Climberrgb(0, 219, 203)hsl(176, 100%, 43%)
Super Rare Jadergb(0, 189, 174)hsl(175, 100%, 37%)
Emerald Whispersrgb(46, 136, 129)hsl(175, 49%, 36%)
Cape Verdergb(0, 88, 77)hsl(172, 100%, 17%)
Cape Verdergb(0, 81, 71)hsl(173, 100%, 16%)

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.58:1 Very good#D4FFF8 on #005147
  • Aa8.58:1 Very good#005147 on #D4FFF8
  • Aa7.77:1 Very good#D4FFF8 on #00584D
  • Aa7.77:1 Very good#00584D on #D4FFF8
  • Aa5.29:1 Good#00DBCB on #005147
  • Aa5.29:1 Good#005147 on #00DBCB
  • Aa4.79:1 Good#00DBCB on #00584D
  • Aa4.79:1 Good#00584D on #00DBCB

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ice to Cape Verde — https://swatchly.xyz/palette/d4fff8-00dbcb-00bdae-2e8881-00584d-005147 */
:root {
  --ice: #d4fff8;
  --ice-climber: #00dbcb;
  --super-rare-jade: #00bdae;
  --emerald-whispers: #2e8881;
  --cape-verde: #00584d;
  --cape-verde-2: #005147;
}

Tailwind CSS v4

/* Ice to Cape Verde — https://swatchly.xyz/palette/d4fff8-00dbcb-00bdae-2e8881-00584d-005147 */
@theme {
  --color-ice: #d4fff8;
  --color-ice-50: #d4fff8;
  --color-ice-100: #d7f1ed;
  --color-ice-200: #c0dfda;
  --color-ice-300: #a6c9c3;
  --color-ice-400: #84aba4;
  --color-ice-500: #688f89;
  --color-ice-600: #4e746f;
  --color-ice-700: #3a5d58;
  --color-ice-800: #2a4945;
  --color-ice-900: #1e3835;
  --color-ice-950: #102321;
  --color-ice-climber: #00dbcb;
  --color-ice-climber-50: #d1fff8;
  --color-ice-climber-100: #a2fdf2;
  --color-ice-climber-200: #7becdf;
  --color-ice-climber-300: #00dbcb;
  --color-ice-climber-400: #00b8aa;
  --color-ice-climber-500: #00998e;
  --color-ice-climber-600: #007c72;
  --color-ice-climber-700: #00625b;
  --color-ice-climber-800: #004d47;
  --color-ice-climber-900: #003c37;
  --color-ice-climber-950: #002622;
  --color-super-rare-jade: #00bdae;
  --color-super-rare-jade-50: #dbfff9;
  --color-super-rare-jade-100: #b1fef3;
  --color-super-rare-jade-200: #8eeee1;
  --color-super-rare-jade-300: #66dacc;
  --color-super-rare-jade-400: #00bdae;
  --color-super-rare-jade-500: #009d91;
  --color-super-rare-jade-600: #007f74;
  --color-super-rare-jade-700: #00645c;
  --color-super-rare-jade-800: #004e48;
  --color-super-rare-jade-900: #003c37;
  --color-super-rare-jade-950: #002622;
  --color-emerald-whispers: #2e8881;
  --color-emerald-whispers-50: #d6fffa;
  --color-emerald-whispers-100: #c8f9f4;
  --color-emerald-whispers-200: #afeae3;
  --color-emerald-whispers-300: #93d7d0;
  --color-emerald-whispers-400: #6cbbb3;
  --color-emerald-whispers-500: #4ca19a;
  --color-emerald-whispers-600: #2e8881;
  --color-emerald-whispers-700: #0f6e67;
  --color-emerald-whispers-800: #005651;
  --color-emerald-whispers-900: #00423e;
  --color-emerald-whispers-950: #002926;
  --color-cape-verde: #00584d;
  --color-cape-verde-50: #d9fff6;
  --color-cape-verde-100: #cbf6ed;
  --color-cape-verde-200: #b0e4d9;
  --color-cape-verde-300: #95d1c4;
  --color-cape-verde-400: #71b4a7;
  --color-cape-verde-500: #549a8d;
  --color-cape-verde-600: #398074;
  --color-cape-verde-700: #256a5f;
  --color-cape-verde-800: #00584d;
  --color-cape-verde-900: #08443b;
  --color-cape-verde-950: #012c25;
  --color-cape-verde-2: #005147;
  --color-cape-verde-2-50: #dafef6;
  --color-cape-verde-2-100: #cdf5ed;
  --color-cape-verde-2-200: #b3e3d9;
  --color-cape-verde-2-300: #97cfc3;
  --color-cape-verde-2-400: #72b1a5;
  --color-cape-verde-2-500: #54968a;
  --color-cape-verde-2-600: #3a7b70;
  --color-cape-verde-2-700: #256459;
  --color-cape-verde-2-800: #005147;
  --color-cape-verde-2-900: #0b3e36;
  --color-cape-verde-2-950: #032722;
}

Similar palettes