MondstadtDayPastoralFreeBright

Mondstadt, Fair Winds

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

0%89aca230%84a5a355%68a57a80%208fae100%007f9f

Why it works

The same formula as Liyue Harbor — a wide cold ground standing up a small warm accent (68% blue against 1.1% warm) — and yet an entirely different city. Identity does not live in the formula. It lives in the 40° between the two accent hues.

The formula reproduces

68.1% blue (mean 216°) over 25% grey as the ground, with warm colour at just 1.1% — more restrained even than Liyue Harbor's 2.6%. “Cold ground stands up a warm point” carries across cities. Which raises the real question: if the formula is the same, why do the two look nothing alike?

Identity hides in 40 degrees

Mondstadt's warm point is red roof tile, measured at 47°; Liyue's is apricot gold at 87°. The same structural accent, 40° apart in hue, reads as European fairy tale on one side and ink-painting Jiangnan on the other. Building a themed series, the system can be shared wholesale: move the identity colour one step in hue and the region moves with it.

The closer to the skyline, the plainer

Windmill sails at C 0.040, cathedral stone at C 0.036 — the city's upper half is nearly achromatic and meets the sky on silhouette alone. The colour (tiles, trees, lake) is all gathered in the lower half. Interfaces work the same way: keep the top navigation plain and save the chroma for the content area, and the hierarchy stands up by itself.

Take these colours with you

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

/* Mondstadt, Fair Winds · Mondstadt, Fair Winds — Teyvat Palette */
:root {
  --lake-teal: oklch(0.606 0.104 222.3); /* Lake Teal #218faf */
  --rampart-grey: oklch(0.696 0.036 192.7); /* Rampart Grey #84a5a3 */
  --meadow-green: oklch(0.668 0.09 152.9); /* Meadow Green #68a57a */
  --red-tile: oklch(0.731 0.063 46.7); /* Red Tile #ca9c87 */
  --windmill-white: oklch(0.715 0.04 175.7); /* Windmill White #89aca2 */
  --gradient-mondstadt-city: linear-gradient(172deg, oklch(0.715 0.04 176) 0%, oklch(0.696 0.036 193) 30%, oklch(0.668 0.09 153) 55%, oklch(0.606 0.104 222) 80%, oklch(0.55 0.11 222) 100%);
}

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