Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Naganohara Fireworks in the Shade
InazumaDayClearShadedUnhurried

Naganohara Fireworks in the Shade

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%4488c412%1e775b34%33584f56%20506a76%26323a100%bfa8a0

Why it works

Man-made colour need not invent a single new hue; it need only halve the chroma. The roof at 177° sits beside the canopy's 167°, the shop's noren at 236° beside the sky's 247° — and the canopy's most saturated 3% reaches 0.146 where the whole roof peaks at 0.055. This is the underside of the chroma ceiling: in «Aaru's Shut in White Light» the bare paving reads 0.039 and the inlaid slab a person set into it 0.109, so there it is crossing the line that marks a thing as made. Here the living things out-saturate the people, and made colour can only stay beneath it.

01

The roof is not in the green band

The eye files this roof as the largest patch of green in the frame; measurement does not put it in the green band at all. The tiles read 177°, on the far side of the 165–210° blue-green band that covers 20.9% of the picture. Real green, 90–165°, is only 2.52%, and its most vivid parts appear in exactly two places: the canopy at upper left, and a few tufts of grass in the flagstone cracks. Tiles and leaves are only 10° apart — the eye has not mistaken the colour. What silences this huge field of green is chroma: 0.046, less than half the canopy's. To quieten a large area you need not change its hue; press its chroma below 0.05 and that is enough.

02

Same lightness, half the chroma

The roof on the right measures L 0.51 — exactly the canopy's lightness — yet chroma 0.042 against 0.094, precisely half. Take the most saturated 3% of each: canopy 0.146, grass in the cracks 0.148, and the two roof planes only 0.051, peaking at 0.055 and 0.050 — it is not the shade that dulls the roof. The roof simply has no high-chroma register available to it anywhere. The frame's chroma maximum, 0.182, lands at (0.48, 0.77): a hundred-odd pixels of weed between the flagstones, more than three times the whole roof's peak. The same ceiling is read the other way up in «Aaru's Shut in White Light» — there the bare paving measures 0.039 (peak 0.075) and the obelisk shaft 0.043 (peak 0.070), while the flowered slab a person inlaid into the ground reaches 0.105–0.108, peaking at 0.140 (figures quoted from that study) — and there it is crossing the line that marks a thing as made. The environment decides the sign: desert stone has no colour of its own, so people are its only colourists; the trees of Inazuma are alive, so anything built can only be duller than they are. Ask first whether the environment already holds something more saturated than people can make, then decide which side of the ceiling your made colour belongs on.

03

The Inazuman shop does not shout; the Liyue one does

Both are shops. Mingxing Jewelry hangs vermilion 4° (chroma 0.074) and signboard gold 95° across its frontage — hues its surroundings did not contain, an identity declared by hue. This one in Naganohara brings in no new hue at all: the noren at 236°, the round crest on the gable at 254°, two paper lanterns at chroma 0.026 and 0.022 — the entire shopfront kit stays inside the sky's own 247° band, merely a step darker and half as strong. The only thing allowed to be saturated is the indigo display cloth on the bench under the awning, whose brightest 96 pixels reach 0.121. This is a positioning decision, not a matter of taste: borrow the environment's hue and your object belongs to the place; bring in a hue the environment does not have, and only then does it belong to you.

Take these colours with you

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

/* Naganohara Fireworks in the Shade · Naganohara Fireworks in the Shade — Teyvat Palette */
:root {
  --roof-moss: oklch(0.43 0.046 177); /* Roof Moss #33584f */
  --canopy-green: oklch(0.51 0.094 167); /* Canopy Green #1e775b */
  --noren-blue: oklch(0.41 0.068 236); /* Noren Blue #20506a */
  --zenith-blue: oklch(0.61 0.114 247); /* Zenith Blue #4488c4 */
  --timber-shade: oklch(0.31 0.022 237); /* Timber Shade #26323a */
  --sunlit-flagstone: oklch(0.75 0.029 41); /* Sunlit Flagstone #bfa8a0 */
  --crack-grass: oklch(0.73 0.148 134); /* Grass in the Cracks #80bb56 */
  --gradient-naganohara-fireworks: linear-gradient(180deg, oklch(0.61 0.114 247) 0%, oklch(0.51 0.094 167) 12%, oklch(0.43 0.046 177) 34%, oklch(0.41 0.068 236) 56%, oklch(0.31 0.022 237) 76%, oklch(0.75 0.029 41) 100%);
}

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