
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.
The same colour appears twice in one picture, once as background and once as subject: the band of sky across the top measures 249° / chroma 0.120 / L 0.62, and the shaft of light rising from the monument under the tree measures 255° / chroma 0.150 / L 0.61 — 6°, 0.030 and 0.01 apart. What makes the shaft the subject is not in the shaft; it is in the ring pressed against it: the shaded face of the crown, L 0.36. To make a colour a focal point, don't change it first — change its neighbours.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Symbol of Mondstadt's Hero at Shaded Noon · Symbol of Mondstadt's Hero at Shaded Noon — Teyvat Palette */
:root {
--noon-blue: oklch(0.62 0.12 249); /* Noon Blue #468bcb */
--monument-shaft: oklch(0.61 0.15 255); /* Monument Shaft #3d84db */
--sunlit-canopy: oklch(0.73 0.112 150); /* Sunlit Canopy #71bc82 */
--canopy-underside: oklch(0.36 0.049 190); /* Canopy Underside #184543 */
--trunk-shadow: oklch(0.45 0.063 233); /* Trunk Shadow #2e5b73 */
--meadow-green: oklch(0.76 0.126 133); /* Meadow Green #91c26d */
--gradient-symbol-of-mondstadts-hero: linear-gradient(180deg, oklch(0.62 0.12 249) 0%, oklch(0.73 0.112 150) 20%, oklch(0.36 0.049 190) 52%, oklch(0.61 0.15 255) 68%, oklch(0.76 0.126 133) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.