Cape Verde to Ice Climber Color Palette

About this palette

Cape Verde to Ice Climber is a 4-color cool, monochromatic, gradient palette: #005754 (Cape Verde), #007E79 (Wizards Orb), #00B2A6 (Billiard), #00E1CD (Ice Climber). It mixes turquoise tones and feels cool overall. The strongest text pairing is #005754 on #00E1CD with a contrast ratio of 5.08:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(0, 87, 84)	hsl(178, 100%, 17%)
Wizards Orb	rgb(0, 126, 121)	hsl(178, 100%, 25%)
Billiard	rgb(0, 178, 166)	hsl(176, 100%, 35%)
Ice Climber	rgb(0, 225, 205)	hsl(175, 100%, 44%)

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.08:1 Good#005754 on #00E1CD
Aa5.08:1 Good#00E1CD on #005754
Aa3.18:1 Poor#005754 on #00B2A6
Aa3.18:1 Poor#00B2A6 on #005754

Color blindness preview

CSS variables

/* Cape Verde to Ice Climber — https://swatchly.xyz/palette/005754-007e79-00b2a6-00e1cd */
:root {
  --cape-verde: #005754;
  --wizards-orb: #007e79;
  --billiard: #00b2a6;
  --ice-climber: #00e1cd;
}

Tailwind CSS v4

/* Cape Verde to Ice Climber — https://swatchly.xyz/palette/005754-007e79-00b2a6-00e1cd */
@theme {
  --color-cape-verde: #005754;
  --color-cape-verde-50: #d8fefb;
  --color-cape-verde-100: #cbf5f2;
  --color-cape-verde-200: #b0e3df;
  --color-cape-verde-300: #95d0cc;
  --color-cape-verde-400: #71b3af;
  --color-cape-verde-500: #549995;
  --color-cape-verde-600: #397f7c;
  --color-cape-verde-700: #256966;
  --color-cape-verde-800: #005754;
  --color-cape-verde-900: #084341;
  --color-cape-verde-950: #012b29;
  --color-wizards-orb: #007e79;
  --color-wizards-orb-50: #d6fffb;
  --color-wizards-orb-100: #c0f8f4;
  --color-wizards-orb-200: #a3e7e2;
  --color-wizards-orb-300: #83d2cd;
  --color-wizards-orb-400: #58b4af;
  --color-wizards-orb-500: #339994;
  --color-wizards-orb-600: #007e79;
  --color-wizards-orb-700: #006460;
  --color-wizards-orb-800: #004e4b;
  --color-wizards-orb-900: #003c3a;
  --color-wizards-orb-950: #002624;
  --color-billiard: #00b2a6;
  --color-billiard-50: #cbfff8;
  --color-billiard-100: #abf9ef;
  --color-billiard-200: #87e7dc;
  --color-billiard-300: #5ed1c5;
  --color-billiard-400: #00b2a6;
  --color-billiard-500: #00948a;
  --color-billiard-600: #00786f;
  --color-billiard-700: #006059;
  --color-billiard-800: #004b46;
  --color-billiard-900: #003b36;
  --color-billiard-950: #002622;
  --color-ice-climber: #00e1cd;
  --color-ice-climber-50: #dcfff9;
  --color-ice-climber-100: #affff2;
  --color-ice-climber-200: #81f1e1;
  --color-ice-climber-300: #00e1cd;
  --color-ice-climber-400: #00bdac;
  --color-ice-climber-500: #009d8f;
  --color-ice-climber-600: #007e73;
  --color-ice-climber-700: #00645b;
  --color-ice-climber-800: #004e46;
  --color-ice-climber-900: #003c36;
  --color-ice-climber-950: #002621;
}