Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Seirai Island under the Storm's Eye
InazumaDuskOverbearingEerieElectric

Seirai Island under the Storm's Eye

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 180° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%3c236918%a67aea44%3c236962%f8bfa9100%5e4e8e

Why it works

A warm band worth 2.3% of the frame rewrites the hour. Violet holds 83.9% at a median chroma of 0.115, and only that narrow strip on the horizon — L 0.85, hue 42° — tells you this is dusk rather than deep night. Take it away and the same violet becomes night.

01

Two and a third percent decide the hour

The orange band's 1.77% plus the yellow band's 0.49% comes to 2.26%, all of it squeezed into one seam along the horizon; sampling the warm pixels there gives L 0.85, chroma 0.072, hue 42°. It is the only warm thing in the picture, and apart from the lightning the only thing brighter than 0.8. That is where the "moment" in the title stands: the violet cloud cannot state a time, the last light can. To give a cool picture an hour you need not touch its lead colour — add a warm band worth two percent.

02

White is a hole punched out of the colour

The frame's median chroma is 0.115 and only 0.19% of pixels are achromatic, yet the brightest four thousand average L 0.97 at a chroma of **just 0.022** — the bolt and the eye's core are the only places in this picture with no colour at all. The Musoujin Gorge study called the flash a violent jump in L and C; this is the same thing held still: on a frame where everything carries colour, the brightest place gives its chroma up, and the white therefore reads as intense light rather than white paint.

03

One violet family, three depths built from chroma

The cloud measures L 0.33 / chroma 0.116 / 296°, the water L 0.47 / 0.101 / 293°, the grove on shore L 0.51 / 0.198 / 298° — three hues spanning only 7°, between 293° and 300°, so the layering is done by chroma (0.101 / 0.116 / 0.198) interleaved with lightness. The chroma peak of 0.269 lands on the ring of cloud around the eye. A single-hue frame has only two knobs left for depth, and this picture uses both to the end: chroma p99 across the frame is 0.236, close to the edge of what OKLCH can give at this lightness.

Take these colours with you

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

/* Seirai Island under the Storm's Eye · Seirai Island under the Storm's Eye — Teyvat Palette */
:root {
  --storm-violet: oklch(0.33 0.116 296); /* Storm Violet #3c2369 */
  --lagoon-violet: oklch(0.47 0.101 293); /* Lagoon Violet #5e4e8e */
  --grove-violet: oklch(0.51 0.198 298); /* Grove Violet #773fc6 */
  --eye-halo: oklch(0.67 0.164 300); /* Eye Halo #a67aea */
  --last-light: oklch(0.85 0.072 42); /* Last Light #f8bfa9 */
  --bolt-white: oklch(0.97 0.022 327); /* Bolt White #fef0fd */
  --gradient-seirai-island: linear-gradient(180deg, oklch(0.33 0.116 296) 0%, oklch(0.67 0.164 300) 18%, oklch(0.33 0.116 296) 44%, oklch(0.85 0.072 42) 62%, oklch(0.47 0.101 293) 100%);
}

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