MondstadtDayBrightVerdantOpen

Galesong Hill in Sun and Pine Shade

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%65a0c722%e9f4f948%336b6b78%8aab63100%c2beac

Why it works

A mediator does not have to be grey, but it does have to be the quietest rung: the meadow at 129° takes 32.33%, the sky at 239° takes 45.67%, and the two are 110° apart. The pine belt between them at 195° not only sits midway on the wheel (66° to one side, 44° to the other) — it also comes last on both remaining channels: chroma 0.059 is a shade over half the meadow's 0.106, and lightness 0.49 is more than 0.19 below the 0.70 and 0.68 on either side. Only 8.83% of the frame is achromatic. What a mediating surface buys is quiet, not the absence of hue.

The pines are a grey with a hue

The 165°–210° band is 12.08%, the thinnest of the three hue bands, and yet it runs edge to edge across the middle and genuinely holds the meadow and the sky apart — nowhere in this picture do the two large colours touch. Its hue 195° falls exactly between the meadow's 129° and the sky's 239°, and its chroma 0.059 and lightness 0.49 are both the lowest of the three. The midpoint on the wheel and the midpoint in the frame are the same band; that is what makes the mediation work.

Quiet is paid for on two channels

The same picture carries the counter-example: the sandstone cliff at left measures chroma 0.026, already on the achromatic line, and yet L 0.80 — brighter than the meadow's 0.70 and the sky's 0.68. It mediates nothing; it is one of the most eye-catching shapes in the frame. Low chroma only buys «not loud»; lightness has to come down too before you have bought «not competing». When an interface needs a dividing surface, don't think «use grey» — think paler than both neighbours, and darker than both.

Grey costs four tenths, a pine belt costs one

«Dragonspine, Autumn Snow» keeps three hues over a hundred degrees apart with 39.47% achromatic. On the same ruler (the bench's C<0.025) Galesong Hill measures 8.83%, under a quarter of that, and what holds those 110° apart is the 12.08% of pines. Grey can only occupy space; a dark band seated in the middle does one more job — it is itself the transition, and it splits 110° into two steps of 66° and 44°. When the hue span is wide and the neutral budget thin, pick a real object whose hue is central and whose chroma and lightness both come last; it costs far less than laying down a large grey.

Take these colours with you

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

/* Galesong Hill in Sun and Pine Shade · Galesong Hill in Sun and Pine Shade — Teyvat Palette */
:root {
  --high-sky: oklch(0.68 0.085 239); /* High Sky Blue #65a0c7 */
  --cumulus-white: oklch(0.96 0.014 228); /* Cumulus White #e9f4f9 */
  --pine-teal: oklch(0.49 0.059 195); /* Pine Teal #336b6b */
  --meadow-green: oklch(0.7 0.106 129); /* Meadow Green #8aab63 */
  --cliff-stone: oklch(0.8 0.026 99); /* Cliff Stone #c2beac */
  --grass-ember: oklch(0.78 0.158 74); /* Ember in the Grass #f2a621 */
  --gradient-galesong-hill: linear-gradient(180deg, oklch(0.68 0.085 239) 0%, oklch(0.96 0.014 228) 22%, oklch(0.49 0.059 195) 48%, oklch(0.7 0.106 129) 78%, oklch(0.8 0.026 99) 100%);
}

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