MondstadtDayOpenClearFar-sighted

Starfell Valley in Clear Air

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%56acdb30%93b9d952%dcef5668%93b384100%358050

Why it works

Mondstadt, Fair Winds argued that the city's identity lives in the 47° of its red roofs. Seen from Starfell Valley those same roofs measure 243°, and sieving the whole town through a warm-hue window leaves barely a dozen stray pixels — the identity colour has been confiscated outright by the air, and the city is still unmistakably Mondstadt. A colour's name is spoken by the silhouette, not by the hue.

The red roofs are blue

That row of roofs sits between the windmills and the cathedral and measures L 0.77, C 0.061, h 243° — eight degrees bluer than the sky overhead at 235°. Pass the whole town through a 315–90° warm window and fifty thousand pixels leave thirteen, averaging 317°; widen it to the entire frame and the most saturated cluster in the red band still only reaches chroma 0.058. Not one of Mondstadt's 47° roof tiles survives here, and nobody mistakes which city this is — the cross-armed windmill sails and the cathedral spires have already said it all. A distance does not have to keep an object's local colour on the viewer's behalf: hand the hue over to the air and keep the outline.

The golden trees are green

The yellow-leafed trees ring the little lake on the valley floor, and their brightest 3% measures h 116°, L 0.91, C 0.174 — squarely inside the green band. Only 0.16% of the frame falls below 90°, averaging 85°, and that sliver is these very leaf tips. They read as gold because the canopy underfoot is L 0.54, C 0.106: inside one green family, lifting lightness by 0.37 and chroma by sixty per cent is enough for the eye to hand the mass a different colour name. When you want a "new colour", push lightness and chroma to the family's extremes first; move the hue only after that.

There is no grey in this picture

The cliffs on either flank look grey, but they measure 241° and 228° at chroma 0.066 and 0.068 — six-tenths of the sky's 0.108 at 235°. They are diluted sky, not a neutral; only 4.70% of the frame is genuinely achromatic (C<0.025). The three misnamed colours are one fact: red roof, gold tree and grey rock have all surrendered their local colour, and a 46% blue band and a 38% green band have absorbed the lot. Build a landscape palette by fixing the day's two hue bands first, then asking how far each object sits from them — not by giving every object the colour it is "supposed" to have.

Take these colours with you

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

/* Starfell Valley in Clear Air · Starfell Valley in Clear Air — Teyvat Palette */
:root {
  --clear-sky: oklch(0.71 0.108 235); /* Clear Sky #56acdb */
  --hazed-town: oklch(0.77 0.061 243); /* Hazed Mondstadt #93b9d9 */
  --cliff-shadow: oklch(0.54 0.066 241); /* Cliff Shadow #4a7492 */
  --false-gold: oklch(0.91 0.174 116); /* Canopy Gold #dcef56 */
  --meadow-green: oklch(0.73 0.075 136); /* Meadow Green #93b384 */
  --canopy-green: oklch(0.54 0.106 153); /* Understory Green #358050 */
  --gradient-starfell-valley: linear-gradient(180deg, oklch(0.71 0.108 235) 0%, oklch(0.77 0.061 243) 30%, oklch(0.91 0.174 116) 52%, oklch(0.73 0.075 136) 68%, oklch(0.54 0.106 153) 100%);
}

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