Raging Thunderstorm to Dreamscape Purple color palette

00506ARaging Thunderstorm 340F00Shadow Play E0864FTouch of Glamour B9E8A4Pastel Pea 9341C5Dreamscape Purple

Open in generator Export PNG, PDF, ASE…

About this palette

Raging Thunderstorm to Dreamscape Purple is a 5-color cool, earthy palette: #00506A (Raging Thunderstorm), #340F00 (Shadow Play), #E0864F (Touch of Glamour), #B9E8A4 (Pastel Pea), #9341C5 (Dreamscape Purple). It mixes blue, brown, orange, green, purple tones and feels cool overall. The strongest text pairing is #340F00 on #B9E8A4 with a contrast ratio of 12.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Raging Thunderstorm	rgb(0, 80, 106)	hsl(195, 100%, 21%)
Shadow Play	rgb(52, 15, 0)	hsl(17, 100%, 10%)
Touch of Glamour	rgb(224, 134, 79)	hsl(23, 70%, 59%)
Pastel Pea	rgb(185, 232, 164)	hsl(101, 60%, 78%)
Dreamscape Purple	rgb(147, 65, 197)	hsl(277, 53%, 51%)

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.

Aa12.47:1 Super#340F00 on #B9E8A4
Aa12.47:1 Super#B9E8A4 on #340F00
Aa6.43:1 Good#00506A on #B9E8A4
Aa6.43:1 Good#B9E8A4 on #00506A
Aa6.33:1 Good#340F00 on #E0864F
Aa6.33:1 Good#E0864F on #340F00
Aa3.98:1 Poor#B9E8A4 on #9341C5
Aa3.98:1 Poor#9341C5 on #B9E8A4

Color blindness preview

CSS variables

/* Raging Thunderstorm to Dreamscape Purple — https://swatchly.xyz/palette/00506a-340f00-e0864f-b9e8a4-9341c5 */
:root {
  --raging-thunderstorm: #00506a;
  --shadow-play: #340f00;
  --touch-of-glamour: #e0864f;
  --pastel-pea: #b9e8a4;
  --dreamscape-purple: #9341c5;
}

Tailwind CSS v4

/* Raging Thunderstorm to Dreamscape Purple — https://swatchly.xyz/palette/00506a-340f00-e0864f-b9e8a4-9341c5 */
@theme {
  --color-raging-thunderstorm: #00506a;
  --color-raging-thunderstorm-50: #e9f8ff;
  --color-raging-thunderstorm-100: #d3f1ff;
  --color-raging-thunderstorm-200: #b0e0f6;
  --color-raging-thunderstorm-300: #95cbe5;
  --color-raging-thunderstorm-400: #70adc9;
  --color-raging-thunderstorm-500: #5393af;
  --color-raging-thunderstorm-600: #387994;
  --color-raging-thunderstorm-700: #24627c;
  --color-raging-thunderstorm-800: #00506a;
  --color-raging-thunderstorm-900: #093d51;
  --color-raging-thunderstorm-950: #022735;
  --color-shadow-play: #340f00;
  --color-shadow-play-50: #fff2ed;
  --color-shadow-play-100: #ffe5da;
  --color-shadow-play-200: #f4cebe;
  --color-shadow-play-300: #e1b6a4;
  --color-shadow-play-400: #c49582;
  --color-shadow-play-500: #a87965;
  --color-shadow-play-600: #8a5f4c;
  --color-shadow-play-700: #704837;
  --color-shadow-play-800: #583628;
  --color-shadow-play-900: #44281c;
  --color-shadow-play-950: #340f00;
  --color-touch-of-glamour: #e0864f;
  --color-touch-of-glamour-50: #fff2ea;
  --color-touch-of-glamour-100: #ffe4d6;
  --color-touch-of-glamour-200: #ffc9ab;
  --color-touch-of-glamour-300: #faaa7c;
  --color-touch-of-glamour-400: #e0864f;
  --color-touch-of-glamour-500: #c26b32;
  --color-touch-of-glamour-600: #a35114;
  --color-touch-of-glamour-700: #863d00;
  --color-touch-of-glamour-800: #6a2f00;
  --color-touch-of-glamour-900: #532300;
  --color-touch-of-glamour-950: #361400;
  --color-pastel-pea: #b9e8a4;
  --color-pastel-pea-50: #e5ffd9;
  --color-pastel-pea-100: #d9f6cc;
  --color-pastel-pea-200: #b9e8a4;
  --color-pastel-pea-300: #a8cf96;
  --color-pastel-pea-400: #85b072;
  --color-pastel-pea-500: #699555;
  --color-pastel-pea-600: #50793b;
  --color-pastel-pea-700: #3b6128;
  --color-pastel-pea-800: #2b4c1a;
  --color-pastel-pea-900: #1f3b10;
  --color-pastel-pea-950: #112506;
  --color-dreamscape-purple: #9341c5;
  --color-dreamscape-purple-50: #f9f2ff;
  --color-dreamscape-purple-100: #f3e6ff;
  --color-dreamscape-purple-200: #e8ccff;
  --color-dreamscape-purple-300: #dbadff;
  --color-dreamscape-purple-400: #c97cfd;
  --color-dreamscape-purple-500: #ae5ee2;
  --color-dreamscape-purple-600: #9341c5;
  --color-dreamscape-purple-700: #782ba5;
  --color-dreamscape-purple-800: #601987;
  --color-dreamscape-purple-900: #4c0c6d;
  --color-dreamscape-purple-950: #310349;
}