Stormy Horizon to Graphite color palette

7A7B9CStormy Horizon C2BCA4Forgotten Tusk 4A4A62Nightly Walk F7F3DFPainter’s Canvas 383A29Graphite

About this palette

Stormy Horizon to Graphite is a 5-color muted palette: #7A7B9C (Stormy Horizon), #C2BCA4 (Forgotten Tusk), #4A4A62 (Nightly Walk), #F7F3DF (Painter’s Canvas), #383A29 (Graphite). It mixes purple, gray, white tones and feels cool overall. The strongest text pairing is #F7F3DF on #383A29 with a contrast ratio of 10.44:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stormy Horizon	rgb(122, 123, 156)	hsl(238, 15%, 55%)
Forgotten Tusk	rgb(194, 188, 164)	hsl(48, 20%, 70%)
Nightly Walk	rgb(74, 74, 98)	hsl(240, 14%, 34%)
Painter’s Canvas	rgb(247, 243, 223)	hsl(50, 60%, 92%)
Graphite	rgb(56, 58, 41)	hsl(67, 17%, 19%)

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.

Aa10.44:1 Very good#F7F3DF on #383A29
Aa10.44:1 Very good#383A29 on #F7F3DF
Aa7.70:1 Very good#4A4A62 on #F7F3DF
Aa7.70:1 Very good#F7F3DF on #4A4A62
Aa6.11:1 Good#C2BCA4 on #383A29
Aa6.11:1 Good#383A29 on #C2BCA4
Aa4.50:1 Good#C2BCA4 on #4A4A62
Aa4.50:1 Good#4A4A62 on #C2BCA4

Color blindness preview

CSS variables

/* Stormy Horizon to Graphite — https://swatchly.xyz/palette/7a7b9c-c2bca4-4a4a62-f7f3df-383a29 */
:root {
  --stormy-horizon: #7a7b9c;
  --forgotten-tusk: #c2bca4;
  --nightly-walk: #4a4a62;
  --painter-s-canvas: #f7f3df;
  --graphite: #383a29;
}

Tailwind CSS v4

/* Stormy Horizon to Graphite — https://swatchly.xyz/palette/7a7b9c-c2bca4-4a4a62-f7f3df-383a29 */
@theme {
  --color-stormy-horizon: #7a7b9c;
  --color-stormy-horizon-50: #f2f2ff;
  --color-stormy-horizon-100: #e5e6fe;
  --color-stormy-horizon-200: #cfd1ec;
  --color-stormy-horizon-300: #b7b8d8;
  --color-stormy-horizon-400: #9697b9;
  --color-stormy-horizon-500: #7a7b9c;
  --color-stormy-horizon-600: #626281;
  --color-stormy-horizon-700: #4d4d69;
  --color-stormy-horizon-800: #3c3c54;
  --color-stormy-horizon-900: #2e2e43;
  --color-stormy-horizon-950: #1c1d2b;
  --color-forgotten-tusk: #c2bca4;
  --color-forgotten-tusk-50: #f6f3e4;
  --color-forgotten-tusk-100: #ece8d8;
  --color-forgotten-tusk-200: #d8d3c1;
  --color-forgotten-tusk-300: #c2bca4;
  --color-forgotten-tusk-400: #a39e87;
  --color-forgotten-tusk-500: #89836d;
  --color-forgotten-tusk-600: #6f6a54;
  --color-forgotten-tusk-700: #595440;
  --color-forgotten-tusk-800: #464231;
  --color-forgotten-tusk-900: #373324;
  --color-forgotten-tusk-950: #221f15;
  --color-nightly-walk: #4a4a62;
  --color-nightly-walk-50: #f4f4ff;
  --color-nightly-walk-100: #e9e9fc;
  --color-nightly-walk-200: #d3d4e9;
  --color-nightly-walk-300: #bbbbd4;
  --color-nightly-walk-400: #999ab4;
  --color-nightly-walk-500: #7d7d97;
  --color-nightly-walk-600: #61627a;
  --color-nightly-walk-700: #4a4a62;
  --color-nightly-walk-800: #39394c;
  --color-nightly-walk-900: #2c2c3b;
  --color-nightly-walk-950: #1a1a25;
  --color-painter-s-canvas: #f7f3df;
  --color-painter-s-canvas-50: #f7f3df;
  --color-painter-s-canvas-100: #ece9dd;
  --color-painter-s-canvas-200: #d9d6c7;
  --color-painter-s-canvas-300: #c3c0b0;
  --color-painter-s-canvas-400: #a5a18f;
  --color-painter-s-canvas-500: #8a8674;
  --color-painter-s-canvas-600: #706c5b;
  --color-painter-s-canvas-700: #595646;
  --color-painter-s-canvas-800: #454335;
  --color-painter-s-canvas-900: #353328;
  --color-painter-s-canvas-950: #211f17;
  --color-graphite: #383a29;
  --color-graphite-50: #f5f6eb;
  --color-graphite-100: #ebede0;
  --color-graphite-200: #d7d9ca;
  --color-graphite-300: #c0c3b1;
  --color-graphite-400: #a2a592;
  --color-graphite-500: #888a77;
  --color-graphite-600: #6e715e;
  --color-graphite-700: #595b4a;
  --color-graphite-800: #47493a;
  --color-graphite-900: #383a29;
  --color-graphite-950: #23241b;
}