InazumaDuskTenderHushedWistful

Asase Shrine under the First Stars

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%9d799430%ab7d8b52%8658a182%4b6e47100%755e4b

Why it works

To quiet a complementary collision you do not have to pull chroma down on both sides. This frame spans exactly as wide as the Forgotten Sword Cemetery — both 174° — but its middle is broken, so chroma has to be surrendered; and only the dusk sky surrenders any, the 53.95% of the frame that runs 0.050–0.060, while the 15.50% of green keeps 0.072 and the sakura crown and the shrine lamp keep 0.122 and 0.123. Chroma is taxed on area.

Only the sky pays chroma

Violet at 10.00%, pink at 21.53%, red at 22.42% — the 53.95% of the frame that is dusk sky measures 0.050, 0.053 and 0.060, while the green that covers only 15.50% measures 0.072. The frame's median chroma of 0.052 is an average dragged down by the sky, not a sign that the grass stepped back too; the picture says so plainly, a washed-out rose-grey overhead and honest green in the field beneath it. When a lead and an accent are complementary and both need area, thin only the large one and leave the small one untouched.

The same span, with the middle missing

The poles of both frames sit equally far apart: the Cemetery runs yellow 69° to blue 255°, this one green 142° to pink 328°, both 174°. The difference is entirely in the middle — over there four bands run end to end and even the thinnest rung holds 12.65%; here the two routes from green to pink narrow to 3.47% of yellow and 1.01% of blue. With no intermediate hues to pass the span along, its cost has to be paid elsewhere: median chroma 0.052 against 0.072, p99 0.108 against 0.132. What is expensive was never the span; it is the break.

Small areas are exempt

Apart from the grass, everything that keeps its chroma here is small. The sakura crown above the shrine has its most saturated cluster of 570 pixels at (0.51, 0.42), measuring 312° at chroma 0.122; the blue lamp before the shrine measures 266° at 0.123 across its most saturated 3%, on a blue band that covers just 1.01% of the frame. Both are more than twice the dusk sky's 0.053, and neither is loud, because neither is large. The same 0.12 is noise across half a picture and an accent on one tree crown and one lamp — before pulling chroma down, ask how big the field you are pulling down actually is.

Take these colours with you

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

/* Asase Shrine under the First Stars · Asase Shrine under the First Stars — Teyvat Palette */
:root {
  --dusk-rose: oklch(0.62 0.058 336); /* Dusk Rose #9d7994 */
  --afterglow-red: oklch(0.64 0.06 359); /* Afterglow Red #ab7d8b */
  --sakura-violet: oklch(0.54 0.122 312); /* Sakura Violet #8658a1 */
  --shrine-lamp-blue: oklch(0.56 0.123 266); /* Shrine Lamp Blue #5271bc */
  --meadow-green: oklch(0.5 0.072 142); /* Meadow Green #4b6e47 */
  --ledge-ochre: oklch(0.5 0.042 61); /* Ledge Ochre #755e4b */
  --gradient-asase-shrine: linear-gradient(180deg, oklch(0.62 0.058 336) 0%, oklch(0.64 0.06 359) 30%, oklch(0.54 0.122 312) 52%, oklch(0.5 0.072 142) 82%, oklch(0.5 0.042 61) 100%);
}

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