Stormy Horizon to Catnip color palette

7079A7Stormy Horizon 464D67Into the Stratosphere 312D1DGo to Hell Black EBC7DETussie-Mussie 87AC98Catnip

Open in generator Export PNG, PDF, ASE…

About this palette

Stormy Horizon to Catnip is a 5-color muted, cool palette: #7079A7 (Stormy Horizon), #464D67 (Into the Stratosphere), #312D1D (Go to Hell Black), #EBC7DE (Tussie-Mussie), #87AC98 (Catnip). It mixes purple, blue, gray, pink, green tones and feels cool overall. The strongest text pairing is #312D1D on #EBC7DE 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
Stormy Horizon	rgb(112, 121, 167)	hsl(230, 24%, 55%)
Into the Stratosphere	rgb(70, 77, 103)	hsl(227, 19%, 34%)
Go to Hell Black	rgb(49, 45, 29)	hsl(48, 26%, 15%)
Tussie-Mussie	rgb(235, 199, 222)	hsl(322, 47%, 85%)
Catnip	rgb(135, 172, 152)	hsl(148, 18%, 60%)

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#312D1D on #EBC7DE
Aa9.03:1 Very good#EBC7DE on #312D1D
Aa5.50:1 Good#312D1D on #87AC98
Aa5.50:1 Good#87AC98 on #312D1D
Aa5.46:1 Good#464D67 on #EBC7DE
Aa5.46:1 Good#EBC7DE on #464D67
Aa3.33:1 Poor#464D67 on #87AC98
Aa3.33:1 Poor#87AC98 on #464D67

Color blindness preview

CSS variables

/* Stormy Horizon to Catnip — https://swatchly.xyz/palette/7079a7-464d67-312d1d-ebc7de-87ac98 */
:root {
  --stormy-horizon: #7079a7;
  --into-the-stratosphere: #464d67;
  --go-to-hell-black: #312d1d;
  --tussie-mussie: #ebc7de;
  --catnip: #87ac98;
}

Tailwind CSS v4

/* Stormy Horizon to Catnip — https://swatchly.xyz/palette/7079a7-464d67-312d1d-ebc7de-87ac98 */
@theme {
  --color-stormy-horizon: #7079a7;
  --color-stormy-horizon-50: #f0f3ff;
  --color-stormy-horizon-100: #e1e6ff;
  --color-stormy-horizon-200: #c7d0f7;
  --color-stormy-horizon-300: #aeb7e3;
  --color-stormy-horizon-400: #8c96c5;
  --color-stormy-horizon-500: #7079a7;
  --color-stormy-horizon-600: #59618b;
  --color-stormy-horizon-700: #454c73;
  --color-stormy-horizon-800: #353b5d;
  --color-stormy-horizon-900: #292e4a;
  --color-stormy-horizon-950: #191c31;
  --color-into-the-stratosphere: #464d67;
  --color-into-the-stratosphere-50: #f2f5ff;
  --color-into-the-stratosphere-100: #e5eafe;
  --color-into-the-stratosphere-200: #ced5ed;
  --color-into-the-stratosphere-300: #b6bdd8;
  --color-into-the-stratosphere-400: #949cb9;
  --color-into-the-stratosphere-500: #78809c;
  --color-into-the-stratosphere-600: #5d657f;
  --color-into-the-stratosphere-700: #464d67;
  --color-into-the-stratosphere-800: #363c50;
  --color-into-the-stratosphere-900: #292e3f;
  --color-into-the-stratosphere-950: #181c28;
  --color-go-to-hell-black: #312d1d;
  --color-go-to-hell-black-50: #f8f5ea;
  --color-go-to-hell-black-100: #eeebdf;
  --color-go-to-hell-black-200: #dbd8c9;
  --color-go-to-hell-black-300: #c5c1b0;
  --color-go-to-hell-black-400: #a5a18e;
  --color-go-to-hell-black-500: #898472;
  --color-go-to-hell-black-600: #6d6957;
  --color-go-to-hell-black-700: #555142;
  --color-go-to-hell-black-800: #413d30;
  --color-go-to-hell-black-900: #312d1d;
  --color-go-to-hell-black-950: #1d1b13;
  --color-tussie-mussie: #ebc7de;
  --color-tussie-mussie-50: #ffecf8;
  --color-tussie-mussie-100: #f7e0ef;
  --color-tussie-mussie-200: #ebc7de;
  --color-tussie-mussie-300: #d2b3c7;
  --color-tussie-mussie-400: #b493a9;
  --color-tussie-mussie-500: #9a798e;
  --color-tussie-mussie-600: #7e6074;
  --color-tussie-mussie-700: #674b5d;
  --color-tussie-mussie-800: #523a4a;
  --color-tussie-mussie-900: #402b39;
  --color-tussie-mussie-950: #291a24;
  --color-catnip: #87ac98;
  --color-catnip-50: #e6fbef;
  --color-catnip-100: #daf2e5;
  --color-catnip-200: #c4e0d0;
  --color-catnip-300: #aacab9;
  --color-catnip-400: #87ac98;
  --color-catnip-500: #6c907d;
  --color-catnip-600: #537563;
  --color-catnip-700: #3e5e4d;
  --color-catnip-800: #2e4a3b;
  --color-catnip-900: #21392d;
  --color-catnip-950: #12231b;
}