Midnight Masquerade to Stormy Horizon color palette

2A2B48Midnight Masquerade AFDCC7Quiet Jade 5DB197Water Park 64402BGrilled 7079A0Stormy Horizon

About this palette

Midnight Masquerade to Stormy Horizon is a 5-color cool palette: #2A2B48 (Midnight Masquerade), #AFDCC7 (Quiet Jade), #5DB197 (Water Park), #64402B (Grilled), #7079A0 (Stormy Horizon). It mixes purple, turquoise, brown, blue tones and feels cool overall. The strongest text pairing is #2A2B48 on #AFDCC7 with a contrast ratio of 9.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Masquerade	rgb(42, 43, 72)	hsl(238, 26%, 22%)
Quiet Jade	rgb(175, 220, 199)	hsl(152, 39%, 77%)
Water Park	rgb(93, 177, 151)	hsl(161, 35%, 53%)
Grilled	rgb(100, 64, 43)	hsl(22, 40%, 28%)
Stormy Horizon	rgb(112, 121, 160)	hsl(229, 20%, 53%)

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.03:1 Very good#2A2B48 on #AFDCC7
Aa9.03:1 Very good#AFDCC7 on #2A2B48
Aa6.01:1 Good#AFDCC7 on #64402B
Aa6.01:1 Good#64402B on #AFDCC7
Aa5.33:1 Good#2A2B48 on #5DB197
Aa5.33:1 Good#5DB197 on #2A2B48
Aa3.55:1 Poor#5DB197 on #64402B
Aa3.55:1 Poor#64402B on #5DB197

Color blindness preview

CSS variables

/* Midnight Masquerade to Stormy Horizon — https://swatchly.xyz/palette/2a2b48-afdcc7-5db197-64402b-7079a0 */
:root {
  --midnight-masquerade: #2a2b48;
  --quiet-jade: #afdcc7;
  --water-park: #5db197;
  --grilled: #64402b;
  --stormy-horizon: #7079a0;
}

Tailwind CSS v4

/* Midnight Masquerade to Stormy Horizon — https://swatchly.xyz/palette/2a2b48-afdcc7-5db197-64402b-7079a0 */
@theme {
  --color-midnight-masquerade: #2a2b48;
  --color-midnight-masquerade-50: #f3f4ff;
  --color-midnight-masquerade-100: #e7e9ff;
  --color-midnight-masquerade-200: #d2d5f1;
  --color-midnight-masquerade-300: #bbbede;
  --color-midnight-masquerade-400: #9b9dc0;
  --color-midnight-masquerade-500: #7f81a4;
  --color-midnight-masquerade-600: #646687;
  --color-midnight-masquerade-700: #4d4f6c;
  --color-midnight-masquerade-800: #3a3c55;
  --color-midnight-masquerade-900: #2a2b48;
  --color-midnight-masquerade-950: #191a29;
  --color-quiet-jade: #afdcc7;
  --color-quiet-jade-50: #ddf7eb;
  --color-quiet-jade-100: #cfeddf;
  --color-quiet-jade-200: #afdcc7;
  --color-quiet-jade-300: #9ec5b3;
  --color-quiet-jade-400: #7ea894;
  --color-quiet-jade-500: #638e7a;
  --color-quiet-jade-600: #4b7462;
  --color-quiet-jade-700: #385d4d;
  --color-quiet-jade-800: #294a3c;
  --color-quiet-jade-900: #1d3a2e;
  --color-quiet-jade-950: #10241b;
  --color-water-park: #5db197;
  --color-water-park-50: #d5fff0;
  --color-water-park-100: #c4f7e4;
  --color-water-park-200: #a7e5cf;
  --color-water-park-300: #88cfb8;
  --color-water-park-400: #5db197;
  --color-water-park-500: #40957c;
  --color-water-park-600: #237a63;
  --color-water-park-700: #09634e;
  --color-water-park-800: #004e3c;
  --color-water-park-900: #003c2e;
  --color-water-park-950: #00261c;
  --color-grilled: #64402b;
  --color-grilled-50: #fff2eb;
  --color-grilled-100: #ffe5d7;
  --color-grilled-200: #f1d0be;
  --color-grilled-300: #debaa5;
  --color-grilled-400: #c39b84;
  --color-grilled-500: #a9806a;
  --color-grilled-600: #8e6751;
  --color-grilled-700: #76523e;
  --color-grilled-800: #64402b;
  --color-grilled-900: #4d3222;
  --color-grilled-950: #321e13;
  --color-stormy-horizon: #7079a0;
  --color-stormy-horizon-50: #eff3ff;
  --color-stormy-horizon-100: #e0e6ff;
  --color-stormy-horizon-200: #c8d0f1;
  --color-stormy-horizon-300: #aeb7dd;
  --color-stormy-horizon-400: #8d96be;
  --color-stormy-horizon-500: #7079a0;
  --color-stormy-horizon-600: #596185;
  --color-stormy-horizon-700: #454c6d;
  --color-stormy-horizon-800: #353c58;
  --color-stormy-horizon-900: #292e46;
  --color-stormy-horizon-950: #191d2e;
}