Copacabana to Sunken Mystery Color Palette

About this palette

Copacabana to Sunken Mystery is a 4-color dark, cool palette: #006E8D (Copacabana), #002E3C (Nordic Noir), #001300 (Cosmic Bit Flip), #055157 (Sunken Mystery). It mixes blue, black, turquoise tones and feels cool overall. The strongest text pairing is #006E8D on #001300 with a contrast ratio of 3.31:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Copacabana	rgb(0, 110, 141)	hsl(193, 100%, 28%)
Nordic Noir	rgb(0, 46, 60)	hsl(194, 100%, 12%)
Cosmic Bit Flip	rgb(0, 19, 0)	hsl(120, 100%, 4%)
Sunken Mystery	rgb(5, 81, 87)	hsl(184, 89%, 18%)

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.

Aa3.31:1 Poor#006E8D on #001300
Aa3.31:1 Poor#001300 on #006E8D

Color blindness preview

CSS variables

/* Copacabana to Sunken Mystery — https://swatchly.xyz/palette/006e8d-002e3c-001300-055157 */
:root {
  --copacabana: #006e8d;
  --nordic-noir: #002e3c;
  --cosmic-bit-flip: #001300;
  --sunken-mystery: #055157;
}

Tailwind CSS v4

/* Copacabana to Sunken Mystery — https://swatchly.xyz/palette/006e8d-002e3c-001300-055157 */
@theme {
  --color-copacabana: #006e8d;
  --color-copacabana-50: #e9f8ff;
  --color-copacabana-100: #cef0ff;
  --color-copacabana-200: #a1dff9;
  --color-copacabana-300: #7fc8e6;
  --color-copacabana-400: #55a8c8;
  --color-copacabana-500: #318aaa;
  --color-copacabana-600: #006e8d;
  --color-copacabana-700: #005771;
  --color-copacabana-800: #004459;
  --color-copacabana-900: #003546;
  --color-copacabana-950: #00212d;
  --color-nordic-noir: #002e3c;
  --color-nordic-noir-50: #e8f8ff;
  --color-nordic-noir-100: #d5f0fc;
  --color-nordic-noir-200: #bddeeb;
  --color-nordic-noir-300: #a2c8d7;
  --color-nordic-noir-400: #80a9b9;
  --color-nordic-noir-500: #658fa0;
  --color-nordic-noir-600: #4d7686;
  --color-nordic-noir-700: #3a6170;
  --color-nordic-noir-800: #2c4f5c;
  --color-nordic-noir-900: #21404c;
  --color-nordic-noir-950: #002e3c;
  --color-cosmic-bit-flip: #001300;
  --color-cosmic-bit-flip-50: #eafbe8;
  --color-cosmic-bit-flip-100: #dff1dd;
  --color-cosmic-bit-flip-200: #c9dfc6;
  --color-cosmic-bit-flip-300: #b0c9ad;
  --color-cosmic-bit-flip-400: #8faa8c;
  --color-cosmic-bit-flip-500: #6f8b6d;
  --color-cosmic-bit-flip-600: #536c50;
  --color-cosmic-bit-flip-700: #3b5239;
  --color-cosmic-bit-flip-800: #283a27;
  --color-cosmic-bit-flip-900: #192718;
  --color-cosmic-bit-flip-950: #001300;
  --color-sunken-mystery: #055157;
  --color-sunken-mystery-50: #ddfcff;
  --color-sunken-mystery-100: #cdf4f8;
  --color-sunken-mystery-200: #b3e2e6;
  --color-sunken-mystery-300: #97cdd2;
  --color-sunken-mystery-400: #73afb5;
  --color-sunken-mystery-500: #55959b;
  --color-sunken-mystery-600: #3b7a80;
  --color-sunken-mystery-700: #276369;
  --color-sunken-mystery-800: #055157;
  --color-sunken-mystery-900: #0d3e42;
  --color-sunken-mystery-950: #04272b;
}