Precious Pumpkin to Thor’s Thunder color palette

E2612BPrecious Pumpkin B23700Grilled Tomato FFF3EDSeashell 004C63Raging Thunderstorm 60CBFFThor’s Thunder

Open in generator Export PNG, PDF, ASE…

About this palette

Precious Pumpkin to Thor’s Thunder is a 5-color palette: #E2612B (Precious Pumpkin), #B23700 (Grilled Tomato), #FFF3ED (Seashell), #004C63 (Raging Thunderstorm), #60CBFF (Thor’s Thunder). It mixes orange, red, white, blue tones and feels balanced overall. The strongest text pairing is #FFF3ED on #004C63 with a contrast ratio of 8.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Precious Pumpkin	rgb(226, 97, 43)	hsl(18, 76%, 53%)
Grilled Tomato	rgb(178, 55, 0)	hsl(19, 100%, 35%)
Seashell	rgb(255, 243, 237)	hsl(20, 100%, 96%)
Raging Thunderstorm	rgb(0, 76, 99)	hsl(194, 100%, 19%)
Thor’s Thunder	rgb(96, 203, 255)	hsl(200, 100%, 69%)

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.72:1 Very good#FFF3ED on #004C63
Aa8.72:1 Very good#004C63 on #FFF3ED
Aa5.61:1 Good#B23700 on #FFF3ED
Aa5.61:1 Good#FFF3ED on #B23700
Aa5.19:1 Good#004C63 on #60CBFF
Aa5.19:1 Good#60CBFF on #004C63
Aa3.34:1 Poor#B23700 on #60CBFF
Aa3.34:1 Poor#60CBFF on #B23700

Color blindness preview

CSS variables

/* Precious Pumpkin to Thor’s Thunder — https://swatchly.xyz/palette/e2612b-b23700-fff3ed-004c63-60cbff */
:root {
  --precious-pumpkin: #e2612b;
  --grilled-tomato: #b23700;
  --seashell: #fff3ed;
  --raging-thunderstorm: #004c63;
  --thor-s-thunder: #60cbff;
}

Tailwind CSS v4

/* Precious Pumpkin to Thor’s Thunder — https://swatchly.xyz/palette/e2612b-b23700-fff3ed-004c63-60cbff */
@theme {
  --color-precious-pumpkin: #e2612b;
  --color-precious-pumpkin-50: #fff4f0;
  --color-precious-pumpkin-100: #ffe9e1;
  --color-precious-pumpkin-200: #ffd0bf;
  --color-precious-pumpkin-300: #ffb194;
  --color-precious-pumpkin-400: #fc8050;
  --color-precious-pumpkin-500: #e2612b;
  --color-precious-pumpkin-600: #bf4400;
  --color-precious-pumpkin-700: #993500;
  --color-precious-pumpkin-800: #782800;
  --color-precious-pumpkin-900: #5e1d00;
  --color-precious-pumpkin-950: #3c0f00;
  --color-grilled-tomato: #b23700;
  --color-grilled-tomato-50: #fff2ee;
  --color-grilled-tomato-100: #ffe3db;
  --color-grilled-tomato-200: #ffc7b5;
  --color-grilled-tomato-300: #ffa487;
  --color-grilled-tomato-400: #f0754d;
  --color-grilled-tomato-500: #d2552b;
  --color-grilled-tomato-600: #b23700;
  --color-grilled-tomato-700: #8f2a00;
  --color-grilled-tomato-800: #711f00;
  --color-grilled-tomato-900: #591700;
  --color-grilled-tomato-950: #3a0b00;
  --color-seashell: #fff3ed;
  --color-seashell-50: #fff3ed;
  --color-seashell-100: #f1eae6;
  --color-seashell-200: #ded6d2;
  --color-seashell-300: #c9bfba;
  --color-seashell-400: #aa9f9a;
  --color-seashell-500: #8e847e;
  --color-seashell-600: #736964;
  --color-seashell-700: #5c534f;
  --color-seashell-800: #48403c;
  --color-seashell-900: #38312e;
  --color-seashell-950: #231e1c;
  --color-raging-thunderstorm: #004c63;
  --color-raging-thunderstorm-50: #e9f8ff;
  --color-raging-thunderstorm-100: #d2f1ff;
  --color-raging-thunderstorm-200: #b2e0f4;
  --color-raging-thunderstorm-300: #96cae1;
  --color-raging-thunderstorm-400: #71acc5;
  --color-raging-thunderstorm-500: #5391aa;
  --color-raging-thunderstorm-600: #39768e;
  --color-raging-thunderstorm-700: #255f75;
  --color-raging-thunderstorm-800: #004c63;
  --color-raging-thunderstorm-900: #0b3a4b;
  --color-raging-thunderstorm-950: #032530;
  --color-thor-s-thunder: #60cbff;
  --color-thor-s-thunder-50: #e7f6ff;
  --color-thor-s-thunder-100: #d0eeff;
  --color-thor-s-thunder-200: #a1deff;
  --color-thor-s-thunder-300: #60cbff;
  --color-thor-s-thunder-400: #42abdc;
  --color-thor-s-thunder-500: #0f90c1;
  --color-thor-s-thunder-600: #00749d;
  --color-thor-s-thunder-700: #005c7e;
  --color-thor-s-thunder-800: #004864;
  --color-thor-s-thunder-900: #00384e;
  --color-thor-s-thunder-950: #002333;
}