Stormy Horizon to Heavy Brown Color Palette

About this palette

Stormy Horizon to Heavy Brown is a 5-color muted, cool palette: #797693 (Stormy Horizon), #1F3F54 (Capital Blue), #AEB7A2 (Salvia), #B5D3EE (Frost Fairy), #746251 (Heavy Brown). It mixes purple, blue, gray tones and feels cool overall. The strongest text pairing is #1F3F54 on #B5D3EE with a contrast ratio of 7.12:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stormy Horizon	rgb(121, 118, 147)	hsl(246, 12%, 52%)
Capital Blue	rgb(31, 63, 84)	hsl(204, 46%, 23%)
Salvia	rgb(174, 183, 162)	hsl(86, 13%, 68%)
Frost Fairy	rgb(181, 211, 238)	hsl(208, 63%, 82%)
Heavy Brown	rgb(116, 98, 81)	hsl(29, 18%, 39%)

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.12:1 Very good#1F3F54 on #B5D3EE
Aa7.12:1 Very good#B5D3EE on #1F3F54
Aa5.32:1 Good#1F3F54 on #AEB7A2
Aa5.32:1 Good#AEB7A2 on #1F3F54
Aa3.75:1 Poor#B5D3EE on #746251
Aa3.75:1 Poor#746251 on #B5D3EE

Color blindness preview

CSS variables

/* Stormy Horizon to Heavy Brown — https://swatchly.xyz/palette/797693-1f3f54-aeb7a2-b5d3ee-746251 */
:root {
  --stormy-horizon: #797693;
  --capital-blue: #1f3f54;
  --salvia: #aeb7a2;
  --frost-fairy: #b5d3ee;
  --heavy-brown: #746251;
}

Tailwind CSS v4

/* Stormy Horizon to Heavy Brown — https://swatchly.xyz/palette/797693-1f3f54-aeb7a2-b5d3ee-746251 */
@theme {
  --color-stormy-horizon: #797693;
  --color-stormy-horizon-50: #f2f1ff;
  --color-stormy-horizon-100: #e6e4f9;
  --color-stormy-horizon-200: #d0cee7;
  --color-stormy-horizon-300: #b7b5d0;
  --color-stormy-horizon-400: #9693b1;
  --color-stormy-horizon-500: #797693;
  --color-stormy-horizon-600: #615e79;
  --color-stormy-horizon-700: #4d4a62;
  --color-stormy-horizon-800: #3c3a4f;
  --color-stormy-horizon-900: #2f2d3e;
  --color-stormy-horizon-950: #1d1c29;
  --color-capital-blue: #1f3f54;
  --color-capital-blue-50: #ecf7ff;
  --color-capital-blue-100: #d8efff;
  --color-capital-blue-200: #c1dcef;
  --color-capital-blue-300: #a6c4da;
  --color-capital-blue-400: #82a4bc;
  --color-capital-blue-500: #65879f;
  --color-capital-blue-600: #4b6b81;
  --color-capital-blue-700: #365367;
  --color-capital-blue-800: #1f3f54;
  --color-capital-blue-900: #1b303e;
  --color-capital-blue-950: #0e1d27;
  --color-salvia: #aeb7a2;
  --color-salvia-50: #ebf0e3;
  --color-salvia-100: #dee4d6;
  --color-salvia-200: #c7cfbe;
  --color-salvia-300: #aeb7a2;
  --color-salvia-400: #929a86;
  --color-salvia-500: #79816d;
  --color-salvia-600: #616956;
  --color-salvia-700: #4d5444;
  --color-salvia-800: #3d4334;
  --color-salvia-900: #303528;
  --color-salvia-950: #1d2118;
  --color-frost-fairy: #b5d3ee;
  --color-frost-fairy-50: #e3f1ff;
  --color-frost-fairy-100: #d3e7f9;
  --color-frost-fairy-200: #b5d3ee;
  --color-frost-fairy-300: #a4bdd5;
  --color-frost-fairy-400: #84a0b9;
  --color-frost-fairy-500: #6a869f;
  --color-frost-fairy-600: #526c84;
  --color-frost-fairy-700: #3f576c;
  --color-frost-fairy-800: #304557;
  --color-frost-fairy-900: #233545;
  --color-frost-fairy-950: #14212c;
  --color-heavy-brown: #746251;
  --color-heavy-brown-50: #fff3e8;
  --color-heavy-brown-100: #f5e7db;
  --color-heavy-brown-200: #e2d2c4;
  --color-heavy-brown-300: #ccbaaa;
  --color-heavy-brown-400: #ac9988;
  --color-heavy-brown-500: #907d6b;
  --color-heavy-brown-600: #746251;
  --color-heavy-brown-700: #5d4d3e;
  --color-heavy-brown-800: #493c2f;
  --color-heavy-brown-900: #392e23;
  --color-heavy-brown-950: #241c14;
}