Mississippi River to Midnight Edition Color Palette

About this palette

Mississippi River to Midnight Edition is a 4-color dark palette: #3A6388 (Mississippi River), #6E0940 (Her Fierceness), #002339 (Midnight Dreams), #08121F (Midnight Edition). It mixes blue, red, black tones and feels cool overall. The strongest text pairing is #3A6388 on #08121F with a contrast ratio of 2.97:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mississippi River	rgb(58, 99, 136)	hsl(208, 40%, 38%)
Her Fierceness	rgb(110, 9, 64)	hsl(327, 85%, 23%)
Midnight Dreams	rgb(0, 35, 57)	hsl(203, 100%, 11%)
Midnight Edition	rgb(8, 18, 31)	hsl(214, 59%, 8%)

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.

Color blindness preview

CSS variables

/* Mississippi River to Midnight Edition — https://swatchly.xyz/palette/3a6388-6e0940-002339-08121f */
:root {
  --mississippi-river: #3a6388;
  --her-fierceness: #6e0940;
  --midnight-dreams: #002339;
  --midnight-edition: #08121f;
}

Tailwind CSS v4

/* Mississippi River to Midnight Edition — https://swatchly.xyz/palette/3a6388-6e0940-002339-08121f */
@theme {
  --color-mississippi-river: #3a6388;
  --color-mississippi-river-50: #edf6ff;
  --color-mississippi-river-100: #dceeff;
  --color-mississippi-river-200: #bddefd;
  --color-mississippi-river-300: #a4c9ec;
  --color-mississippi-river-400: #83acd2;
  --color-mississippi-river-500: #6892b9;
  --color-mississippi-river-600: #4f799f;
  --color-mississippi-river-700: #3a6388;
  --color-mississippi-river-800: #2b4d6d;
  --color-mississippi-river-900: #1d3b56;
  --color-mississippi-river-950: #0f2539;
  --color-her-fierceness: #6e0940;
  --color-her-fierceness-50: #fff1f6;
  --color-her-fierceness-100: #ffe2ec;
  --color-her-fierceness-200: #ffc5da;
  --color-her-fierceness-300: #fc9fc4;
  --color-her-fierceness-400: #df7aa3;
  --color-her-fierceness-500: #c15b87;
  --color-her-fierceness-600: #a0406b;
  --color-her-fierceness-700: #822c54;
  --color-her-fierceness-800: #6e0940;
  --color-her-fierceness-900: #511230;
  --color-her-fierceness-950: #34081d;
  --color-midnight-dreams: #002339;
  --color-midnight-dreams-50: #ecf7ff;
  --color-midnight-dreams-100: #d9eeff;
  --color-midnight-dreams-200: #c0dcf2;
  --color-midnight-dreams-300: #a6c6de;
  --color-midnight-dreams-400: #83a6c1;
  --color-midnight-dreams-500: #678ba6;
  --color-midnight-dreams-600: #4e718a;
  --color-midnight-dreams-700: #3a5a71;
  --color-midnight-dreams-800: #2b475b;
  --color-midnight-dreams-900: #1f3748;
  --color-midnight-dreams-950: #002339;
  --color-midnight-edition: #08121f;
  --color-midnight-edition-50: #eff6ff;
  --color-midnight-edition-100: #e3ecf8;
  --color-midnight-edition-200: #ced9e7;
  --color-midnight-edition-300: #b6c2d2;
  --color-midnight-edition-400: #95a3b4;
  --color-midnight-edition-500: #778496;
  --color-midnight-edition-600: #5b6777;
  --color-midnight-edition-700: #434e5c;
  --color-midnight-edition-800: #303944;
  --color-midnight-edition-900: #202730;
  --color-midnight-edition-950: #08121f;
}