MondstadtDuskWarmExpansiveNostalgic

Windrise at Dusk

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

0%315b7238%8170a066%d37b8285%ee8f63100%f3ae58

Why it works

A textbook warm-cold collision: the sky slides from teal all the way to golden orange, crossing nearly 180° of hue, and yet lightness rises monotonically while saturation is not released until the horizon — so the collision neither muddies nor stifles.

The hue takes the long way round

Teal (235°) → dusk violet (315°) → rose (15°) → gold (70°): the route travels the hue wheel in one direction only, and no two neighbouring stops are more than 90° apart. What turns a gradient grey is driving straight through the complement; go the long way round and it never passes through the grey belt at all.

Lightness in a straight line

From top to bottom, L climbs monotonically from 0.45 to 0.80, and the eye is led naturally to the brightest point on the horizon. The rhythm of lightness is the compositional lead. Here, palette and composition are the same act.

Saturation goes last

High saturation appears only in the final 30% (the afterglow, the sunset gold); the large expanse of sky stays unsaturated and holds back. The same law transfers to an interface: large areas unsaturated for the ground, small areas saturated for the stroke that finishes it.

Take these colours with you

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

/* Windrise at Dusk · Windrise at Dusk — Teyvat Palette */
:root {
  --sunset-gold: oklch(0.8 0.13 70); /* Sunset Gold #f3ae58 */
  --afterglow-orange: oklch(0.7 0.15 45); /* Afterglow Orange #e97c48 */
  --rose-dusk: oklch(0.66 0.11 15); /* Rose Pink #cc757c */
  --twilight-mauve: oklch(0.55 0.07 315); /* Dusk Violet #81658e */
  --dusk-teal: oklch(0.45 0.06 235); /* Dusk Blue #315b72 */
  --gradient-mondstadt-windrise-dusk: linear-gradient(178deg, oklch(0.45 0.06 235) 0%, oklch(0.58 0.075 300) 38%, oklch(0.68 0.11 15) 66%, oklch(0.74 0.13 45) 85%, oklch(0.8 0.13 70) 100%);
}

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