Storm Is Coming to Tuscan Color Palette

About this palette

Storm Is Coming to Tuscan is a 5-color cool, earthy palette: #3B376A (Storm Is Coming), #5843B0 (Royal Nightcore), #77924F (Bavarian Green), #DF9533 (Lion King), #FFD5AA (Tuscan). It mixes purple, green, orange tones and feels cool overall. The strongest text pairing is #3B376A on #FFD5AA with a contrast ratio of 7.91:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Storm Is Coming	rgb(59, 55, 106)	hsl(245, 32%, 32%)
Royal Nightcore	rgb(88, 67, 176)	hsl(252, 45%, 48%)
Bavarian Green	rgb(119, 146, 79)	hsl(84, 30%, 44%)
Lion King	rgb(223, 149, 51)	hsl(34, 73%, 54%)
Tuscan	rgb(255, 213, 170)	hsl(30, 100%, 83%)

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.91:1 Very good#3B376A on #FFD5AA
Aa7.91:1 Very good#FFD5AA on #3B376A
Aa5.40:1 Good#5843B0 on #FFD5AA
Aa5.40:1 Good#FFD5AA on #5843B0
Aa4.37:1 Poor#3B376A on #DF9533
Aa4.37:1 Poor#DF9533 on #3B376A
Aa3.10:1 Poor#3B376A on #77924F
Aa3.10:1 Poor#77924F on #3B376A

Color blindness preview

CSS variables

/* Storm Is Coming to Tuscan — https://swatchly.xyz/palette/3b376a-5843b0-77924f-df9533-ffd5aa */
:root {
  --storm-is-coming: #3b376a;
  --royal-nightcore: #5843b0;
  --bavarian-green: #77924f;
  --lion-king: #df9533;
  --tuscan: #ffd5aa;
}

Tailwind CSS v4

/* Storm Is Coming to Tuscan — https://swatchly.xyz/palette/3b376a-5843b0-77924f-df9533-ffd5aa */
@theme {
  --color-storm-is-coming: #3b376a;
  --color-storm-is-coming-50: #f4f4ff;
  --color-storm-is-coming-100: #e8e9ff;
  --color-storm-is-coming-200: #d2d3ff;
  --color-storm-is-coming-300: #bbbaef;
  --color-storm-is-coming-400: #9a99d2;
  --color-storm-is-coming-500: #7f7db6;
  --color-storm-is-coming-600: #646298;
  --color-storm-is-coming-700: #4e4c7c;
  --color-storm-is-coming-800: #3b376a;
  --color-storm-is-coming-900: #2d2b4e;
  --color-storm-is-coming-950: #1b1a32;
  --color-royal-nightcore: #5843b0;
  --color-royal-nightcore-50: #f4f4ff;
  --color-royal-nightcore-100: #e9e9ff;
  --color-royal-nightcore-200: #d5d3ff;
  --color-royal-nightcore-300: #bebaff;
  --color-royal-nightcore-400: #9f93ff;
  --color-royal-nightcore-500: #8576e7;
  --color-royal-nightcore-600: #6d5bc9;
  --color-royal-nightcore-700: #5843b0;
  --color-royal-nightcore-800: #45338d;
  --color-royal-nightcore-900: #352572;
  --color-royal-nightcore-950: #21144d;
  --color-bavarian-green: #77924f;
  --color-bavarian-green-50: #ebfdd6;
  --color-bavarian-green-100: #e1f4c9;
  --color-bavarian-green-200: #cbe1ae;
  --color-bavarian-green-300: #b3cc91;
  --color-bavarian-green-400: #92ad6c;
  --color-bavarian-green-500: #77924f;
  --color-bavarian-green-600: #5d7735;
  --color-bavarian-green-700: #485f22;
  --color-bavarian-green-800: #374a14;
  --color-bavarian-green-900: #293a0a;
  --color-bavarian-green-950: #182403;
  --color-lion-king: #df9533;
  --color-lion-king-50: #fff5eb;
  --color-lion-king-100: #ffead4;
  --color-lion-king-200: #ffd2a1;
  --color-lion-king-300: #f7b86e;
  --color-lion-king-400: #df9533;
  --color-lion-king-500: #c07800;
  --color-lion-king-600: #9b6000;
  --color-lion-king-700: #7b4c00;
  --color-lion-king-800: #603a00;
  --color-lion-king-900: #4a2c00;
  --color-lion-king-950: #2f1a00;
  --color-tuscan: #ffd5aa;
  --color-tuscan-50: #fff8f1;
  --color-tuscan-100: #ffeddb;
  --color-tuscan-200: #ffd5aa;
  --color-tuscan-300: #e1bf9c;
  --color-tuscan-400: #c39d76;
  --color-tuscan-500: #a78158;
  --color-tuscan-600: #8a653e;
  --color-tuscan-700: #6f4e2a;
  --color-tuscan-800: #583c1b;
  --color-tuscan-900: #452d11;
  --color-tuscan-950: #2c1b07;
}