Wavy Navy to Oceanic Noir Color Palette

About this palette

Wavy Navy to Oceanic Noir is a 5-color cool palette: #12638D (Wavy Navy), #91E1F6 (Blizzard Blue), #797EB6 (Orbital), #90C1CE (Neptune’s Realm), #192833 (Oceanic Noir). It mixes blue, purple, gray tones and feels cool overall. The strongest text pairing is #91E1F6 on #192833 with a contrast ratio of 10.27:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wavy Navy	rgb(18, 99, 141)	hsl(200, 77%, 31%)
Blizzard Blue	rgb(145, 225, 246)	hsl(192, 85%, 77%)
Orbital	rgb(121, 126, 182)	hsl(235, 29%, 59%)
Neptune’s Realm	rgb(144, 193, 206)	hsl(193, 39%, 69%)
Oceanic Noir	rgb(25, 40, 51)	hsl(205, 34%, 15%)

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.

Aa10.27:1 Very good#91E1F6 on #192833
Aa10.27:1 Very good#192833 on #91E1F6
Aa7.69:1 Very good#90C1CE on #192833
Aa7.69:1 Very good#192833 on #90C1CE
Aa4.48:1 Poor#12638D on #91E1F6
Aa4.48:1 Poor#91E1F6 on #12638D
Aa3.93:1 Poor#797EB6 on #192833
Aa3.93:1 Poor#192833 on #797EB6

Color blindness preview

CSS variables

/* Wavy Navy to Oceanic Noir — https://swatchly.xyz/palette/12638d-91e1f6-797eb6-90c1ce-192833 */
:root {
  --wavy-navy: #12638d;
  --blizzard-blue: #91e1f6;
  --orbital: #797eb6;
  --neptune-s-realm: #90c1ce;
  --oceanic-noir: #192833;
}

Tailwind CSS v4

/* Wavy Navy to Oceanic Noir — https://swatchly.xyz/palette/12638d-91e1f6-797eb6-90c1ce-192833 */
@theme {
  --color-wavy-navy: #12638d;
  --color-wavy-navy-50: #ecf7ff;
  --color-wavy-navy-100: #d8efff;
  --color-wavy-navy-200: #b2e0ff;
  --color-wavy-navy-300: #90ccf4;
  --color-wavy-navy-400: #6aaeda;
  --color-wavy-navy-500: #4c93c0;
  --color-wavy-navy-600: #3079a4;
  --color-wavy-navy-700: #12638d;
  --color-wavy-navy-800: #074d70;
  --color-wavy-navy-900: #003c59;
  --color-wavy-navy-950: #00253a;
  --color-blizzard-blue: #91e1f6;
  --color-blizzard-blue-50: #dcf8ff;
  --color-blizzard-blue-100: #bff1fe;
  --color-blizzard-blue-200: #91e1f6;
  --color-blizzard-blue-300: #86c9db;
  --color-blizzard-blue-400: #5fabbf;
  --color-blizzard-blue-500: #4090a4;
  --color-blizzard-blue-600: #237689;
  --color-blizzard-blue-700: #095f70;
  --color-blizzard-blue-800: #004b59;
  --color-blizzard-blue-900: #003a45;
  --color-blizzard-blue-950: #00242c;
  --color-orbital: #797eb6;
  --color-orbital-50: #f2f4ff;
  --color-orbital-100: #e6e9ff;
  --color-orbital-200: #cdd2ff;
  --color-orbital-300: #b5bbee;
  --color-orbital-400: #949ad2;
  --color-orbital-500: #797eb6;
  --color-orbital-600: #606499;
  --color-orbital-700: #4b4e7e;
  --color-orbital-800: #3a3c66;
  --color-orbital-900: #2c2e51;
  --color-orbital-950: #1a1c35;
  --color-neptune-s-realm: #90c1ce;
  --color-neptune-s-realm-50: #d9f6fe;
  --color-neptune-s-realm-100: #cbebf4;
  --color-neptune-s-realm-200: #b1d7e2;
  --color-neptune-s-realm-300: #90c1ce;
  --color-neptune-s-realm-400: #74a3af;
  --color-neptune-s-realm-500: #5a8995;
  --color-neptune-s-realm-600: #42707b;
  --color-neptune-s-realm-700: #305a64;
  --color-neptune-s-realm-800: #224750;
  --color-neptune-s-realm-900: #183840;
  --color-neptune-s-realm-950: #0b2329;
  --color-oceanic-noir: #192833;
  --color-oceanic-noir-50: #ecf7ff;
  --color-oceanic-noir-100: #e1edf6;
  --color-oceanic-noir-200: #ccdae5;
  --color-oceanic-noir-300: #b3c3d0;
  --color-oceanic-noir-400: #93a4b2;
  --color-oceanic-noir-500: #798a98;
  --color-oceanic-noir-600: #60717e;
  --color-oceanic-noir-700: #4c5b67;
  --color-oceanic-noir-800: #3c4954;
  --color-oceanic-noir-900: #2f3b44;
  --color-oceanic-noir-950: #192833;
}