Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Shapur Hotel in Cliff Shade
SumeruDayCool ShadeDampEveryday Trade

Shapur Hotel in Cliff 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%173f1a26%24563c38%4a3c5358%345c67100%2c3c34

Why it works

To separate ground from ceiling, the lightness account can go unspent. Measure Shapur Hotel's upper and lower edge with the same pair of rectangles: lightness reads 0.33 against 0.33 — identical — while chroma reads 0.076 against 0.024. This place has an entire cliff of moss overhead and not one inch of sky in the frame, so there is no light here capable of making a light-dark difference in the first place. The whole gap is charged to chroma, and what it reads as is "shade", not "dark". Its batch-mate «Wikala Funduq at White Noon» charges the same gap entirely to lightness (0.34 against 0.87 at the two ends). Both pictures separate — separating is the common term; which axis carries it is what decides what kind of place you are looking at.

01

Same lightness top and bottom, split by three times the chroma

The mossy cliff face behind measures L 0.33 / chroma 0.077 / hue 145°; the wooden deck filling the foreground measures L 0.34 / chroma 0.025 / hue 164°. That is 0.01 of lightness, 19° of hue, and 3.1 times the chroma. Across the frame lightness runs from 0.22 at p01 to 0.54 at p99 — a whole 720p picture living inside a band 0.32 wide — and it still does not go muddy, because the green band covers 56.92% at an average chroma of 0.059 while the foreground planks at 0.025 sit right on the achromatic line. When you paint a place with no direct light, do not build depth by darkening the foreground; open the chroma gap to three times and leave the lightness flat.

02

Lightness is leased to one slab of stone

The frame's median lightness is 0.34, and the flagstone square on the right measures L 0.45 — the only surface clearly above the median, and also the only blue: of that rectangle's 16,356 pixels, 14,687 (89.8%) fall inside 190°–270°, averaging hue 217° / chroma 0.048; widened to the whole frame, 190°–270° holds 80,107 pixels at 218° / 0.050. Of the brightest 4000 pixels, 1,388 are on this stone too (L 0.55 / chroma 0.058 / hue 223°). And yet there is not a single pixel of sky in this picture. «Bantan Sango Detective Agency in the Shade» measured the other end of the same fact — there the sky was down to one corner of the frame and its shadow-blue read 0.054 / 251°; here the sky is gone entirely and the shadow-blue reads 0.048 / 217°, and the bill arrives all the same. The lightness axis is not unusable here; there is only enough of it to lease to one surface. Everything else has to be charged to chroma.

03

The bunting is the only outsider, and it is not loud

The row of triangular buntings under the eaves is the only massed non-green colour in the picture: across the frame, 270°–345° totals 5,001 pixels (0.57%), averaging L 0.38 / chroma 0.043 / hue 313° — lower in chroma than the green band's 0.059. The red-robed traveller in the middle of the deck is smaller still: its most chromatic handful measures L 0.38 / chroma 0.097 / hue 17°, and all the warmth in the frame, 330°–90°, adds up to 4,082 pixels. A picture with 81.09% of itself inside the green, cyan and blue bands gets its entire "people trade here" from these two handfuls, neither of which reaches one percent. When you place an accent inside a large field of one family, you do not need to make it loud — small area and a unique hue are enough. Making it loud would take the shade away with it.

Take these colours with you

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

/* Shapur Hotel in Cliff Shade · Shapur Hotel in Cliff Shade — Teyvat Palette */
:root {
  --moss-cliff-green: oklch(0.33 0.077 145); /* Moss-Cliff Green #173f1a */
  --shell-roof-teal: oklch(0.41 0.07 158); /* Shell-Roof Teal #24563c */
  --bunting-violet: oklch(0.38 0.043 313); /* Bunting Violet #4a3c53 */
  --skylit-flagstone: oklch(0.45 0.048 217); /* Skylit Flagstone #345c67 */
  --deck-grey: oklch(0.34 0.025 164); /* Deck Grey #2c3c34 */
  --gradient-shapur-hotel: linear-gradient(180deg, oklch(0.33 0.077 145) 0%, oklch(0.41 0.07 158) 26%, oklch(0.38 0.043 313) 38%, oklch(0.45 0.048 217) 58%, oklch(0.34 0.025 164) 100%);
}

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