Haunt Mist to Eclipse Elixir Color Palette

About this palette

Haunt Mist to Eclipse Elixir is a 4-color muted, cool, monochromatic palette: #546D9A (Haunt Mist), #88A0DB (Azureno), #F1F5FF (Cotton Ball), #1B2339 (Eclipse Elixir). It mixes blue, white tones and feels cool overall. The strongest text pairing is #F1F5FF on #1B2339 with a contrast ratio of 14.30:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haunt Mist	rgb(84, 109, 154)	hsl(219, 29%, 47%)
Azureno	rgb(136, 160, 219)	hsl(223, 54%, 70%)
Cotton Ball	rgb(241, 245, 255)	hsl(223, 100%, 97%)
Eclipse Elixir	rgb(27, 35, 57)	hsl(224, 36%, 16%)

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.

Aa14.30:1 Super#F1F5FF on #1B2339
Aa14.30:1 Super#1B2339 on #F1F5FF
Aa6.02:1 Good#88A0DB on #1B2339
Aa6.02:1 Good#1B2339 on #88A0DB
Aa4.77:1 Good#546D9A on #F1F5FF
Aa4.77:1 Good#F1F5FF on #546D9A

Color blindness preview

CSS variables

/* Haunt Mist to Eclipse Elixir — https://swatchly.xyz/palette/546d9a-88a0db-f1f5ff-1b2339 */
:root {
  --haunt-mist: #546d9a;
  --azureno: #88a0db;
  --cotton-ball: #f1f5ff;
  --eclipse-elixir: #1b2339;
}

Tailwind CSS v4

/* Haunt Mist to Eclipse Elixir — https://swatchly.xyz/palette/546d9a-88a0db-f1f5ff-1b2339 */
@theme {
  --color-haunt-mist: #546d9a;
  --color-haunt-mist-50: #f0f5ff;
  --color-haunt-mist-100: #e1ecff;
  --color-haunt-mist-200: #c4d9fe;
  --color-haunt-mist-300: #aac2ed;
  --color-haunt-mist-400: #89a3d1;
  --color-haunt-mist-500: #6d88b6;
  --color-haunt-mist-600: #546d9a;
  --color-haunt-mist-700: #40567e;
  --color-haunt-mist-800: #2f4366;
  --color-haunt-mist-900: #233351;
  --color-haunt-mist-950: #141f35;
  --color-azureno: #88a0db;
  --color-azureno-50: #f1f5ff;
  --color-azureno-100: #e3ebff;
  --color-azureno-200: #c6d7ff;
  --color-azureno-300: #aac0f4;
  --color-azureno-400: #88a0db;
  --color-azureno-500: #6e84bd;
  --color-azureno-600: #546aa0;
  --color-azureno-700: #405384;
  --color-azureno-800: #30406b;
  --color-azureno-900: #233155;
  --color-azureno-950: #141e38;
  --color-cotton-ball: #f1f5ff;
  --color-cotton-ball-50: #f1f5ff;
  --color-cotton-ball-100: #e9ebf1;
  --color-cotton-ball-200: #d4d7df;
  --color-cotton-ball-300: #bdc1c9;
  --color-cotton-ball-400: #9ea1aa;
  --color-cotton-ball-500: #82868f;
  --color-cotton-ball-600: #686c74;
  --color-cotton-ball-700: #52555d;
  --color-cotton-ball-800: #404249;
  --color-cotton-ball-900: #313338;
  --color-cotton-ball-950: #1e1f23;
  --color-eclipse-elixir: #1b2339;
  --color-eclipse-elixir-50: #f1f5ff;
  --color-eclipse-elixir-100: #e3ebfe;
  --color-eclipse-elixir-200: #ced7ed;
  --color-eclipse-elixir-300: #b7c1da;
  --color-eclipse-elixir-400: #96a1bc;
  --color-eclipse-elixir-500: #7c87a2;
  --color-eclipse-elixir-600: #636d87;
  --color-eclipse-elixir-700: #4e586f;
  --color-eclipse-elixir-800: #3d455a;
  --color-eclipse-elixir-900: #303749;
  --color-eclipse-elixir-950: #1b2339;
}