
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.
Aerial perspective need not be a gradient; a single threshold will do. Measure Ashavan Realm from the nearest canopy to the farthest ridge and five readings come back 222°, 224°, 226°, 219°, 238° — the whole depth of the picture wobbles inside 19° and never forms a ladder. All of the "far" is paid for by one step at the bottom edge of the frame: that band of grass is 157°, the lower-left corner 139°, a stride of 65°. 〈Sumeru City in Cyan Daylight〉walked a monotone 38° gradient across five horizontal bands, 230°→192°; Ashavan Realm skips the gradient entirely and keeps only the reference. Distance is something you compare, not something you count.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Ashavan Realm, Deep in the Mist · Ashavan Realm, Deep in the Mist — Teyvat Palette */
:root {
--far-ridge-haze: oklch(0.78 0.103 238); /* Far Ridge Haze #75c1f2 */
--valley-mist: oklch(0.67 0.096 231); /* Valley Mist #50a0c6 */
--canopy-teal: oklch(0.61 0.092 222); /* Canopy Teal #378fab */
--hill-cyan: oklch(0.68 0.095 226); /* Hill Cyan #4fa4c5 */
--near-green: oklch(0.64 0.103 157); /* Threshold Green #519f73 */
--corner-verdure: oklch(0.83 0.169 116); /* Corner Verdure #c2d43d */
--gradient-ashavan-realm: linear-gradient(180deg, oklch(0.78 0.103 238) 0%, oklch(0.67 0.096 231) 26%, oklch(0.61 0.092 222) 55%, oklch(0.64 0.103 157) 82%, oklch(0.83 0.169 116) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.