Raging Thunderstorm to Puff of Pink color palette

004F6BRaging Thunderstorm 242200Midnight Pines 007DAANeptune C4A400Greenfinch FFC6EFPuff of Pink

About this palette

Raging Thunderstorm to Puff of Pink is a 5-color warm, vintage palette: #004F6B (Raging Thunderstorm), #242200 (Midnight Pines), #007DAA (Neptune), #C4A400 (Greenfinch), #FFC6EF (Puff of Pink). It mixes blue, brown, yellow, pink tones and feels warm overall. The strongest text pairing is #242200 on #FFC6EF with a contrast ratio of 11.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Raging Thunderstorm	rgb(0, 79, 107)	hsl(196, 100%, 21%)
Midnight Pines	rgb(36, 34, 0)	hsl(57, 100%, 7%)
Neptune	rgb(0, 125, 170)	hsl(196, 100%, 33%)
Greenfinch	rgb(196, 164, 0)	hsl(50, 100%, 38%)
Puff of Pink	rgb(255, 198, 239)	hsl(317, 100%, 89%)

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.

Aa11.18:1 Very good#242200 on #FFC6EF
Aa11.18:1 Very good#FFC6EF on #242200
Aa6.64:1 Good#242200 on #C4A400
Aa6.64:1 Good#C4A400 on #242200
Aa6.25:1 Good#004F6B on #FFC6EF
Aa6.25:1 Good#FFC6EF on #004F6B
Aa3.71:1 Poor#004F6B on #C4A400
Aa3.71:1 Poor#C4A400 on #004F6B

Color blindness preview

CSS variables

/* Raging Thunderstorm to Puff of Pink — https://swatchly.xyz/palette/004f6b-242200-007daa-c4a400-ffc6ef */
:root {
  --raging-thunderstorm: #004f6b;
  --midnight-pines: #242200;
  --neptune: #007daa;
  --greenfinch: #c4a400;
  --puff-of-pink: #ffc6ef;
}

Tailwind CSS v4

/* Raging Thunderstorm to Puff of Pink — https://swatchly.xyz/palette/004f6b-242200-007daa-c4a400-ffc6ef */
@theme {
  --color-raging-thunderstorm: #004f6b;
  --color-raging-thunderstorm-50: #eaf8ff;
  --color-raging-thunderstorm-100: #d4f0ff;
  --color-raging-thunderstorm-200: #b0e0f8;
  --color-raging-thunderstorm-300: #95cbe6;
  --color-raging-thunderstorm-400: #70adcb;
  --color-raging-thunderstorm-500: #5292b1;
  --color-raging-thunderstorm-600: #387896;
  --color-raging-thunderstorm-700: #24627d;
  --color-raging-thunderstorm-800: #004f6b;
  --color-raging-thunderstorm-900: #093d51;
  --color-raging-thunderstorm-950: #022635;
  --color-midnight-pines: #242200;
  --color-midnight-pines-50: #f7f7e1;
  --color-midnight-pines-100: #ededd4;
  --color-midnight-pines-200: #dadabc;
  --color-midnight-pines-300: #c4c3a2;
  --color-midnight-pines-400: #a5a480;
  --color-midnight-pines-500: #8a8964;
  --color-midnight-pines-600: #706f4b;
  --color-midnight-pines-700: #595838;
  --color-midnight-pines-800: #464529;
  --color-midnight-pines-900: #37361d;
  --color-midnight-pines-950: #242200;
  --color-neptune: #007daa;
  --color-neptune-50: #eaf7ff;
  --color-neptune-100: #d8f1ff;
  --color-neptune-200: #afe3ff;
  --color-neptune-300: #83d0f9;
  --color-neptune-400: #58b2df;
  --color-neptune-500: #3397c5;
  --color-neptune-600: #007daa;
  --color-neptune-700: #006388;
  --color-neptune-800: #004d6b;
  --color-neptune-900: #003b53;
  --color-neptune-950: #002535;
  --color-greenfinch: #c4a400;
  --color-greenfinch-50: #fff7da;
  --color-greenfinch-100: #ffeeae;
  --color-greenfinch-200: #f1db86;
  --color-greenfinch-300: #dec45f;
  --color-greenfinch-400: #c4a400;
  --color-greenfinch-500: #a38800;
  --color-greenfinch-600: #836d00;
  --color-greenfinch-700: #685600;
  --color-greenfinch-800: #514300;
  --color-greenfinch-900: #3e3300;
  --color-greenfinch-950: #271f00;
  --color-puff-of-pink: #ffc6ef;
  --color-puff-of-pink-50: #fff3fb;
  --color-puff-of-pink-100: #ffe5f7;
  --color-puff-of-pink-200: #ffc6ef;
  --color-puff-of-pink-300: #e2b3d4;
  --color-puff-of-pink-400: #c491b6;
  --color-puff-of-pink-500: #a8749a;
  --color-puff-of-pink-600: #8b5a7e;
  --color-puff-of-pink-700: #714466;
  --color-puff-of-pink-800: #5a3350;
  --color-puff-of-pink-900: #46263e;
  --color-puff-of-pink-950: #2d1628;
}