SumeruDayOpenBustlingClear-through

Treasures Street under a Seam of Sky

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

0%d1eef48%428dc528%508c3e42%37563860%714b36100%366174

Why it works

Separating top from bottom on hue requires aligning the chroma at both ends first. Measure Treasures Street's upper and lower edge with the same pair of rectangles: chroma reads 0.052 against 0.060 — 0.008 apart — while hue reads 159° against 233°, a gap of 74°. Widened to the whole frame it is cleaner still: 90°–165° of green holds 113,979 pixels at an average chroma of 0.062, and 190°–280° of cyan and blue holds 238,308 pixels at 0.064. The two great families are 0.002 apart in chroma and 85° apart in hue. Let the chroma go unequal and the hue gap gets read as "one is lighter, one is darker"; align it, and it reads as two sources of light in conversation — the seam of sky in the upper right, and its handover onto the flagstones underfoot.

Two great families, differing only in hue

Across the frame, 90°–165° of green holds 113,979 pixels averaging L 0.42 / chroma 0.062 / hue 145°; 190°–280° of cyan and blue holds 238,308 pixels at L 0.50 / chroma 0.064 / hue 230°. The two families stand 85° apart, 0.002 apart in chroma and 0.08 apart in lightness. That is why this picture can hand the top-to-bottom job to hue at all: the two ends nearly coincide on the other two axes, so those 85° cannot be misread as light and dark. Multi-hue palettes work the same way — put the two families you want talking on the same step of chroma first, then open the hue. Reverse the order and you will think you are changing hue while the viewer reads a change in brightness.

One strip of sky left, and the bill still reaches the ground

The sky in this picture is nothing but a strip in the upper right, wedged between the canopy and the roof eaves: that rectangle, 16% of the frame's width and 8% of its height, measures L 0.62 / chroma 0.113 / hue 244°. The flagstone road underfoot measures L 0.47 / chroma 0.057 / hue 229° — chroma down to 0.50 times, hue moved only 15° — and of that road rectangle's 49,536 pixels, 45,575 (92.0%) fall inside 190°–280°. The test from «Bantan Sango Detective Agency in the Shade» holds in Sumeru too: to tell whether a blue is sky or shadow, measure its chroma; one handover cuts it to less than half while the hue barely moves. So this road is not a grey road, it is a road dyed by the sky — it has a hue of its own, which is what qualifies it to talk to the green tiles.

The brightest and the most saturated moved apart

Of the brightest 4000 pixels, 3,812 are packed into the two cells in the upper right (L 0.93 / chroma 0.030 and 0.034) — the clouds inside the seam. Of the most chromatic 4000, 2,514 are green tiles in 120°–150° (L 0.58 / chroma 0.128), and the frame's chroma maximum of 0.179 is in the green band too, while the blue band tops out at 0.158. The lightness ceiling goes to the sky and the chroma ceiling to the roofs; neither one owns two axes at once. That is precisely the condition under which those 85° read as conversation rather than domination. As for the street's own colours: warmth across the frame, 330°–90°, comes to just 17,001 pixels (1.93%), averaging L 0.45 / chroma 0.061 / hue 50° — orange robes, yellow flowers and stall pennants together are under a fiftieth of the picture. To place an accent inside a hue conversation, stand it on a third hue and hold it under 2% of the area; then it will not interrupt.

Take these colours with you

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

/* Treasures Street under a Seam of Sky · Treasures Street under a Seam of Sky — Teyvat Palette */
:root {
  --eaves-cloud-white: oklch(0.93 0.032 211); /* Cloud White above the Eaves #d1eef4 */
  --seam-sky-blue: oklch(0.62 0.113 244); /* Seam-Sky Blue #428dc5 */
  --eave-edge-jade: oklch(0.58 0.128 139); /* Eave-Edge Jade #508c3e */
  --leaf-tile-green: oklch(0.42 0.062 145); /* Leaf-Tile Green #375638 */
  --market-warm: oklch(0.45 0.061 50); /* Market Warmth #714b36 */
  --skylit-roadstone: oklch(0.47 0.057 229); /* Skylit Roadstone #366174 */
  --gradient-treasures-street: linear-gradient(200deg, oklch(0.93 0.032 211) 0%, oklch(0.62 0.113 244) 8%, oklch(0.58 0.128 139) 28%, oklch(0.42 0.062 145) 42%, oklch(0.45 0.061 50) 60%, oklch(0.47 0.057 229) 100%);
}

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