LiyueDawnStillEtherealEastern

Jueyun Karst at Dawn

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

0%c2dde235%8ac4c360%44969182%285e6a100%1c4351

Why it works

Adjacent hues plus a lightness ladder make aerial perspective; the single warm colour, an ochre rock, appears across less than 5% of the frame and brings the whole painting alive — the emptiness and the finishing stroke of Chinese landscape painting, translated into colour.

The nerve to go monochromatic

The subject is held entirely inside the teal neighbourhood of 188°–225°, and its five layers are pulled apart by lightness alone (0.36 → 0.92). Fewer hues, more values: it is enough to carry a whole frame — and it is the most consistently underrated strategy in colour.

Aerial perspective is a lightness ladder

The further the ridge, the brighter and greyer it becomes as saturation decays with distance. This is the physics of atmospheric scattering translated into colour, and interface hierarchy (foreground / card / background) can borrow the same logic: the further back, the closer to the ambient colour.

A 5% complementary finishing stroke

The ochre rock (60°) is near the complement of the celadon (195°), but its area is confined strictly to the ridge lines. The correct use of complementary colours is never half and half. It is 95:5.

Take these colours with you

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

/* Jueyun Karst at Dawn · Jueyun Karst at Dawn — Teyvat Palette */
:root {
  --mist-white: oklch(0.92 0.015 200); /* Cloud Mist White #dae8e8 */
  --celadon: oklch(0.75 0.07 195); /* Celadon #77bcbc */
  --pine-jade: oklch(0.58 0.08 188); /* Turquoise Green #378a83 */
  --ochre-cliff: oklch(0.58 0.08 60); /* Ochre Rock #9d6f48 */
  --indigo-peak: oklch(0.4 0.055 225); /* Ink Mountain #224e5e */
  --gradient-liyue-jueyunjian-dawn: linear-gradient(170deg, oklch(0.88 0.03 210) 0%, oklch(0.78 0.06 195) 35%, oklch(0.62 0.08 190) 60%, oklch(0.45 0.06 215) 82%, oklch(0.36 0.05 225) 100%);
}

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