Midnight Masquerade to Fail Whale color palette

293246Midnight Masquerade 1F5366Juggernaut 45959BJava 7DB6BECuttlefish 9FCEE5Fail Whale

About this palette

Midnight Masquerade to Fail Whale is a 5-color muted, cool, monochromatic palette: #293246 (Midnight Masquerade), #1F5366 (Juggernaut), #45959B (Java), #7DB6BE (Cuttlefish), #9FCEE5 (Fail Whale). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #293246 on #9FCEE5 with a contrast ratio of 7.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Masquerade	rgb(41, 50, 70)	hsl(221, 26%, 22%)
Juggernaut	rgb(31, 83, 102)	hsl(196, 53%, 26%)
Java	rgb(69, 149, 155)	hsl(184, 38%, 44%)
Cuttlefish	rgb(125, 182, 190)	hsl(187, 33%, 62%)
Fail Whale	rgb(159, 206, 229)	hsl(200, 57%, 76%)

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.

Aa7.59:1 Very good#293246 on #9FCEE5
Aa7.59:1 Very good#9FCEE5 on #293246
Aa5.68:1 Good#293246 on #7DB6BE
Aa5.68:1 Good#7DB6BE on #293246
Aa5.00:1 Good#1F5366 on #9FCEE5
Aa5.00:1 Good#9FCEE5 on #1F5366
Aa3.74:1 Poor#1F5366 on #7DB6BE
Aa3.74:1 Poor#7DB6BE on #1F5366

Color blindness preview

CSS variables

/* Midnight Masquerade to Fail Whale — https://swatchly.xyz/palette/293246-1f5366-45959b-7db6be-9fcee5 */
:root {
  --midnight-masquerade: #293246;
  --juggernaut: #1f5366;
  --java: #45959b;
  --cuttlefish: #7db6be;
  --fail-whale: #9fcee5;
}

Tailwind CSS v4

/* Midnight Masquerade to Fail Whale — https://swatchly.xyz/palette/293246-1f5366-45959b-7db6be-9fcee5 */
@theme {
  --color-midnight-masquerade: #293246;
  --color-midnight-masquerade-50: #f1f5ff;
  --color-midnight-masquerade-100: #e4ebfc;
  --color-midnight-masquerade-200: #cfd8eb;
  --color-midnight-masquerade-300: #b7c1d7;
  --color-midnight-masquerade-400: #97a1b9;
  --color-midnight-masquerade-500: #7b869e;
  --color-midnight-masquerade-600: #616b82;
  --color-midnight-masquerade-700: #4c5569;
  --color-midnight-masquerade-800: #3a4253;
  --color-midnight-masquerade-900: #293246;
  --color-midnight-masquerade-950: #1a1f29;
  --color-juggernaut: #1f5366;
  --color-juggernaut-50: #e8f8ff;
  --color-juggernaut-100: #d1f1ff;
  --color-juggernaut-200: #b6ddee;
  --color-juggernaut-300: #98c5d8;
  --color-juggernaut-400: #73a5b9;
  --color-juggernaut-500: #55889c;
  --color-juggernaut-600: #3a6b7e;
  --color-juggernaut-700: #1f5366;
  --color-juggernaut-800: #1a404f;
  --color-juggernaut-900: #11323e;
  --color-juggernaut-950: #071e27;
  --color-java: #45959b;
  --color-java-50: #dcfdff;
  --color-java-100: #c7f6f9;
  --color-java-200: #abe4e8;
  --color-java-300: #8dcfd4;
  --color-java-400: #65b0b6;
  --color-java-500: #45959b;
  --color-java-600: #287a7f;
  --color-java-700: #0f6167;
  --color-java-800: #004d51;
  --color-java-900: #003b3f;
  --color-java-950: #002528;
  --color-cuttlefish: #7db6be;
  --color-cuttlefish-50: #eafcff;
  --color-cuttlefish-100: #d6f7fc;
  --color-cuttlefish-200: #bee7ec;
  --color-cuttlefish-300: #a4d3d9;
  --color-cuttlefish-400: #7db6be;
  --color-cuttlefish-500: #6098a0;
  --color-cuttlefish-600: #447c83;
  --color-cuttlefish-700: #2e6269;
  --color-cuttlefish-800: #1e4d53;
  --color-cuttlefish-900: #123b40;
  --color-cuttlefish-950: #072427;
  --color-fail-whale: #9fcee5;
  --color-fail-whale-50: #effaff;
  --color-fail-whale-100: #dbf3ff;
  --color-fail-whale-200: #c0e2f3;
  --color-fail-whale-300: #9fcee5;
  --color-fail-whale-400: #81adc2;
  --color-fail-whale-500: #6491a6;
  --color-fail-whale-600: #497589;
  --color-fail-whale-700: #345d6f;
  --color-fail-whale-800: #244858;
  --color-fail-whale-900: #193745;
  --color-fail-whale-950: #0c222c;
}