Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.