MondstadtDayBustlingClear noonLight-footed

Mondstadt at Windblume Noon

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

0%765d7014%36618834%c0cac356%b6ae9074%5d884e88%985528100%e2cb9d

Why it works

A festival's colour can be paid for by renting area or by renting headroom, and whether the first is available at all is decided by the light: at night the grey is unlit surface, so a single lantern repaints it (Jiulue Teahouse, achromatic 56.13% → 25.82%, 330°–60° from 37,096 pixels to 195,140). At noon the grey is surface the sun already owns, and Mondstadt's plaza — decorated just as thoroughly — still holds 33.62% achromatic, only 19,539 pixels in 330°–60°, and a chroma median of 0.039 that is actually lower than the lantern night's 0.045. All this festival can afford is headroom: 0.144 minus 0.039 is 0.105, above the lantern night's 0.092.

Not one point of the grey was spent

33.62% of the frame falls below chroma 0.025 and the chroma median is only 0.039. Of the 4,000 brightest pixels, 3,192 measure chroma 0.010 to 0.017 at lightness 0.92 to 0.93, and all of them are that sunlit flagstone (one patch measures L 0.83, chroma 0.015, hue 154°, across 17,630 pixels, entirely under the achromatic line). Jiulue Teahouse on Lantern Night spent 30 points of grey on its festival; this one spends none. Its grey is not "unlit" but "currently under the sun", and a lit neutral surface cannot be rewritten by adding one more lamp.

The biggest banner is the quietest thing here

The rose banner strung across the street covers 6,075 pixels and measures L 0.51, chroma 0.044, hue 335° — just 0.005 above the frame's chroma median of 0.039. The largest decoration in the picture is almost exactly as loud as the average pixel. The ceiling of 0.178 goes instead to the blue-glowing windblume lamp on the upper-left steps: its head reaches 0.178 across 1,089 pixels, and the ring of stone caught in its blue light measures chroma 0.079, 1.8 times the 0.045 average of the frame's whole blue band. In daylight, only a decoration that emits its own light can afford the ceiling.

If you cannot buy area, buy loudness instead

The whole frame holds only 19,539 pixels in 330°–60°, yet the densest 3% of that cluster measures L 0.60 and chroma 0.131. The orange paper pinwheels planted in the hedge account for just 653 pixels inside that window, averaging 0.106 with a peak of 0.166 — 653 pixels touching a ceiling of 0.178. The lantern night's headroom is 0.137 minus 0.045, or 0.092; here it is 0.144 minus 0.039, or 0.105. Not an inch of area was bought, and the loudness went up anyway. The same holds for a daytime interface wearing a festival skin: the base colour is already owned by daylight, so do not try to change it. Put the budget on a few points that glow by themselves, because a decoration that does not emit is only covering things up, however big it is.

Take these colours with you

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

/* Mondstadt at Windblume Noon · Mondstadt at Windblume Noon — Teyvat Palette */
:root {
  --flagstone-grey: oklch(0.83 0.015 154); /* Flagstone Grey #c0cac3 */
  --court-brick: oklch(0.75 0.042 94); /* Court Brick #b6ae90 */
  --hedge-green: oklch(0.58 0.097 138); /* Hedge Green #5d884e */
  --border-bloom: oklch(0.85 0.066 85); /* Border Bloom #e2cb9d */
  --street-banner: oklch(0.51 0.044 335); /* Street Banner #765d70 */
  --paper-pinwheel: oklch(0.52 0.106 52); /* Paper Pinwheel #985528 */
  --windblume-lamp: oklch(0.48 0.079 247); /* Windblume Lamp #366188 */
  --gradient-mondstadt-main-plaza-windblume: linear-gradient(168deg, oklch(0.51 0.044 335) 0%, oklch(0.48 0.079 247) 14%, oklch(0.83 0.015 154) 34%, oklch(0.75 0.042 94) 56%, oklch(0.58 0.097 138) 74%, oklch(0.52 0.106 52) 88%, oklch(0.85 0.066 85) 100%);
}

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