LiyueNightEnclosedSilentUpended

Inverted City in Faint Light

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 200° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%22253842%1d1d3078%16152a100%161327

Why it works

When lightness runs out, chroma takes over: the whole frame is packed into a twelve-point band of lightness (L 0.18→0.30), 88% of its pixels are one and the same violet at a median chroma of 0.038 — so the embers on the right cliff buy, with a peak chroma of 0.183, the attention that lightness could not afford.

A whole city inside twelve points

Lightness runs from 0.18 at p01 to 0.30 at p99: everything the frame has to say fits into twelve points, at a median chroma of 0.038 — all but achromatic. This is not underexposure; it is composing after switching two dimensions off. Enkanomiya is the reverse: there chroma was capped at 0.081 and lightness stretched a 0.58 ladder. Together the two are the same rule from both ends — one dimension has to be left usable, and which one is the scene's decision.

The haze is lighter than the object, so the silhouette is subtracted

The upended tower measures L 0.21; the brightest haze, just to its right, L 0.27 — the haze is brighter. The tower is not seen because light fell on it, but because it is subtracted from a brighter fog. If you want shape in a very dark scene, lift the background haze six points before you reach for a light source: what stands in front becomes a silhouette on its own.

An ember at 0.183, almost five times the median

The embers on the right cliff measure L 0.54, chroma 0.114, hue 56°, peaking at 0.183 — against a frame median of 0.038, a difference of nearly five times. And every warm pixel in the frame together comes to under 0.02% of it. When lightness has nothing left, chroma is the only dimension that can still speak. Which says the reverse too: in an almost achromatic frame, any small saturated patch becomes an unignorable lead, so where you put it has to be a decision.

Take these colours with you

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

/* Inverted City in Faint Light · Inverted City in Faint Light — Teyvat Palette */
:root {
  --abyss-violet: oklch(0.21 0.04 285); /* Abyss Violet #16152a */
  --settled-haze: oklch(0.241 0.035 282.6); /* Settled Haze #1d1d30 */
  --haze-ridge: oklch(0.27 0.037 277); /* Haze Ridge #222538 */
  --ember: oklch(0.54 0.114 56); /* Ember #a05b22 */
  --gradient-inverted-city: linear-gradient(200deg, oklch(0.27 0.037 277) 0%, oklch(0.241 0.035 282.6) 42%, oklch(0.21 0.04 285) 78%, oklch(0.201 0.039 289.4) 100%);
}

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