Mississippi River to Tropical Forest color palette

386584Mississippi River 0E0724Mysterious Depths 1C313FBlue Whale 23114CSilent Orbit 004D4ETropical Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Mississippi River to Tropical Forest is a 5-color dark, cool palette: #386584 (Mississippi River), #0E0724 (Mysterious Depths), #1C313F (Blue Whale), #23114C (Silent Orbit), #004D4E (Tropical Forest). It mixes blue, black, purple, turquoise tones and feels cool overall. The strongest text pairing is #386584 on #0E0724 with a contrast ratio of 3.13:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mississippi River	rgb(56, 101, 132)	hsl(204, 40%, 37%)
Mysterious Depths	rgb(14, 7, 36)	hsl(254, 67%, 8%)
Blue Whale	rgb(28, 49, 63)	hsl(204, 38%, 18%)
Silent Orbit	rgb(35, 17, 76)	hsl(258, 63%, 18%)
Tropical Forest	rgb(0, 77, 78)	hsl(181, 100%, 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.

Aa3.13:1 Poor#386584 on #0E0724
Aa3.13:1 Poor#0E0724 on #386584

Color blindness preview

CSS variables

/* Mississippi River to Tropical Forest — https://swatchly.xyz/palette/386584-0e0724-1c313f-23114c-004d4e */
:root {
  --mississippi-river: #386584;
  --mysterious-depths: #0e0724;
  --blue-whale: #1c313f;
  --silent-orbit: #23114c;
  --tropical-forest: #004d4e;
}

Tailwind CSS v4

/* Mississippi River to Tropical Forest — https://swatchly.xyz/palette/386584-0e0724-1c313f-23114c-004d4e */
@theme {
  --color-mississippi-river: #386584;
  --color-mississippi-river-50: #ecf7ff;
  --color-mississippi-river-100: #d9efff;
  --color-mississippi-river-200: #bcdff9;
  --color-mississippi-river-300: #a3cbe8;
  --color-mississippi-river-400: #81adce;
  --color-mississippi-river-500: #6694b5;
  --color-mississippi-river-600: #4d7b9a;
  --color-mississippi-river-700: #386584;
  --color-mississippi-river-800: #294f69;
  --color-mississippi-river-900: #1c3d53;
  --color-mississippi-river-950: #0e2637;
  --color-mysterious-depths: #0e0724;
  --color-mysterious-depths-50: #f5f4ff;
  --color-mysterious-depths-100: #eae8ff;
  --color-mysterious-depths-200: #d6d3f3;
  --color-mysterious-depths-300: #c0bce0;
  --color-mysterious-depths-400: #a09cc3;
  --color-mysterious-depths-500: #817da3;
  --color-mysterious-depths-600: #635f83;
  --color-mysterious-depths-700: #4a4665;
  --color-mysterious-depths-800: #34314a;
  --color-mysterious-depths-900: #222032;
  --color-mysterious-depths-950: #0e0724;
  --color-blue-whale: #1c313f;
  --color-blue-whale-50: #ecf7ff;
  --color-blue-whale-100: #deeef9;
  --color-blue-whale-200: #c8dbe8;
  --color-blue-whale-300: #afc4d3;
  --color-blue-whale-400: #8da4b5;
  --color-blue-whale-500: #708899;
  --color-blue-whale-600: #566d7c;
  --color-blue-whale-700: #415563;
  --color-blue-whale-800: #30414d;
  --color-blue-whale-900: #1c313f;
  --color-blue-whale-950: #131d24;
  --color-silent-orbit: #23114c;
  --color-silent-orbit-50: #f5f4ff;
  --color-silent-orbit-100: #ebe8ff;
  --color-silent-orbit-200: #d7d1ff;
  --color-silent-orbit-300: #c0b8f6;
  --color-silent-orbit-400: #a197da;
  --color-silent-orbit-500: #877bbf;
  --color-silent-orbit-600: #6d61a2;
  --color-silent-orbit-700: #574b86;
  --color-silent-orbit-800: #443a6d;
  --color-silent-orbit-900: #352c58;
  --color-silent-orbit-950: #23114c;
  --color-tropical-forest: #004d4e;
  --color-tropical-forest-50: #dbfdfd;
  --color-tropical-forest-100: #cdf4f4;
  --color-tropical-forest-200: #b3e2e2;
  --color-tropical-forest-300: #97cdcd;
  --color-tropical-forest-400: #72aeae;
  --color-tropical-forest-500: #549393;
  --color-tropical-forest-600: #3a7878;
  --color-tropical-forest-700: #256061;
  --color-tropical-forest-800: #004d4e;
  --color-tropical-forest-900: #0c3b3b;
  --color-tropical-forest-950: #042525;
}