Pastel Blue to Oxford by Night color palette

99C2FFPastel Blue 00B0DFThalassophile 006CABWing Commander 323A88Perfect Dark 001823Oxford by Night

About this palette

Pastel Blue to Oxford by Night is a 5-color cool, gradient palette: #99C2FF (Pastel Blue), #00B0DF (Thalassophile), #006CAB (Wing Commander), #323A88 (Perfect Dark), #001823 (Oxford by Night). It mixes blue, black tones and feels cool overall. The strongest text pairing is #99C2FF on #001823 with a contrast ratio of 9.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Blue	rgb(153, 194, 255)	hsl(216, 100%, 80%)
Thalassophile	rgb(0, 176, 223)	hsl(193, 100%, 44%)
Wing Commander	rgb(0, 108, 171)	hsl(202, 100%, 34%)
Perfect Dark	rgb(50, 58, 136)	hsl(234, 46%, 36%)
Oxford by Night	rgb(0, 24, 35)	hsl(199, 100%, 7%)

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.

Aa9.97:1 Very good#99C2FF on #001823
Aa9.97:1 Very good#001823 on #99C2FF
Aa7.17:1 Very good#00B0DF on #001823
Aa7.17:1 Very good#001823 on #00B0DF
Aa5.49:1 Good#99C2FF on #323A88
Aa5.49:1 Good#323A88 on #99C2FF
Aa3.95:1 Poor#00B0DF on #323A88
Aa3.95:1 Poor#323A88 on #00B0DF

Color blindness preview

CSS variables

/* Pastel Blue to Oxford by Night — https://swatchly.xyz/palette/99c2ff-00b0df-006cab-323a88-001823 */
:root {
  --pastel-blue: #99c2ff;
  --thalassophile: #00b0df;
  --wing-commander: #006cab;
  --perfect-dark: #323a88;
  --oxford-by-night: #001823;
}

Tailwind CSS v4

/* Pastel Blue to Oxford by Night — https://swatchly.xyz/palette/99c2ff-00b0df-006cab-323a88-001823 */
@theme {
  --color-pastel-blue: #99c2ff;
  --color-pastel-blue-50: #eff5ff;
  --color-pastel-blue-100: #dfecff;
  --color-pastel-blue-200: #bfd9ff;
  --color-pastel-blue-300: #99c2ff;
  --color-pastel-blue-400: #7ca2db;
  --color-pastel-blue-500: #6087c0;
  --color-pastel-blue-600: #476ca2;
  --color-pastel-blue-700: #345586;
  --color-pastel-blue-800: #25426d;
  --color-pastel-blue-900: #1a3357;
  --color-pastel-blue-950: #0d1f39;
  --color-thalassophile: #00b0df;
  --color-thalassophile-50: #e7f8ff;
  --color-thalassophile-100: #cff1ff;
  --color-thalassophile-200: #9ce2ff;
  --color-thalassophile-300: #61cff8;
  --color-thalassophile-400: #00b0df;
  --color-thalassophile-500: #0092ba;
  --color-thalassophile-600: #007697;
  --color-thalassophile-700: #005e78;
  --color-thalassophile-800: #00495f;
  --color-thalassophile-900: #00394a;
  --color-thalassophile-950: #002330;
  --color-wing-commander: #006cab;
  --color-wing-commander-50: #edf7ff;
  --color-wing-commander-100: #d9edff;
  --color-wing-commander-200: #b2dbff;
  --color-wing-commander-300: #81c6ff;
  --color-wing-commander-400: #53a5e6;
  --color-wing-commander-500: #3088c9;
  --color-wing-commander-600: #006cab;
  --color-wing-commander-700: #005689;
  --color-wing-commander-800: #00436d;
  --color-wing-commander-900: #003355;
  --color-wing-commander-950: #002038;
  --color-perfect-dark: #323a88;
  --color-perfect-dark-50: #f2f5ff;
  --color-perfect-dark-100: #e5eaff;
  --color-perfect-dark-200: #cbd5ff;
  --color-perfect-dark-300: #aebdff;
  --color-perfect-dark-400: #8b9cef;
  --color-perfect-dark-500: #7080d4;
  --color-perfect-dark-600: #5865b6;
  --color-perfect-dark-700: #444f99;
  --color-perfect-dark-800: #323a88;
  --color-perfect-dark-900: #272e65;
  --color-perfect-dark-950: #171b44;
  --color-oxford-by-night: #001823;
  --color-oxford-by-night-50: #eaf8ff;
  --color-oxford-by-night-100: #dceff8;
  --color-oxford-by-night-200: #c5dce7;
  --color-oxford-by-night-300: #acc6d2;
  --color-oxford-by-night-400: #8aa6b4;
  --color-oxford-by-night-500: #6c8997;
  --color-oxford-by-night-600: #516c79;
  --color-oxford-by-night-700: #3b535f;
  --color-oxford-by-night-800: #2a3e48;
  --color-oxford-by-night-900: #1c2c34;
  --color-oxford-by-night-950: #001823;
}