Cape Verde to Hammam Blue Color Palette

About this palette

Cape Verde to Hammam Blue is a 5-color cool, monochromatic, gradient palette: #105146 (Cape Verde), #247067 (Pine Scented Lagoon), #399189 (Highlands), #4DB3AD (Verdigris), #63D6D3 (Hammam Blue). It mixes turquoise tones and feels cool overall. The strongest text pairing is #105146 on #63D6D3 with a contrast ratio of 5.29:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(16, 81, 70)	hsl(170, 67%, 19%)
Pine Scented Lagoon	rgb(36, 112, 103)	hsl(173, 51%, 29%)
Highlands	rgb(57, 145, 137)	hsl(175, 44%, 40%)
Verdigris	rgb(77, 179, 173)	hsl(176, 40%, 50%)
Hammam Blue	rgb(99, 214, 211)	hsl(178, 58%, 61%)

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.29:1 Good#105146 on #63D6D3
Aa5.29:1 Good#63D6D3 on #105146
Aa3.66:1 Poor#105146 on #4DB3AD
Aa3.66:1 Poor#4DB3AD on #105146
Aa3.37:1 Poor#247067 on #63D6D3
Aa3.37:1 Poor#63D6D3 on #247067

Color blindness preview

CSS variables

/* Cape Verde to Hammam Blue — https://swatchly.xyz/palette/105146-247067-399189-4db3ad-63d6d3 */
:root {
  --cape-verde: #105146;
  --pine-scented-lagoon: #247067;
  --highlands: #399189;
  --verdigris: #4db3ad;
  --hammam-blue: #63d6d3;
}

Tailwind CSS v4

/* Cape Verde to Hammam Blue — https://swatchly.xyz/palette/105146-247067-399189-4db3ad-63d6d3 */
@theme {
  --color-cape-verde: #105146;
  --color-cape-verde-50: #ddfef5;
  --color-cape-verde-100: #cff5eb;
  --color-cape-verde-200: #b6e3d8;
  --color-cape-verde-300: #9bcec2;
  --color-cape-verde-400: #77b0a3;
  --color-cape-verde-500: #5a9588;
  --color-cape-verde-600: #407b6f;
  --color-cape-verde-700: #2c6358;
  --color-cape-verde-800: #105146;
  --color-cape-verde-900: #123e36;
  --color-cape-verde-950: #072721;
  --color-pine-scented-lagoon: #247067;
  --color-pine-scented-lagoon-50: #d8fff8;
  --color-pine-scented-lagoon-100: #c7f4ed;
  --color-pine-scented-lagoon-200: #abe1d8;
  --color-pine-scented-lagoon-300: #8bcac0;
  --color-pine-scented-lagoon-400: #64aaa0;
  --color-pine-scented-lagoon-500: #448c83;
  --color-pine-scented-lagoon-600: #247067;
  --color-pine-scented-lagoon-700: #155952;
  --color-pine-scented-lagoon-800: #074740;
  --color-pine-scented-lagoon-900: #013732;
  --color-pine-scented-lagoon-950: #00231f;
  --color-highlands: #399189;
  --color-highlands-50: #d2fff9;
  --color-highlands-100: #c2f5ef;
  --color-highlands-200: #a4e3db;
  --color-highlands-300: #84cdc5;
  --color-highlands-400: #5bada5;
  --color-highlands-500: #399189;
  --color-highlands-600: #1b766f;
  --color-highlands-700: #005f59;
  --color-highlands-800: #004b46;
  --color-highlands-900: #003a36;
  --color-highlands-950: #002522;
  --color-verdigris: #4db3ad;
  --color-verdigris-50: #d3fffb;
  --color-verdigris-100: #bef8f3;
  --color-verdigris-200: #9fe6e1;
  --color-verdigris-300: #7ed1cb;
  --color-verdigris-400: #4db3ad;
  --color-verdigris-500: #2b9791;
  --color-verdigris-600: #007b76;
  --color-verdigris-700: #00625e;
  --color-verdigris-800: #004d4a;
  --color-verdigris-900: #003b39;
  --color-verdigris-950: #002524;
  --color-hammam-blue: #63d6d3;
  --color-hammam-blue-50: #d4fffd;
  --color-hammam-blue-100: #b9f9f7;
  --color-hammam-blue-200: #99e8e5;
  --color-hammam-blue-300: #63d6d3;
  --color-hammam-blue-400: #45b5b2;
  --color-hammam-blue-500: #0d9997;
  --color-hammam-blue-600: #007c7a;
  --color-hammam-blue-700: #006261;
  --color-hammam-blue-800: #004d4c;
  --color-hammam-blue-900: #003b3a;
  --color-hammam-blue-950: #002525;
}