Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
InazumaNightGrimTheatricalLightning

Musoujin Gorge Storm

Palette

Click a swatch to copy its HEX; hover for the OKLCH value.

Reconstructed gradient

The gradient distilled from the scene, unrolled left to right by stop; the authored angle is 160° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%19112745%332a5872%724aab88%ca66c3100%efadd1

Why it works

Drama inside a single hue family: violet to magenta travels only 50°, and all the tension comes from abrupt shifts in lightness and chroma — a storm's flash is a violent jump in L and C, not a clash of hues.

01

Narrow gamut, high contrast

Every hue in the frame is packed into 290°–350°, and the sense of conflict is carried not by hue but by lightness (0.2 → 0.82). The emotion can be extreme while the frame stays unified — to get “fierce but not chaotic”, narrow the gamut first.

02

Magenta is violet's highlight

The lightning is not a brighter violet; it is a violet shifted towards magenta. Real light moves hue. Add a small hue shift to the bright end of a gradient and the material stops looking brightened and starts looking lit.

03

The 90/10 rule of area

80% of the frame is held below L 0.35, and the lightning takes a single line. Restraint is what creates impact — the smaller the area of the climax, the louder it rings.

Take these colours with you

CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.

/* Musoujin Gorge Storm · Musoujin Gorge Storm — Teyvat Palette */
:root {
  --lightning-magenta: oklch(0.68 0.18 335); /* Lightning Magenta #d967c4 */
  --raiden-violet: oklch(0.52 0.16 300); /* Electro Violet #794db6 */
  --sakura-pink: oklch(0.82 0.08 350); /* Cherry Pink #edafcb */
  --ink-violet: oklch(0.32 0.07 292); /* Ink Violet #342b53 */
  --storm-night: oklch(0.2 0.04 300); /* Night Violet #191125 */
  --gradient-inazuma-storm-night: linear-gradient(160deg, oklch(0.2 0.045 300) 0%, oklch(0.32 0.08 290) 45%, oklch(0.5 0.15 300) 72%, oklch(0.66 0.17 330) 88%, oklch(0.82 0.09 345) 100%);
}

A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.