Raging Thunderstorm to Queer Blue color palette

004F65Raging Thunderstorm 2D214DPāua ADC8FFNight Snow 6A599CPassion Flower 509AB5Rainy Mood 8AAEE2Queer Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Raging Thunderstorm to Queer Blue is a 6-color cool palette: #004F65 (Raging Thunderstorm), #2D214D (Pāua), #ADC8FF (Night Snow), #6A599C (Passion Flower), #509AB5 (Rainy Mood), #8AAEE2 (Queer Blue). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #2D214D on #ADC8FF with a contrast ratio of 8.69:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Raging Thunderstorm	rgb(0, 79, 101)	hsl(193, 100%, 20%)
Pāua	rgb(45, 33, 77)	hsl(256, 40%, 22%)
Night Snow	rgb(173, 200, 255)	hsl(220, 100%, 84%)
Passion Flower	rgb(106, 89, 156)	hsl(255, 27%, 48%)
Rainy Mood	rgb(80, 154, 181)	hsl(196, 41%, 51%)
Queer Blue	rgb(138, 174, 226)	hsl(215, 60%, 71%)

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.

Aa8.69:1 Very good#2D214D on #ADC8FF
Aa8.69:1 Very good#ADC8FF on #2D214D
Aa6.43:1 Good#2D214D on #8AAEE2
Aa6.43:1 Good#8AAEE2 on #2D214D
Aa5.41:1 Good#004F65 on #ADC8FF
Aa5.41:1 Good#ADC8FF on #004F65
Aa4.62:1 Good#2D214D on #509AB5
Aa4.62:1 Good#509AB5 on #2D214D

Color blindness preview

CSS variables

/* Raging Thunderstorm to Queer Blue — https://swatchly.xyz/palette/004f65-2d214d-adc8ff-6a599c-509ab5-8aaee2 */
:root {
  --raging-thunderstorm: #004f65;
  --p-ua: #2d214d;
  --night-snow: #adc8ff;
  --passion-flower: #6a599c;
  --rainy-mood: #509ab5;
  --queer-blue: #8aaee2;
}

Tailwind CSS v4

/* Raging Thunderstorm to Queer Blue — https://swatchly.xyz/palette/004f65-2d214d-adc8ff-6a599c-509ab5-8aaee2 */
@theme {
  --color-raging-thunderstorm: #004f65;
  --color-raging-thunderstorm-50: #e8f8ff;
  --color-raging-thunderstorm-100: #d0f1ff;
  --color-raging-thunderstorm-200: #b1e0f3;
  --color-raging-thunderstorm-300: #95cbe1;
  --color-raging-thunderstorm-400: #70adc5;
  --color-raging-thunderstorm-500: #5393ab;
  --color-raging-thunderstorm-600: #39788f;
  --color-raging-thunderstorm-700: #256277;
  --color-raging-thunderstorm-800: #004f65;
  --color-raging-thunderstorm-900: #0a3d4d;
  --color-raging-thunderstorm-950: #032632;
  --color-p-ua: #2d214d;
  --color-p-ua-50: #f5f3ff;
  --color-p-ua-100: #ece8ff;
  --color-p-ua-200: #d9d1fb;
  --color-p-ua-300: #c2b9e9;
  --color-p-ua-400: #a197cb;
  --color-p-ua-500: #857aae;
  --color-p-ua-600: #695e8f;
  --color-p-ua-700: #514772;
  --color-p-ua-800: #3d3459;
  --color-p-ua-900: #2d214d;
  --color-p-ua-950: #1a1529;
  --color-night-snow: #adc8ff;
  --color-night-snow-50: #f6f9ff;
  --color-night-snow-100: #e9f0ff;
  --color-night-snow-200: #cddeff;
  --color-night-snow-300: #adc8ff;
  --color-night-snow-400: #8ea7d9;
  --color-night-snow-500: #718abd;
  --color-night-snow-600: #576e9f;
  --color-night-snow-700: #415683;
  --color-night-snow-800: #304269;
  --color-night-snow-900: #233252;
  --color-night-snow-950: #141e36;
  --color-passion-flower: #6a599c;
  --color-passion-flower-50: #f5f3ff;
  --color-passion-flower-100: #ebe6ff;
  --color-passion-flower-200: #d7cdff;
  --color-passion-flower-300: #c1b3f3;
  --color-passion-flower-400: #a191d7;
  --color-passion-flower-500: #8574ba;
  --color-passion-flower-600: #6a599c;
  --color-passion-flower-700: #544580;
  --color-passion-flower-800: #423467;
  --color-passion-flower-900: #332752;
  --color-passion-flower-950: #201736;
  --color-rainy-mood: #509ab5;
  --color-rainy-mood-50: #ecf9ff;
  --color-rainy-mood-100: #d8f4ff;
  --color-rainy-mood-200: #b2e6fa;
  --color-rainy-mood-300: #96d1e9;
  --color-rainy-mood-400: #70b4ce;
  --color-rainy-mood-500: #509ab5;
  --color-rainy-mood-600: #327d97;
  --color-rainy-mood-700: #19647c;
  --color-rainy-mood-800: #054e63;
  --color-rainy-mood-900: #003c4d;
  --color-rainy-mood-950: #002531;
  --color-queer-blue: #8aaee2;
  --color-queer-blue-50: #f5f9ff;
  --color-queer-blue-100: #e8f2ff;
  --color-queer-blue-200: #cce1ff;
  --color-queer-blue-300: #aeccf8;
  --color-queer-blue-400: #8aaee2;
  --color-queer-blue-500: #6e90c2;
  --color-queer-blue-600: #5273a4;
  --color-queer-blue-700: #3c5b87;
  --color-queer-blue-800: #2b466c;
  --color-queer-blue-900: #1e3555;
  --color-queer-blue-950: #101f36;
}