Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Ashavan Realm, Deep in the Mist
SumeruDayDeepDampHushed

Ashavan Realm, Deep in the Mist

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%75c1f226%50a0c655%378fab82%519f73100%c2d43d

Why it works

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.

01

Not one green pixel in the canopies or the hills

The two nearest crowns — from (0.28, 0.58) and from (0.60, 0.60) — measure 222° and 224°, and each returns nothing at all in the 90°–165° green window. The grassy hill further in (from 0.40, 0.24) is 226°, again empty; the slope on the right is 219°; the ridges along the top edge are 238°. This is a rainforest thick with giant trees, and everything in it that reads as green sits inside those 19° of blue, 219°–238°. The frame's real green amounts to 65675 pixels, 7.13% — and 59122 of them, a flat ninety per cent, are packed into the bottom 16% of the frame. Above that strip the entire picture holds 6553 green pixels.

02

One 65° stride buys the whole picture's depth

The band of grass along the bottom (from 0.28, 0.86) measures 157°; the sunlit shrubs in the lower-left corner 143°, or 139° / chroma 0.122 with the green window taken alone — and the frame's peak of 0.188 is in that corner, where 3663 of the 4000 most chromatic pixels fall inside 90°–120°, centred on (0.08, 0.97). Between it and the canopy immediately above at 222° there is no transition, only a cut: everything above belongs to the air's hue, everything below to the ground's own. Meanwhile 3961 of the 4000 brightest pixels sit along the top edge at L 0.93 / chroma 0.055 / 214°. Once near and far each hold an extreme, the 19° in between has nothing left to explain.

03

0.08% achromatic: mist is not grey

On the same ruler (the bench's C<0.025), 〈Dragonspine, Autumn Snow〉is 39.47%, 〈Galesong Hill in Sun and Pine Shade〉8.83%, 〈Minlin under Cloud White〉6.25% — and Ashavan Realm is 0.08%, nearly eighty times less than the lowest of them, in a picture buried in mist end to end. That mist measures hue 231° / chroma 0.096 and covers 74.08% of the frame. It brightens with distance, reaching L 0.93 at the top edge, and never once arrives at neutral. If you want a large surface that reads as air, do not drift it toward grey or white: nail one hue, let only lightness climb, and put one unremade local colour at the very front. The gradient step can be skipped.

Take these colours with you

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.