Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Scions of the Canopy Secret Space, Green Night
NatlanNightDeep GreenCrouchedSingle Light

Scions of the Canopy Secret Space, Green Night

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%171a1038%152e2d58%4a5f7c72%89a0a8100%143710

Why it works

"Glowing" does not require a big lead on any single channel. This gate's chroma of 0.054 is only 2.3 times the frame's median of 0.023, and its lightness of 0.48 only 2.1 times the median of 0.23 — both far short of the 5.2× chroma of the floating leaves in Ashveil Peak, Cavern Glow. Yet it is the one thing in this picture that reads as a light source, because in that cavern each candidate held only one channel: the opening took lightness while its chroma of 0.034 sat exactly on the median, and the leaves took chroma while staying as dark as everything around them. Two channels leading by two beats one channel leading by five.

01

Two 2× beats one 5×

The frame's median chroma is 0.023 and its median lightness 0.23; the gate measures L 0.48 / chroma 0.054 / hue 257°, putting it 2.1× and 2.3× above those medians on the two channels. The light churning inside it is a shade richer: of the 4000 most chromatic pixels, 1961 land at (0.36, 0.51), averaging chroma 0.089 / hue 276°. In Ashveil Peak, Cavern Glow each candidate held only one channel — the opening at L 0.79 but chroma 0.034, exactly its own median, and the floating leaves at chroma 0.178 (5.2× the median) but no brighter than their surroundings. Glow is a position in two dimensions, not the height of one bar: before trying to make something light up, check where it ranks on the lightness list and on the chroma list separately, then decide which one to top up.

02

Two "orange" shrubs measure 118° and 123°

There is a shrub in the cleft to the left of the gate and another on the grass slope to its right; both read as warm orange to the eye. They measure L 0.20 / chroma 0.033 / hue 118° and L 0.22 / 0.038 / 123° — green. Search the whole frame for warmth in 15°–45° and it returns 2 pixels out of some nine hundred and twenty thousand sampled. The green in this night scene is not the green of any material but the green of the light: an ambient 140° has annexed every object's local colour, including the two things that had the best claim to break out of it. In Wenut Tunnels, Sand Glow the empty span is 165°–345°, and it is empty because the cave has no second light source. Here, 3827 of the frame's 4000 brightest pixels crowd onto the strip of ground at (0.36, 0.71), averaging L 0.69, and nothing else in the picture is lit at all — an open-air night running the cave's arithmetic.

03

The richest surface is spread on the floor

The most chromatic surface in the frame is not the gate but the grass slope in front of it: L 0.30 / chroma 0.076 / hue 142°, four tenths above the gate's 0.054 and far larger in area. It does not steal the scene because it lies flat on the ground at a lightness of only 0.30 — first on the chroma list, last on the lightness list. The huge trunk on the right takes the other route: L 0.28 / chroma 0.031 / hue 192°, ranking on neither list, so it stays a silhouette. The same holds in interfaces: to keep a saturated colour from pulling focus, hold it at low lightness and spread it wide and it falls back to being a ground; to make it pull focus, top up the other channel, not the same one.

Take these colours with you

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

/* Scions of the Canopy Secret Space, Green Night · Scions of the Canopy Secret Space, Green Night — Teyvat Palette */
:root {
  --night-rock-green: oklch(0.21 0.018 122); /* Night-Rock Green #171a10 */
  --trunk-teal: oklch(0.28 0.031 192); /* Great-Trunk Teal #152e2d */
  --slope-grass: oklch(0.3 0.076 142); /* Slope Grass #143710 */
  --gate-blue: oklch(0.48 0.054 257); /* Gate Blue #4a5f7c */
  --gate-violet: oklch(0.48 0.089 276); /* Gate-Core Violet #50588f */
  --threshold-white: oklch(0.69 0.029 222); /* Threshold White #89a0a8 */
  --gradient-tribal-secret-space-scions-of-the-canopy-location-context: linear-gradient(180deg, oklch(0.21 0.018 122) 0%, oklch(0.28 0.031 192) 38%, oklch(0.48 0.054 257) 58%, oklch(0.69 0.029 222) 72%, oklch(0.3 0.076 142) 100%);
}

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