MondstadtDayExpansiveLoftyFruitful

Windwail Highland under a Clear Zenith

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%3191d124%aee9ff52%94be9178%488592100%34587c

Why it works

A frame does not need four sides — one will do, provided it steps away on a single axis and only that one. The top 15% measures chroma 0.121 against the centre's 0.073 (1.66×), while the other three edges — 0.073 / 0.075 / 0.086 — stay pinned to the centre; and that same top edge is L 0.69 against the centre's 0.70, slightly darker. This frame is drawn in chroma, and has nothing to do with light and dark.

The whole chroma budget rides on the topmost strip

Of the 4000 most chromatic pixels in the frame, 3855 fall in 240°–270°, located at (0.34, 0.01) — the zenith sky at the middle of the top edge. Sliced into ten horizontal bands, the top two measure 0.129 and 0.098 and the remaining eight all crowd into 0.067–0.079, a band 0.012 wide; the two upper corners are 0.124 and 0.107 while the two lower corners and the centre are 0.073 / 0.073 / 0.073, three readings that are practically identical. Chroma does not fade downwards — it is flattened in one step just below the top edge. To put a frame around something, pick one axis and spend the whole difference on it; do not nudge all three a little.

The top edge is if anything darker than the centre

The top strip is L 0.69, the centre 0.70 — on lightness the frame says nothing at all. The four edges read 0.69 / 0.59 / 0.72 / 0.61, straddling the centre on both sides without even agreeing in sign. Lightness is busy elsewhere: the near rock face at lower left is L 0.45, the haze holding the distant town on the left is L 0.80, and the entire sense of depth hangs on that axis. One axis does one job at a time; to draw a frame, go find an axis that is still free.

The golden autumn trees are green

〈Dragonspine, Autumn Snow〉 drew its frame in hue — all 11.6% of its warm pixels stood along the four edges. This picture has no such option: red, orange and yellow together come to 0.27%. That row of apparently golden autumn trees along the terrace rims, sampled as the 45°–165° pixels of the band they sit in, measures 134° at chroma 0.065; only 609 pixels genuinely land in 45°–90°. The red-tiled manor at the centre of the frame is the only man-made warm thing in the picture, and within that patch of roof just 166 pixels fall in the 330°–90° warm window, averaging 353° at chroma 0.055 — below the frame's own chroma median of 0.077. Take stock before you start drawing a frame: which axes do you actually have stock on?

Take these colours with you

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

/* Windwail Highland under a Clear Zenith · Windwail Highland under a Clear Zenith — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.63 0.131 243); /* Zenith Blue #3191d1 */
  --horizon-haze: oklch(0.9 0.067 223); /* Horizon Haze #aee9ff */
  --town-in-haze: oklch(0.8 0.097 231); /* Town in Haze #79c9f1 */
  --terrace-green: oklch(0.76 0.078 143); /* Terrace Green #94be91 */
  --near-cliff: oklch(0.45 0.073 250); /* Near Cliff #34587c */
  --manor-red: oklch(0.67 0.055 353); /* Manor Red #b18898 */
  --gradient-windwail-highland: linear-gradient(180deg, oklch(0.63 0.131 243) 0%, oklch(0.9 0.067 223) 24%, oklch(0.76 0.078 143) 52%, oklch(0.58 0.066 214) 78%, oklch(0.45 0.073 250) 100%);
}

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