SumeruDayDeep ShadeUnhurriedVerdant

Djafar Tavern in Sifted Light

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%0e483912%63ab4230%28654d48%e27e2164%2d3c3080%a6a077100%2f5661

Why it works

A shadow's hue is the signature of whatever stands overhead. Measure the same terrace flagstone twice: under the giant tree's crown it reads L 0.34 / chroma 0.029 / hue 150°, and where the beam through the gap in the branches lands it reads L 0.70 / chroma 0.057 / 101° — the lit patch is reporting the sun, the one 49° away is reporting leaves. The proof sits at the bottom of the same frame: the steps outside the eaves are only 0.06 lighter than the terrace, yet their hue is 217°, a mere 22° from the 239° of the sky in the top quarter of the picture. Across all four Sumeru City shopfronts in this batch the sunlit paving lands between 100° and 115° — the sun is the same for everyone. If you want a space to read instantly as this place, the only thing you can change is what hangs above it.

Two slabs of stone, two ceilings

The terrace under the crown measures 6,480 pixels at L 0.34 / chroma 0.029 / hue 150°; the steps outside the eaves measure 20,304 pixels at L 0.40 / chroma 0.044 / 217°. That is 0.06 of lightness and 67° of hue. The terrace is pinned under the giant tree's crown (measured 172°) and the green glazed shell roofs (164°); the steps look up into the 239° sky through the gap in the branches. Same picture, same stone, same sun — what separates them is neither tone nor material, it is what each one can see. Do not reuse one "shadow colour" for the ground under an eave and the ground in the open; hand out hue by what each surface has above it.

The light gets in along one line only

The frame's median lightness is 0.42, while the beam falling through the gap onto the middle of the terrace measures L 0.70 / chroma 0.057 / 101° — and the same flagstone to either side of it reads L 0.33 and L 0.37. That is also why this picture is only 7.45% achromatic while 63.88% of it is green: apart from that one line, no surface here receives light unfiltered by leaves, so even the stone has to report green. To make a scene close in for a reason, do not go after the median lightness; shut the entrance for direct light, and the rest of the colours will collapse toward the filter's own family by themselves.

The parasols are signage, not light

That row of coral parasols is the most recognisable thing about the tavern, and it never appears in the light's ledger: a 0°–50° window covering the whole row holds just 3,848 pixels at chroma 0.077, peaking at 0.110, while the frame's ceiling of 0.194 belongs to the top-right corner — the only handful of leaves reached by direct sun (L 0.67 / chroma 0.157 / 137°). All the warmth in the frame, 330°–60°, comes to 12,924 pixels (1.47%), and its peak of 0.165 is the lit lantern left of the door, a thing that makes its own light. Cloth you hang up only changes what people see; to get a colour genuinely into a space, it has to stand in the light path. In this batch, «Bimarstan under a Green Awning» manages it with 54,237 pixels of green canopy, and «Lambad's Tavern under Open Sky» fails to with 53,418 pixels of red bunting.

Take these colours with you

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

/* Djafar Tavern in Sifted Light · Djafar Tavern in Sifted Light — Teyvat Palette */
:root {
  --canopy-ink-green: oklch(0.36 0.063 172); /* Canopy Ink-Green #0e4839 */
  --glazed-shell-green: oklch(0.46 0.076 164); /* Glazed Shell Green #28654d */
  --shaded-terrace: oklch(0.34 0.029 150); /* Shaded Terrace #2d3c30 */
  --skylit-steps: oklch(0.43 0.048 217); /* Skylit Steps #2f5661 */
  --sifted-sunbeam: oklch(0.7 0.057 101); /* Sifted Sunbeam #a6a077 */
  --sunlit-leaf: oklch(0.67 0.157 137); /* Sunlit Leaf #63ab42 */
  --lantern-amber: oklch(0.69 0.156 57); /* Lantern Amber #e27e21 */
  --gradient-djafar-tavern: linear-gradient(180deg, oklch(0.36 0.063 172) 0%, oklch(0.67 0.157 137) 12%, oklch(0.46 0.076 164) 30%, oklch(0.69 0.156 57) 48%, oklch(0.34 0.029 150) 64%, oklch(0.7 0.057 101) 80%, oklch(0.43 0.048 217) 100%);
}

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