Pacific Navy to Corbeau color palette

254289Pacific Navy F1FAFFCotton Ball 4989C2Sea Salt Rivers 93AFE2Queer Blue 161226Corbeau

About this palette

Pacific Navy to Corbeau is a 5-color cool palette: #254289 (Pacific Navy), #F1FAFF (Cotton Ball), #4989C2 (Sea Salt Rivers), #93AFE2 (Queer Blue), #161226 (Corbeau). It mixes blue, white, black tones and feels cool overall. The strongest text pairing is #F1FAFF on #161226 with a contrast ratio of 17.29:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pacific Navy	rgb(37, 66, 137)	hsl(223, 57%, 34%)
Cotton Ball	rgb(241, 250, 255)	hsl(201, 100%, 97%)
Sea Salt Rivers	rgb(73, 137, 194)	hsl(208, 50%, 52%)
Queer Blue	rgb(147, 175, 226)	hsl(219, 58%, 73%)
Corbeau	rgb(22, 18, 38)	hsl(252, 36%, 11%)

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.

Aa17.29:1 Super#F1FAFF on #161226
Aa17.29:1 Super#161226 on #F1FAFF
Aa8.95:1 Very good#254289 on #F1FAFF
Aa8.95:1 Very good#F1FAFF on #254289
Aa8.25:1 Very good#93AFE2 on #161226
Aa8.25:1 Very good#161226 on #93AFE2
Aa4.91:1 Good#4989C2 on #161226
Aa4.91:1 Good#161226 on #4989C2

Color blindness preview

CSS variables

/* Pacific Navy to Corbeau — https://swatchly.xyz/palette/254289-f1faff-4989c2-93afe2-161226 */
:root {
  --pacific-navy: #254289;
  --cotton-ball: #f1faff;
  --sea-salt-rivers: #4989c2;
  --queer-blue: #93afe2;
  --corbeau: #161226;
}

Tailwind CSS v4

/* Pacific Navy to Corbeau — https://swatchly.xyz/palette/254289-f1faff-4989c2-93afe2-161226 */
@theme {
  --color-pacific-navy: #254289;
  --color-pacific-navy-50: #f0f5ff;
  --color-pacific-navy-100: #e2ebff;
  --color-pacific-navy-200: #c5d8ff;
  --color-pacific-navy-300: #a4c1ff;
  --color-pacific-navy-400: #7fa2ee;
  --color-pacific-navy-500: #6386d3;
  --color-pacific-navy-600: #4b6cb6;
  --color-pacific-navy-700: #38569a;
  --color-pacific-navy-800: #254289;
  --color-pacific-navy-900: #1e3367;
  --color-pacific-navy-950: #102045;
  --color-cotton-ball: #f1faff;
  --color-cotton-ball-50: #f1faff;
  --color-cotton-ball-100: #e9eff2;
  --color-cotton-ball-200: #d4dbde;
  --color-cotton-ball-300: #bcc4c8;
  --color-cotton-ball-400: #9ca4a8;
  --color-cotton-ball-500: #80888c;
  --color-cotton-ball-600: #656d71;
  --color-cotton-ball-700: #50565a;
  --color-cotton-ball-800: #3d4347;
  --color-cotton-ball-900: #2f3436;
  --color-cotton-ball-950: #1c2022;
  --color-sea-salt-rivers: #4989c2;
  --color-sea-salt-rivers-50: #edf6ff;
  --color-sea-salt-rivers-100: #daedff;
  --color-sea-salt-rivers-200: #b5dbff;
  --color-sea-salt-rivers-300: #8ec5f9;
  --color-sea-salt-rivers-400: #68a5de;
  --color-sea-salt-rivers-500: #4989c2;
  --color-sea-salt-rivers-600: #2f6ea4;
  --color-sea-salt-rivers-700: #1b5788;
  --color-sea-salt-rivers-800: #0d446f;
  --color-sea-salt-rivers-900: #043459;
  --color-sea-salt-rivers-950: #01203a;
  --color-queer-blue: #93afe2;
  --color-queer-blue-50: #f7faff;
  --color-queer-blue-100: #ebf2ff;
  --color-queer-blue-200: #d1e1ff;
  --color-queer-blue-300: #b6cdf7;
  --color-queer-blue-400: #93afe2;
  --color-queer-blue-500: #7691c2;
  --color-queer-blue-600: #5a74a3;
  --color-queer-blue-700: #445b86;
  --color-queer-blue-800: #31466b;
  --color-queer-blue-900: #233454;
  --color-queer-blue-950: #131f35;
  --color-corbeau: #161226;
  --color-corbeau-50: #f5f3ff;
  --color-corbeau-100: #ebe9fb;
  --color-corbeau-200: #d7d4ea;
  --color-corbeau-300: #c1bdd6;
  --color-corbeau-400: #a19eb8;
  --color-corbeau-500: #84809b;
  --color-corbeau-600: #68647d;
  --color-corbeau-700: #4f4c62;
  --color-corbeau-800: #3b384b;
  --color-corbeau-900: #2a2836;
  --color-corbeau-950: #161226;
}