
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.