NatlanNightMoon BlueCrouchedOne Lantern

People of the Springs Secret Space, Moonlit Blue

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%09275448%abc3c660%687f9c78%052232100%193042

Why it works

When the environment shares the protagonist's hue, adding saturation buys nothing. Here 75.32% of the frame falls inside 210°–270°: the grass on the slope measures 237°, the path underfoot 244°, and the light coming out from under the timber eave is itself 253° — the gate and everything it has to stand against belong to one family of blue. Its chroma of 0.052 is only 0.005 above the frame's median of 0.047, which is to say it added nothing; what separates it is a lightness of 0.59 against the median of 0.29, exactly double. Ashveil Peak at Dusk is the same fact inverted — there the lightness channel was taken up by atmospheric depth, so "glowing" could only be said in chroma. Here hue and chroma are both taken up by the night, leaving only lightness, and it has to be pushed to double.

The grass is not green and the path is not earth-coloured

The grass on the left slope measures L 0.24 / chroma 0.046 / hue 237°, the trodden path in front L 0.30 / 0.044 / 244°, the boulders on either side L 0.28 / 0.090 / 259° — three materials that ought to belong to three different hue families sit less than 22° apart, all inside the blue band, and that 210°–270° band alone covers 75.32%. Search the whole frame for warmth in 15°–90° and it yields 14066 pixels (1.60%), nearly all of them on the lantern hung under the eave (L 0.50 / chroma 0.085 / hue 59°) and on the boards it lights (L 0.42 / 0.067 / 45°). Two hues are left in this picture: the night's, and one lantern's.

A 0.005 chroma lead buys nothing

The gate measures chroma 0.052 against the frame's median of 0.047 — a margin of 0.005. In the same set, the gate at the Scions' site runs 2.3 times its own frame's median; here it is 1.1. The counter-example is right there on both sides: those two boulders measure chroma 0.090, nearly twice the gate, and nobody mistakes them for a light source. Once the ground colour itself carries chroma, chroma stops marking "who is glowing" — it marks "this is night", everybody is using it, and nobody stands out by it.

Lightness has to pay double

The gate measures L 0.59 against the frame's median lightness of 0.29 — 2.0 times. Its core, at (0.50, 0.56), reaches L 0.80 while the frame's lightness p99 is only 0.69: the core of the gate is brighter than 99% of this picture. Across the other four frames in this set the same gate runs 2.1, 1.8, 1.5 and 1.3 times its frame's median, and only here and in the darkest frame of all is lightness used to the hilt. The rule is plain: the fewer channels available, the wider the remaining one has to open. The same holds for dark interfaces — the moment the ground colour carries a hue, stop reaching for saturation to emphasise and open the lightness gap straight out to twice the median.

Take these colours with you

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

/* People of the Springs Secret Space, Moonlit Blue · People of the Springs Secret Space, Moonlit Blue — Teyvat Palette */
:root {
  --moonrock-blue: oklch(0.28 0.09 259); /* Moonrock Blue #092754 */
  --night-grass: oklch(0.24 0.046 237); /* Night Grass #052232 */
  --path-teal: oklch(0.3 0.044 244); /* Path Teal #193042 */
  --gate-light: oklch(0.59 0.052 253); /* Gate Light #687f9c */
  --gate-core: oklch(0.8 0.026 208); /* Gate Core #abc3c6 */
  --eave-lantern: oklch(0.5 0.085 59); /* Eave Lantern #87562e */
  --gradient-tribal-secret-space-people-of-the-springs-location-context: linear-gradient(180deg, oklch(0.28 0.09 259) 0%, oklch(0.8 0.026 208) 48%, oklch(0.59 0.052 253) 60%, oklch(0.24 0.046 237) 78%, oklch(0.3 0.044 244) 100%);
}

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