
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.
Peak chroma decides almost nothing about what colour a picture is: the vermilion banners, at 0.35% of the frame (band mean 0.109, peak 0.161), match or beat the sky's 70.33% (0.094 / 0.163) on every chroma statistic there is, and among the 4,000 most chromatic pixels both average 0.142. What settles the dominant colour is the size of that cluster — 3,229 against 678.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Favonius Cathedral under a Clear High Sky · Favonius Cathedral under a Clear High Sky — Teyvat Palette */
:root {
--zenith-blue: oklch(0.6 0.138 248); /* Zenith Blue #2d85ce */
--cloud-white: oklch(0.9 0.059 216); /* Cloud White #b2e9f7 */
--verdigris-spire: oklch(0.61 0.052 188); /* Verdigris Spire #5e8e89 */
--nave-stone: oklch(0.54 0.044 252); /* Nave Stone #5c7188 */
--portal-banner: oklch(0.63 0.115 26); /* Portal Banner #c56c64 */
--forecourt-stone: oklch(0.72 0.02 133); /* Forecourt Stone #a0a79b */
--plateau-grass: oklch(0.76 0.075 155); /* Plateau Grass #8bc09c */
--gradient-favonius-cathedral-exterior: linear-gradient(180deg, oklch(0.6 0.138 248) 0%, oklch(0.9 0.059 216) 22%, oklch(0.61 0.052 188) 40%, oklch(0.54 0.044 252) 62%, oklch(0.63 0.115 26) 80%, oklch(0.72 0.02 133) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.