SumeruDayExpansiveClear-airedThriving

Sumeru City in Cyan Daylight

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%6db5d822%59abc846%6da9ba70%4c939a88%3b908d100%58a765

Why it works

A third way to build depth: let hue alone run monotone. Slice the frame into five bands of equal height and read them from the top — hue runs 230°→230°→217°→204°→192° without once doubling back, while lightness (0.74/0.69/0.70/0.57/0.58) and chroma (0.088/0.090/0.067/0.072/0.072) both reverse direction along the way. The Nostoi Region study pulled distance out of lightness and chroma running opposite ways; here those two knobs are held still, and the whole of the space is handed to a 38° shift of hue.

Hue is the only one that never doubles back

Read the five equal-height bands from the top: hue at 230°, 230°, 217°, 204°, 192° is the only one of the three channels running monotone. Lightness 0.74/0.69/0.70/0.57/0.58 doubles back twice, and chroma has all of 0.023 to move in, between 0.067 and 0.090. The Nostoi Region takes exactly the opposite route to the same end — lightness climbing 0.72 to 0.87, chroma falling 0.106 to 0.079, hue not moving the whole way. Aerial perspective never asked for all three knobs at once; it asks that any one of them genuinely refuse to double back: pick one, then hold the other two still.

The tree city's tree has not one green pixel

The great tree that carries the city has a crown filling a large mass from the upper left to the middle of the frame; inside that mass only 157 pixels fall into the green band 90°–165°, while 39,253 fall into the cyan band 165°–215°. Every green pixel in the whole upper half adds up to 786 — 1.4% of the frame's green. The crown's mean hue is 208°, a mere 22° from the 230° of the sky band directly overhead. This is a tree city in a rainforest and its tree is cyan — it stands in the slot of the hue queue nearest the sky, and whatever colour that slot holds, the subject holds; the material does not get a vote.

Local colour is issued only to the nearest slot

Green is 6.5% of the frame (57,271 pixels), and 63% of it is packed into the grass slope at the lower right, mean hue 148° at chroma 0.124; the frame's chroma peak, 0.170, is there too, sixty percent above the crown's 0.076. The tail of the queue has to keep one patch of colour the sky has not rewritten — otherwise 230° down to 192° is only a blue gradient, and nothing reads as "the further back, the closer to the sky." To build depth out of hue: fix the sky colour first, then put a foreground that states its local colour in full into the frontmost slot, so the viewer has something to compare against.

Take these colours with you

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

/* Sumeru City in Cyan Daylight · Sumeru City in Cyan Daylight — Teyvat Palette */
:root {
  --cumulus-white: oklch(0.97 0.012 196); /* Cumulus White #ecf8f8 */
  --zenith-blue: oklch(0.68 0.119 244); /* Zenith Blue #50a0dc */
  --far-ridge-haze: oklch(0.71 0.096 228); /* Far Ridge Haze #5aadd1 */
  --canopy-shade: oklch(0.43 0.049 219); /* Canopy Shade #2e5662 */
  --crown-cyan: oklch(0.65 0.076 208); /* Crown Cyan #519ca7 */
  --lake-teal: oklch(0.7 0.081 173); /* Lake Teal #66af9a */
  --slope-green: oklch(0.66 0.124 148); /* Slope Green #58a765 */
  --gradient-sumeru-city: linear-gradient(180deg, oklch(0.74 0.088 230) 0%, oklch(0.7 0.09 224) 22%, oklch(0.7 0.067 217) 46%, oklch(0.62 0.072 204) 70%, oklch(0.6 0.081 192) 88%, oklch(0.66 0.124 148) 100%);
}

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