SumeruDayVentilatedConvalescentGreen and Moist

Bimarstan under a Green Awning

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%5c9ccc20%63977638%cb745e58%2e3f3574%cfc999100%2e7130

Why it works

A piece of cloth can serve as a fill light, and the hue it hands over is more precise than the sky's. The green cloth awning crossing the left half runs 54,237 pixels at L 0.63 / chroma 0.075 / hue 156°; the sandstone floor beneath it runs 7,920 pixels at L 0.35 / chroma 0.029 / 159° — 3°. The same sandstone, stepped out from under the awning into direct sun, reads L 0.83 / chroma 0.065 / 102°: one piece of cloth swung a floor's hue by 57°. The condition is written into the same picture — the vermilion canopy on the right is only 9,568 pixels, and the wooden stall beneath it still reads 155°, with not a trace of red. Fill light is billed by how much sky it blocks, never by how loud it is; in this batch, the 53,418 pixels of red bunting in «Lambad's Tavern under Open Sky» hang too high and collect nothing at all.

Awning and floor, 3° apart

The green cloth awning runs 54,237 pixels averaging 156°; the shaded sandstone floor beneath it runs 7,920 pixels averaging 159°. The same sandstone in direct sun beyond the awning reads 102°, while the sky visible in the top quarter of the frame reads 242°. Given those two candidates, the shaded floor picked the one 3° from the cloth, not the one 83° from the sky — because the cloth is nearer, and because it covers precisely the patch of sky that floor would otherwise have been looking at. You do not need to paint the ground to set a space's key: hang one coloured surface overhead, large enough and low enough, and the ground will go and fetch that hue itself.

The counter-example in the same frame is 9,568 pixels

The vermilion cloth canopy on the right is the only massed warmth here: a 0°–60° window holds 9,568 pixels at L 0.65 / chroma 0.114 / 35°, far more saturated than the green awning. Yet the wooden stall beneath it measures L 0.43 / chroma 0.049 / 155° — still in the green awning's family, with no red at all. Across the frame, 330°–60° comes to 14,459 pixels, 1.64%. Two pieces of cloth, 5.7 times apart in area: one hands over 3°, the other hands over 0. A fill light is priced by the sky it covers, not by its own chroma. When you build atmosphere light into a scene, work out the coverage first and pick the colour second.

The awning cannot buy saturation

This cloth shared its hue with the ground but could not share chroma: the awning's own peak is only 0.134, while the frame's ceiling of 0.214 lands on the grass in direct sun along the bottom edge (the most chromatic 3% at lower left reads L 0.72 / chroma 0.180 / 141°, and the patch at lower right runs 17,710 pixels at L 0.49 / chroma 0.120 / 144°, peaking at 0.211). Cloth and grass are 12° apart in hue and 1.6 times apart in mean chroma. Across the four pictures in this batch the sunlit paving all lands within 100°–115° — a spread of 15° — while the shaded halves scatter to 150° / no hue at all / 235° / 159°. The sun handles saturation; the ceiling overhead handles identity. To get both out of one surface, it has to be in the sun and out from under everyone else's parasol.

Take these colours with you

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

/* Bimarstan under a Green Awning · Bimarstan under a Green Awning — Teyvat Palette */
:root {
  --gap-sky: oklch(0.67 0.097 242); /* Gap Sky #5c9ccc */
  --awning-jade: oklch(0.63 0.075 156); /* Awning Jade #639776 */
  --vermilion-canopy: oklch(0.65 0.114 35); /* Vermilion Canopy #cb745e */
  --awning-shade-floor: oklch(0.35 0.029 159); /* Awning-Shade Floor #2e3f35 */
  --sunlit-sandstone: oklch(0.83 0.065 102); /* Sunlit Sandstone #cfc999 */
  --sunlit-grass: oklch(0.49 0.12 144); /* Sunlit Grass #2e7130 */
  --gradient-bimarstan: linear-gradient(180deg, oklch(0.67 0.097 242) 0%, oklch(0.63 0.075 156) 20%, oklch(0.65 0.114 35) 38%, oklch(0.35 0.029 159) 58%, oklch(0.83 0.065 102) 74%, oklch(0.49 0.12 144) 100%);
}

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