Panorama to Abyssal Waters Color Palette

About this palette

Panorama to Abyssal Waters is a 5-color cool, monochromatic palette: #2A7887 (Panorama), #62C3CB (Sea Serpent), #2CA6B4 (True Sky Blue), #BAECF4 (Icy Breeze), #005360 (Abyssal Waters). It mixes turquoise tones and feels cool overall. The strongest text pairing is #BAECF4 on #005360 with a contrast ratio of 6.81:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Panorama	rgb(42, 120, 135)	hsl(190, 53%, 35%)
Sea Serpent	rgb(98, 195, 203)	hsl(185, 50%, 59%)
True Sky Blue	rgb(44, 166, 180)	hsl(186, 61%, 44%)
Icy Breeze	rgb(186, 236, 244)	hsl(188, 73%, 84%)
Abyssal Waters	rgb(0, 83, 96)	hsl(188, 100%, 19%)

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.81:1 Good#BAECF4 on #005360
Aa6.81:1 Good#005360 on #BAECF4
Aa4.23:1 Poor#62C3CB on #005360
Aa4.23:1 Poor#005360 on #62C3CB
Aa3.96:1 Poor#2A7887 on #BAECF4
Aa3.96:1 Poor#BAECF4 on #2A7887
Aa3.00:1 Poor#2CA6B4 on #005360
Aa3.00:1 Poor#005360 on #2CA6B4

Color blindness preview

CSS variables

/* Panorama to Abyssal Waters — https://swatchly.xyz/palette/2a7887-62c3cb-2ca6b4-baecf4-005360 */
:root {
  --panorama: #2a7887;
  --sea-serpent: #62c3cb;
  --true-sky-blue: #2ca6b4;
  --icy-breeze: #baecf4;
  --abyssal-waters: #005360;
}

Tailwind CSS v4

/* Panorama to Abyssal Waters — https://swatchly.xyz/palette/2a7887-62c3cb-2ca6b4-baecf4-005360 */
@theme {
  --color-panorama: #2a7887;
  --color-panorama-50: #e3faff;
  --color-panorama-100: #c8f4ff;
  --color-panorama-200: #ace2ee;
  --color-panorama-300: #8fcddb;
  --color-panorama-400: #68aebe;
  --color-panorama-500: #4893a2;
  --color-panorama-600: #2a7887;
  --color-panorama-700: #15606d;
  --color-panorama-800: #034b57;
  --color-panorama-900: #003a44;
  --color-panorama-950: #00242b;
  --color-sea-serpent: #62c3cb;
  --color-sea-serpent-50: #c2f9fd;
  --color-sea-serpent-100: #afeef3;
  --color-sea-serpent-200: #8fd9e0;
  --color-sea-serpent-300: #62c3cb;
  --color-sea-serpent-400: #44a6ad;
  --color-sea-serpent-500: #218c94;
  --color-sea-serpent-600: #00737a;
  --color-sea-serpent-700: #005c63;
  --color-sea-serpent-800: #004a4f;
  --color-sea-serpent-900: #003b3f;
  --color-sea-serpent-950: #002528;
  --color-true-sky-blue: #2ca6b4;
  --color-true-sky-blue-50: #d0f9ff;
  --color-true-sky-blue-100: #adf2fb;
  --color-true-sky-blue-200: #8bdee9;
  --color-true-sky-blue-300: #65c7d3;
  --color-true-sky-blue-400: #2ca6b4;
  --color-true-sky-blue-500: #008c99;
  --color-true-sky-blue-600: #00717c;
  --color-true-sky-blue-700: #005a63;
  --color-true-sky-blue-800: #00484f;
  --color-true-sky-blue-900: #00383f;
  --color-true-sky-blue-950: #002529;
  --color-icy-breeze: #baecf4;
  --color-icy-breeze-50: #d6f4f8;
  --color-icy-breeze-100: #baecf4;
  --color-icy-breeze-200: #b2d8de;
  --color-icy-breeze-300: #99c4ca;
  --color-icy-breeze-400: #78a6ae;
  --color-icy-breeze-500: #5d8c94;
  --color-icy-breeze-600: #45737a;
  --color-icy-breeze-700: #335d63;
  --color-icy-breeze-800: #23494f;
  --color-icy-breeze-900: #18383d;
  --color-icy-breeze-950: #0c2327;
  --color-abyssal-waters: #005360;
  --color-abyssal-waters-50: #e3faff;
  --color-abyssal-waters-100: #cbf4fd;
  --color-abyssal-waters-200: #b0e1ec;
  --color-abyssal-waters-300: #95cdd9;
  --color-abyssal-waters-400: #71b0bd;
  --color-abyssal-waters-500: #5396a4;
  --color-abyssal-waters-600: #397c89;
  --color-abyssal-waters-700: #256572;
  --color-abyssal-waters-800: #005360;
  --color-abyssal-waters-900: #094049;
  --color-abyssal-waters-950: #022930;
}