Start generating

Opal Green to Cape Verde color palette

007B5COpal Green3ADEC3Ice Climber36B5F6Hawaii MorningB9F8F3Ice Citadel008FC3Swimmer005755Cape Verde
Open in generator Export PNG, PDF, ASE…

About this palette

Opal Green to Cape Verde is a 6-color cool palette: #007B5C (Opal Green), #3ADEC3 (Ice Climber), #36B5F6 (Hawaii Morning), #B9F8F3 (Ice Citadel), #008FC3 (Swimmer), #005755 (Cape Verde). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #B9F8F3 on #005755 with a contrast ratio of 7.13:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Opal Greenrgb(0, 123, 92)hsl(165, 100%, 24%)
Ice Climberrgb(58, 222, 195)hsl(170, 71%, 55%)
Hawaii Morningrgb(54, 181, 246)hsl(200, 91%, 59%)
Ice Citadelrgb(185, 248, 243)hsl(175, 82%, 85%)
Swimmerrgb(0, 143, 195)hsl(196, 100%, 38%)
Cape Verdergb(0, 87, 85)hsl(179, 100%, 17%)

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.13:1 Very good#B9F8F3 on #005755
  • Aa7.13:1 Very good#005755 on #B9F8F3
  • Aa4.98:1 Good#3ADEC3 on #005755
  • Aa4.98:1 Good#005755 on #3ADEC3
  • Aa4.46:1 Poor#007B5C on #B9F8F3
  • Aa4.46:1 Poor#B9F8F3 on #007B5C
  • Aa3.65:1 Poor#36B5F6 on #005755
  • Aa3.65:1 Poor#005755 on #36B5F6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Opal Green to Cape Verde — https://swatchly.xyz/palette/007b5c-3adec3-36b5f6-b9f8f3-008fc3-005755 */
:root {
  --opal-green: #007b5c;
  --ice-climber: #3adec3;
  --hawaii-morning: #36b5f6;
  --ice-citadel: #b9f8f3;
  --swimmer: #008fc3;
  --cape-verde: #005755;
}

Tailwind CSS v4

/* Opal Green to Cape Verde — https://swatchly.xyz/palette/007b5c-3adec3-36b5f6-b9f8f3-008fc3-005755 */
@theme {
  --color-opal-green: #007b5c;
  --color-opal-green-50: #dbffef;
  --color-opal-green-100: #c1f9e2;
  --color-opal-green-200: #a3e7cc;
  --color-opal-green-300: #82d2b3;
  --color-opal-green-400: #57b392;
  --color-opal-green-500: #339776;
  --color-opal-green-600: #007b5c;
  --color-opal-green-700: #006248;
  --color-opal-green-800: #004d38;
  --color-opal-green-900: #003b2b;
  --color-opal-green-950: #00251a;
  --color-ice-climber: #3adec3;
  --color-ice-climber-50: #dafff6;
  --color-ice-climber-100: #adffec;
  --color-ice-climber-200: #89eed9;
  --color-ice-climber-300: #3adec3;
  --color-ice-climber-400: #00bca3;
  --color-ice-climber-500: #009d88;
  --color-ice-climber-600: #007e6d;
  --color-ice-climber-700: #006456;
  --color-ice-climber-800: #004e43;
  --color-ice-climber-900: #003c33;
  --color-ice-climber-950: #002620;
  --color-hawaii-morning: #36b5f6;
  --color-hawaii-morning-50: #f1f9ff;
  --color-hawaii-morning-100: #dff2ff;
  --color-hawaii-morning-200: #b8e3ff;
  --color-hawaii-morning-300: #87d1ff;
  --color-hawaii-morning-400: #36b5f6;
  --color-hawaii-morning-500: #0097d5;
  --color-hawaii-morning-600: #0079ac;
  --color-hawaii-morning-700: #006089;
  --color-hawaii-morning-800: #004a6b;
  --color-hawaii-morning-900: #003853;
  --color-hawaii-morning-950: #002235;
  --color-ice-citadel: #b9f8f3;
  --color-ice-citadel-50: #dafcf9;
  --color-ice-citadel-100: #b9f8f3;
  --color-ice-citadel-200: #b3e1dd;
  --color-ice-citadel-300: #98ccc8;
  --color-ice-citadel-400: #73ada9;
  --color-ice-citadel-500: #56928e;
  --color-ice-citadel-600: #3c7774;
  --color-ice-citadel-700: #28605c;
  --color-ice-citadel-800: #194b49;
  --color-ice-citadel-900: #0f3a38;
  --color-ice-citadel-950: #052523;
  --color-swimmer: #008fc3;
  --color-swimmer-50: #eaf7ff;
  --color-swimmer-100: #d4efff;
  --color-swimmer-200: #a6dfff;
  --color-swimmer-300: #71cbfa;
  --color-swimmer-400: #3fabdf;
  --color-swimmer-500: #008fc3;
  --color-swimmer-600: #00739e;
  --color-swimmer-700: #005b7e;
  --color-swimmer-800: #004764;
  --color-swimmer-900: #00374e;
  --color-swimmer-950: #002233;
  --color-cape-verde: #005755;
  --color-cape-verde-50: #d8fefc;
  --color-cape-verde-100: #cbf5f3;
  --color-cape-verde-200: #b0e3e0;
  --color-cape-verde-300: #95d0cd;
  --color-cape-verde-400: #71b3b0;
  --color-cape-verde-500: #539996;
  --color-cape-verde-600: #397f7d;
  --color-cape-verde-700: #256967;
  --color-cape-verde-800: #005755;
  --color-cape-verde-900: #084341;
  --color-cape-verde-950: #012b2a;
}

Similar palettes