
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.