Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Sumeru Akademiya, Green at Full Sun
DayOpenComposedBurgeoning

Sumeru Akademiya, Green at Full Sun

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%3f86be24%2b857448%25664c68%a6926f84%bfbfac100%76ba4b

Why it works

Whether a band can buy the focus is not read from its mean but from how far it is spread inside itself. The blue band 210°–270° holds 40.21% at a mean chroma of 0.105, above the frame median of 0.095, yet its most chromatic 3% reaches only 0.127 and never touches the frame's p99 of 0.155. The green band 90°–165° holds 26.05% at a mean of 0.082, below the median, yet its most chromatic 3% reaches 0.160 — and of the frame's most chromatic 4000 pixels, 3990 are green while blue takes 7. The band that is 1.54 times larger and 1.28 times stronger on average takes not a single one of the strongest pixels. A mean reports how steady a band is; its top reports how split it is, and the money that buys a focus comes only out of the split.

01

The band with the highest mean takes none of the strongest pixels

Measure the two large bands separately: 210°–270° is 354072 pixels at a mean chroma of 0.105, 90°–165° is 229385 pixels at a mean of 0.082 — the first is 1.54 times larger and 1.28 times stronger. Yet take the most chromatic 3% of each and blue stops at 0.127 (10622 pixels) while green reaches 0.160 (6882 pixels). The frame's p99 is 0.155: blue cannot get there with even its top hundredth, and green has already crossed it with seven and a bit thousandths of itself. Of the most chromatic 4000 pixels, 3990 lie in 120°–150° at a mean of 0.162, and only 7 remain in 240°–270°. The ceiling of 0.192 goes to green not because green is stronger but because green is less uniform.

02

Green is split in two; the sky is not

The grass slope on the right, held under the canopy (from 0.78, 0.48), is 26450 pixels at L 0.46 / chroma 0.079 / hue 164°, and even its most chromatic 3% (794 pixels) stops at 0.147. The 90°–165° inside the lower quarter of the frame is 102098 pixels at L 0.70 / chroma 0.080, and the frame's peak of 0.192 falls there. The two patches of grass differ by 0.001 in mean chroma and by 0.24 in lightness — the band's mean is held down by its own shaded half while its top is pushed up by the sunlit half alone. The sky has no such structure: 210°–270° inside the upper quarter is 179509 pixels at a mean of 0.111 with a peak of only 0.152, and the zenith patch (from 0.35, 0.01) reads L 0.63 / 0.092. A sky is one surface; a field of grass is two.

03

Same city, four times the green

〈Sumeru City, Cyan Daylight〉is another corner of the same city: its green band holds only 6.50% at a mean chroma of 0.094, above its own median of 0.081, and the frame peak of 0.170 sat on green as well. Here green spreads to 26.05% and the mean falls instead to 0.082, sinking under the median of 0.095, while the peak climbs to 0.192. The wider a band is laid, the further its own shadowed parts drag its mean down, and the money for a focus can then come only from the top. So do not judge a band's strength by its average colour: measure its shaded face and its lit face separately — the further apart they are, the better it can afford the focus, and a band that will not come apart, here the 40.21% of sky, is only ground however large and however strong.

Take these colours with you

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

/* Sumeru Akademiya, Green at Full Sun · Sumeru Akademiya, Green at Full Sun — Teyvat Palette */
:root {
  --sunlit-sward: oklch(0.72 0.16 135); /* Sunlit Sward #76ba4b */
  --shaded-sward: oklch(0.46 0.079 164); /* Shaded Sward #25664c */
  --akademiya-zenith: oklch(0.6 0.111 245); /* Akademiya Zenith #3f86be */
  --canopy-teal: oklch(0.56 0.088 178); /* Canopy Teal #2b8574 */
  --eaves-gold: oklch(0.67 0.054 82); /* Eaves Gold #a6926f */
  --forecourt-pale: oklch(0.8 0.027 107); /* Forecourt Pale #bfbfac */
  --gradient-sumeru-akademiya: linear-gradient(180deg, oklch(0.6 0.111 245) 0%, oklch(0.56 0.088 178) 24%, oklch(0.46 0.079 164) 48%, oklch(0.67 0.054 82) 68%, oklch(0.8 0.027 107) 84%, oklch(0.72 0.16 135) 100%);
}

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