Storm Is Coming to Oldies but Goldies Color Palette

About this palette

Storm Is Coming to Oldies but Goldies is a 5-color warm, earthy, vintage palette: #40365C (Storm Is Coming), #60565F (Fedora), #84755E (Handmade), #AA9556 (Gremlin), #D2B643 (Oldies but Goldies). It mixes purple, gray, yellow tones and feels warm overall. The strongest text pairing is #40365C on #D2B643 with a contrast ratio of 5.53:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Storm Is Coming	rgb(64, 54, 92)	hsl(256, 26%, 29%)
Fedora	rgb(96, 86, 95)	hsl(306, 5%, 36%)
Handmade	rgb(132, 117, 94)	hsl(36, 17%, 44%)
Gremlin	rgb(170, 149, 86)	hsl(45, 33%, 50%)
Oldies but Goldies	rgb(210, 182, 67)	hsl(48, 61%, 54%)

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.

Aa5.53:1 Good#40365C on #D2B643
Aa5.53:1 Good#D2B643 on #40365C
Aa3.76:1 Poor#40365C on #AA9556
Aa3.76:1 Poor#AA9556 on #40365C
Aa3.51:1 Poor#60565F on #D2B643
Aa3.51:1 Poor#D2B643 on #60565F

Color blindness preview

CSS variables

/* Storm Is Coming to Oldies but Goldies — https://swatchly.xyz/palette/40365c-60565f-84755e-aa9556-d2b643 */
:root {
  --storm-is-coming: #40365c;
  --fedora: #60565f;
  --handmade: #84755e;
  --gremlin: #aa9556;
  --oldies-but-goldies: #d2b643;
}

Tailwind CSS v4

/* Storm Is Coming to Oldies but Goldies — https://swatchly.xyz/palette/40365c-60565f-84755e-aa9556-d2b643 */
@theme {
  --color-storm-is-coming: #40365c;
  --color-storm-is-coming-50: #f6f3ff;
  --color-storm-is-coming-100: #ece7ff;
  --color-storm-is-coming-200: #d9d2f5;
  --color-storm-is-coming-300: #c2b9e1;
  --color-storm-is-coming-400: #a298c3;
  --color-storm-is-coming-500: #867ca7;
  --color-storm-is-coming-600: #6b6189;
  --color-storm-is-coming-700: #534a6e;
  --color-storm-is-coming-800: #40365c;
  --color-storm-is-coming-900: #312a44;
  --color-storm-is-coming-950: #1d192b;
  --color-fedora: #60565f;
  --color-fedora-50: #f9f3f9;
  --color-fedora-100: #f0e8ef;
  --color-fedora-200: #ded5dd;
  --color-fedora-300: #c9bfc8;
  --color-fedora-400: #aba0aa;
  --color-fedora-500: #90858f;
  --color-fedora-600: #766c75;
  --color-fedora-700: #60565f;
  --color-fedora-800: #4b434a;
  --color-fedora-900: #3a3339;
  --color-fedora-950: #241f24;
  --color-handmade: #84755e;
  --color-handmade-50: #fdf4e6;
  --color-handmade-100: #f6ecdd;
  --color-handmade-200: #e6dac8;
  --color-handmade-300: #d3c5b1;
  --color-handmade-400: #b6a891;
  --color-handmade-500: #9d8e76;
  --color-handmade-600: #84755e;
  --color-handmade-700: #6a5c47;
  --color-handmade-800: #544735;
  --color-handmade-900: #403626;
  --color-handmade-950: #292116;
  --color-gremlin: #aa9556;
  --color-gremlin-50: #fdf1cc;
  --color-gremlin-100: #f3e5bb;
  --color-gremlin-200: #e0cf9d;
  --color-gremlin-300: #c9b67e;
  --color-gremlin-400: #aa9556;
  --color-gremlin-500: #907c3d;
  --color-gremlin-600: #776325;
  --color-gremlin-700: #604e14;
  --color-gremlin-800: #4d3d07;
  --color-gremlin-900: #3d3001;
  --color-gremlin-950: #281e00;
  --color-oldies-but-goldies: #d2b643;
  --color-oldies-but-goldies-50: #fff1b9;
  --color-oldies-but-goldies-100: #f7e5a0;
  --color-oldies-but-goldies-200: #e5cf7c;
  --color-oldies-but-goldies-300: #d2b643;
  --color-oldies-but-goldies-400: #b39821;
  --color-oldies-but-goldies-500: #977e00;
  --color-oldies-but-goldies-600: #7a6600;
  --color-oldies-but-goldies-700: #625100;
  --color-oldies-but-goldies-800: #4e4000;
  --color-oldies-but-goldies-900: #3d3200;
  --color-oldies-but-goldies-950: #271f00;
}