Thor’s Thunder to Tomato Bisque Color Palette

About this palette

Thor’s Thunder to Tomato Bisque is a 5-color vibrant, cool palette: #34C9FF (Thor’s Thunder), #00B388 (Mint), #C7003A (Vampire Bite), #00D380 (Seaweed), #CC5900 (Tomato Bisque). It mixes blue, turquoise, red, green, orange tones and feels cool overall. The strongest text pairing is #34C9FF on #C7003A with a contrast ratio of 3.14:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Thor’s Thunder	rgb(52, 201, 255)	hsl(196, 100%, 60%)
Mint	rgb(0, 179, 136)	hsl(166, 100%, 35%)
Vampire Bite	rgb(199, 0, 58)	hsl(343, 100%, 39%)
Seaweed	rgb(0, 211, 128)	hsl(156, 100%, 41%)
Tomato Bisque	rgb(204, 89, 0)	hsl(26, 100%, 40%)

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.

Aa3.14:1 Poor#34C9FF on #C7003A
Aa3.14:1 Poor#C7003A on #34C9FF
Aa3.05:1 Poor#C7003A on #00D380
Aa3.05:1 Poor#00D380 on #C7003A

Color blindness preview

CSS variables

/* Thor’s Thunder to Tomato Bisque — https://swatchly.xyz/palette/34c9ff-00b388-c7003a-00d380-cc5900 */
:root {
  --thor-s-thunder: #34c9ff;
  --mint: #00b388;
  --vampire-bite: #c7003a;
  --seaweed: #00d380;
  --tomato-bisque: #cc5900;
}

Tailwind CSS v4

/* Thor’s Thunder to Tomato Bisque — https://swatchly.xyz/palette/34c9ff-00b388-c7003a-00d380-cc5900 */
@theme {
  --color-thor-s-thunder: #34c9ff;
  --color-thor-s-thunder-50: #dff5ff;
  --color-thor-s-thunder-100: #c5ecff;
  --color-thor-s-thunder-200: #8fdcff;
  --color-thor-s-thunder-300: #34c9ff;
  --color-thor-s-thunder-400: #00aadc;
  --color-thor-s-thunder-500: #008db8;
  --color-thor-s-thunder-600: #007295;
  --color-thor-s-thunder-700: #005b78;
  --color-thor-s-thunder-800: #004860;
  --color-thor-s-thunder-900: #00394c;
  --color-thor-s-thunder-950: #002331;
  --color-mint: #00b388;
  --color-mint-50: #ceffeb;
  --color-mint-100: #aafadb;
  --color-mint-200: #86e8c4;
  --color-mint-300: #5cd2aa;
  --color-mint-400: #00b388;
  --color-mint-500: #009571;
  --color-mint-600: #00795b;
  --color-mint-700: #006048;
  --color-mint-800: #004c38;
  --color-mint-900: #003c2b;
  --color-mint-950: #00261b;
  --color-vampire-bite: #c7003a;
  --color-vampire-bite-50: #fff1f1;
  --color-vampire-bite-100: #ffe3e3;
  --color-vampire-bite-200: #ffc7c7;
  --color-vampire-bite-300: #ffa3a6;
  --color-vampire-bite-400: #ff6674;
  --color-vampire-bite-500: #e83854;
  --color-vampire-bite-600: #c7003a;
  --color-vampire-bite-700: #a0002d;
  --color-vampire-bite-800: #7f0021;
  --color-vampire-bite-900: #640018;
  --color-vampire-bite-950: #41000d;
  --color-seaweed: #00d380;
  --color-seaweed-50: #bfffd6;
  --color-seaweed-100: #97fabf;
  --color-seaweed-200: #6de7a3;
  --color-seaweed-300: #00d380;
  --color-seaweed-400: #00b26b;
  --color-seaweed-500: #009559;
  --color-seaweed-600: #007947;
  --color-seaweed-700: #006138;
  --color-seaweed-800: #004e2c;
  --color-seaweed-900: #003e22;
  --color-seaweed-950: #002713;
  --color-tomato-bisque: #cc5900;
  --color-tomato-bisque-50: #fff1ea;
  --color-tomato-bisque-100: #ffe2d5;
  --color-tomato-bisque-200: #ffc6aa;
  --color-tomato-bisque-300: #ffa374;
  --color-tomato-bisque-400: #ea7837;
  --color-tomato-bisque-500: #cc5900;
  --color-tomato-bisque-600: #a54700;
  --color-tomato-bisque-700: #853700;
  --color-tomato-bisque-800: #692a00;
  --color-tomato-bisque-900: #532000;
  --color-tomato-bisque-950: #361200;
}