Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Hypostyle Desert in White Haze
SumeruDayVastDissolvingHushed

Hypostyle Desert in White Haze

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%bdccfe30%dbe4fd49%ebf8fc56%d5ddfb72%b8a5ca100%bc9eaa

Why it works

«Dainichi Mikoshi in White Glare» established that a fog's chroma gradient is ordered around the light source; here that rule returns with only the geometry of the source exchanged. There the light is a disc and the gradient spreads concentrically out to the corners. Here the light is a line — the horizon. Measured in full-width bands, y 0.46–0.52 reads L 0.97, chroma 0.015; the zenith band L 0.85, chroma 0.064; the band at your feet L 0.73, chroma 0.038. A line source's gradient has only two directions open to it, so the single gradient folds into an upper and a lower half. To paint deep atmosphere, do not build a single top-to-bottom gradient; fold it once at the horizon first.

01

The brightest line runs through the middle of the frame

Take the left third (x 0.02–0.32) and measure band by band from the top: the zenith is L 0.82, chroma 0.078; by y 0.49 it is L 0.98, chroma 0.009; by y 0.86 it has fallen back to L 0.70, chroma 0.047. Measure a different column (x 0.33–0.45) and the peak is in the same place: y 0.50 gives L 0.99, chroma 0.010. Hue turns there too — closing from 290° to 264°, then opening all the way to 340° once past the horizon. This is not a compositional preference, it is the atmosphere itself: the sightline to the horizon crosses many times more air than the sightline to the zenith, so the haze's own colour saturates there and eats everything, while the air overhead is thin. «Dainichi Mikoshi in White Glare» sets the false sun's core at L 0.99, chroma 0.005 against the corners farthest from the light at L 0.46, chroma 0.045 (both figures cited from that study) — there too the trough of chroma sits on the light. One direction suffices there, because outside a disc every way is outward; the horizon is a line, and a line has two sides, so the same gradient has to be run twice.

02

The farthest things are the least visible; the nearest are the deepest

The most distant ridges lie exactly along that brightest line — one stretch measures L 0.90, chroma 0.042, another L 0.94, chroma 0.027 — making them the palest solids in the picture. Meanwhile the colonnaded hall half-buried in sand at lower left is L 0.71, chroma 0.054, and the dunes along the bottom edge (y 0.90–0.98, 51,968 pixels) are L 0.73, chroma 0.038, hue 353°: the darkest thing and the thing whose hue has travelled furthest are both at your feet. Even the orange plume erupting into the zenith still reads as fire (L 0.90, chroma 0.051, hue 28°) because of where it sits — the horizon band carries a chroma of only 0.015, and the same plume moved down there would be wiped out.

03

Nostoi Region's formula only covers half a picture

Its two gradients run from a foreground lake at L 0.72, chroma 0.106 to the farthest mountain at L 0.87, chroma 0.079 — the farther, the lighter; the farther, the paler. Below the horizon this picture obeys exactly that, and with a wider swing: L 0.73, chroma 0.038 at your feet travelling to L 0.97, chroma 0.015 at the horizon. Above the horizon the whole run reverses, going back from 0.97, 0.015 to the zenith's L 0.85, chroma 0.064. So «farther is lighter and paler» is a formula for half a picture; the formula for the whole one is that half folded once at the horizon. Build that fold into a background gradient and the sky stops looking like a panel glued on.

Take these colours with you

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

/* Hypostyle Desert in White Haze · Hypostyle Desert in White Haze — Teyvat Palette */
:root {
  --zenith-haze: oklch(0.85 0.073 272); /* Zenith Haze #bdccfe */
  --horizon-white: oklch(0.97 0.015 219); /* Horizon White #ebf8fc */
  --far-ridge: oklch(0.9 0.042 274); /* Far Ridge #d5ddfb */
  --ember-plume: oklch(0.9 0.051 28); /* Ember Plume #fed2cb */
  --peak-violet: oklch(0.8 0.052 291); /* Peak Violet #bdb8dd */
  --buried-hall: oklch(0.71 0.054 309); /* Buried Hall #ab99bc */
  --near-dune: oklch(0.73 0.038 353); /* Near Dune Rose #bc9eaa */
  --gradient-hypostyle-desert: linear-gradient(180deg, oklch(0.85 0.073 272) 0%, oklch(0.92 0.036 271) 30%, oklch(0.97 0.015 219) 49%, oklch(0.9 0.042 274) 56%, oklch(0.75 0.057 309) 72%, oklch(0.73 0.038 353) 100%);
}

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