Copacabana to Treasure Map Waters color palette

086B87Copacabana 5CB9E6Malibu 244150Depths of the Nile 8CD6F5Over the Sky 5B91A7Treasure Map Waters

About this palette

Copacabana to Treasure Map Waters is a 5-color cool, monochromatic palette: #086B87 (Copacabana), #5CB9E6 (Malibu), #244150 (Depths of the Nile), #8CD6F5 (Over the Sky), #5B91A7 (Treasure Map Waters). It mixes blue tones and feels cool overall. The strongest text pairing is #244150 on #8CD6F5 with a contrast ratio of 6.70:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Copacabana	rgb(8, 107, 135)	hsl(193, 89%, 28%)
Malibu	rgb(92, 185, 230)	hsl(200, 73%, 63%)
Depths of the Nile	rgb(36, 65, 80)	hsl(200, 38%, 23%)
Over the Sky	rgb(140, 214, 245)	hsl(198, 84%, 75%)
Treasure Map Waters	rgb(91, 145, 167)	hsl(197, 30%, 51%)

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.

Aa6.70:1 Good#244150 on #8CD6F5
Aa6.70:1 Good#8CD6F5 on #244150
Aa4.90:1 Good#5CB9E6 on #244150
Aa4.90:1 Good#244150 on #5CB9E6
Aa3.77:1 Poor#086B87 on #8CD6F5
Aa3.77:1 Poor#8CD6F5 on #086B87
Aa3.11:1 Poor#244150 on #5B91A7
Aa3.11:1 Poor#5B91A7 on #244150

Color blindness preview

CSS variables

/* Copacabana to Treasure Map Waters — https://swatchly.xyz/palette/086b87-5cb9e6-244150-8cd6f5-5b91a7 */
:root {
  --copacabana: #086b87;
  --malibu: #5cb9e6;
  --depths-of-the-nile: #244150;
  --over-the-sky: #8cd6f5;
  --treasure-map-waters: #5b91a7;
}

Tailwind CSS v4

/* Copacabana to Treasure Map Waters — https://swatchly.xyz/palette/086b87-5cb9e6-244150-8cd6f5-5b91a7 */
@theme {
  --color-copacabana: #086b87;
  --color-copacabana-50: #e8f8ff;
  --color-copacabana-100: #cbf0ff;
  --color-copacabana-200: #a2def6;
  --color-copacabana-300: #81c6e1;
  --color-copacabana-400: #56a5c2;
  --color-copacabana-500: #3488a5;
  --color-copacabana-600: #086b87;
  --color-copacabana-700: #00556c;
  --color-copacabana-800: #004356;
  --color-copacabana-900: #003443;
  --color-copacabana-950: #00202b;
  --color-malibu: #5cb9e6;
  --color-malibu-50: #f3fbff;
  --color-malibu-100: #e2f5ff;
  --color-malibu-200: #bbe7ff;
  --color-malibu-300: #8ed6fb;
  --color-malibu-400: #5cb9e6;
  --color-malibu-500: #3c9bc6;
  --color-malibu-600: #117da7;
  --color-malibu-700: #006386;
  --color-malibu-800: #004c69;
  --color-malibu-900: #003a50;
  --color-malibu-950: #002332;
  --color-depths-of-the-nile: #244150;
  --color-depths-of-the-nile-50: #eaf8ff;
  --color-depths-of-the-nile-100: #daeffa;
  --color-depths-of-the-nile-200: #c3dce9;
  --color-depths-of-the-nile-300: #a9c5d4;
  --color-depths-of-the-nile-400: #86a5b5;
  --color-depths-of-the-nile-500: #698899;
  --color-depths-of-the-nile-600: #4f6c7c;
  --color-depths-of-the-nile-700: #3a5563;
  --color-depths-of-the-nile-800: #244150;
  --color-depths-of-the-nile-900: #1e313b;
  --color-depths-of-the-nile-950: #101e25;
  --color-over-the-sky: #8cd6f5;
  --color-over-the-sky-50: #f3fbff;
  --color-over-the-sky-100: #e0f6ff;
  --color-over-the-sky-200: #b6e8fe;
  --color-over-the-sky-300: #8cd6f5;
  --color-over-the-sky-400: #6fb4d0;
  --color-over-the-sky-500: #4d96b4;
  --color-over-the-sky-600: #2f7a96;
  --color-over-the-sky-700: #17607a;
  --color-over-the-sky-800: #044b61;
  --color-over-the-sky-900: #00394b;
  --color-over-the-sky-950: #002330;
  --color-treasure-map-waters: #5b91a7;
  --color-treasure-map-waters-50: #e9f8ff;
  --color-treasure-map-waters-100: #d3f2ff;
  --color-treasure-map-waters-200: #b8e0f1;
  --color-treasure-map-waters-300: #9ccbde;
  --color-treasure-map-waters-400: #78acc2;
  --color-treasure-map-waters-500: #5b91a7;
  --color-treasure-map-waters-600: #41768b;
  --color-treasure-map-waters-700: #2c5e71;
  --color-treasure-map-waters-800: #1d495a;
  --color-treasure-map-waters-900: #123947;
  --color-treasure-map-waters-950: #07232d;
}