Start generating

Storm Is Coming to Vanilla Blush color palette

393A63Storm Is Coming715D00Coffee AdeptBB726BMoroccoC29600Rapeseed2ADAFFNeon BlueFFEBE2Vanilla Blush
Open in generator Export PNG, PDF, ASE…

About this palette

Storm Is Coming to Vanilla Blush is a 6-color vintage palette: #393A63 (Storm Is Coming), #715D00 (Coffee Adept), #BB726B (Morocco), #C29600 (Rapeseed), #2ADAFF (Neon Blue), #FFEBE2 (Vanilla Blush). It mixes purple, brown, red, yellow, blue, white tones and feels warm overall. The strongest text pairing is #393A63 on #FFEBE2 with a contrast ratio of 9.31:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Storm Is Comingrgb(57, 58, 99)hsl(239, 27%, 31%)
Coffee Adeptrgb(113, 93, 0)hsl(49, 100%, 22%)
Moroccorgb(187, 114, 107)hsl(5, 37%, 58%)
Rapeseedrgb(194, 150, 0)hsl(46, 100%, 38%)
Neon Bluergb(42, 218, 255)hsl(190, 100%, 58%)
Vanilla Blushrgb(255, 235, 226)hsl(19, 100%, 94%)

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.31:1 Very good#393A63 on #FFEBE2
  • Aa9.31:1 Very good#FFEBE2 on #393A63
  • Aa6.42:1 Good#393A63 on #2ADAFF
  • Aa6.42:1 Good#2ADAFF on #393A63
  • Aa5.58:1 Good#715D00 on #FFEBE2
  • Aa5.58:1 Good#FFEBE2 on #715D00
  • Aa3.91:1 Poor#393A63 on #C29600
  • Aa3.91:1 Poor#C29600 on #393A63

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Storm Is Coming to Vanilla Blush — https://swatchly.xyz/palette/393a63-715d00-bb726b-c29600-2adaff-ffebe2 */
:root {
  --storm-is-coming: #393a63;
  --coffee-adept: #715d00;
  --morocco: #bb726b;
  --rapeseed: #c29600;
  --neon-blue: #2adaff;
  --vanilla-blush: #ffebe2;
}

Tailwind CSS v4

/* Storm Is Coming to Vanilla Blush — https://swatchly.xyz/palette/393a63-715d00-bb726b-c29600-2adaff-ffebe2 */
@theme {
  --color-storm-is-coming: #393a63;
  --color-storm-is-coming-50: #f3f4ff;
  --color-storm-is-coming-100: #e7e9ff;
  --color-storm-is-coming-200: #d1d4fa;
  --color-storm-is-coming-300: #b9bce7;
  --color-storm-is-coming-400: #989cca;
  --color-storm-is-coming-500: #7d80ae;
  --color-storm-is-coming-600: #626590;
  --color-storm-is-coming-700: #4c4e75;
  --color-storm-is-coming-800: #393a63;
  --color-storm-is-coming-900: #2c2d49;
  --color-storm-is-coming-950: #1a1b2f;
  --color-coffee-adept: #715d00;
  --color-coffee-adept-50: #fff5d3;
  --color-coffee-adept-100: #f8ebbd;
  --color-coffee-adept-200: #e9d9a3;
  --color-coffee-adept-300: #d6c486;
  --color-coffee-adept-400: #baa65f;
  --color-coffee-adept-500: #a08c40;
  --color-coffee-adept-600: #877324;
  --color-coffee-adept-700: #715d00;
  --color-coffee-adept-800: #594900;
  --color-coffee-adept-900: #453700;
  --color-coffee-adept-950: #2c2200;
  --color-morocco: #bb726b;
  --color-morocco-50: #fff2f1;
  --color-morocco-100: #ffe5e2;
  --color-morocco-200: #ffcac4;
  --color-morocco-300: #f2b0a8;
  --color-morocco-400: #d68e87;
  --color-morocco-500: #bb726b;
  --color-morocco-600: #9d5851;
  --color-morocco-700: #81423d;
  --color-morocco-800: #68312d;
  --color-morocco-900: #522420;
  --color-morocco-950: #351412;
  --color-rapeseed: #c29600;
  --color-rapeseed-50: #fff3d5;
  --color-rapeseed-100: #ffe6ad;
  --color-rapeseed-200: #f2d07f;
  --color-rapeseed-300: #dfb856;
  --color-rapeseed-400: #c29600;
  --color-rapeseed-500: #a27d00;
  --color-rapeseed-600: #836400;
  --color-rapeseed-700: #684f00;
  --color-rapeseed-800: #523e00;
  --color-rapeseed-900: #403000;
  --color-rapeseed-950: #291d00;
  --color-neon-blue: #2adaff;
  --color-neon-blue-50: #eafaff;
  --color-neon-blue-100: #d1f5ff;
  --color-neon-blue-200: #98e9ff;
  --color-neon-blue-300: #2adaff;
  --color-neon-blue-400: #00b7d8;
  --color-neon-blue-500: #0098b4;
  --color-neon-blue-600: #007a91;
  --color-neon-blue-700: #006173;
  --color-neon-blue-800: #004b5a;
  --color-neon-blue-900: #003a46;
  --color-neon-blue-950: #00242c;
  --color-vanilla-blush: #ffebe2;
  --color-vanilla-blush-50: #fff7f3;
  --color-vanilla-blush-100: #ffebe2;
  --color-vanilla-blush-200: #e6d8d1;
  --color-vanilla-blush-300: #d0c0b9;
  --color-vanilla-blush-400: #b19f97;
  --color-vanilla-blush-500: #95837b;
  --color-vanilla-blush-600: #796861;
  --color-vanilla-blush-700: #61524b;
  --color-vanilla-blush-800: #4c3f39;
  --color-vanilla-blush-900: #3b302b;
  --color-vanilla-blush-950: #251d1a;
}

Similar palettes