Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Favonius Cathedral under a Clear High Sky
MondstadtDayLoftySolemnWide open

Favonius Cathedral under a Clear High Sky

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%2d85ce22%b2e9f740%5e8e8962%5c718880%c56c64100%a0a79b

Why it works

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.

01

The banners are exactly as saturated as the sky

The whole frame holds only 3,642 pixels between 330° and 60°, nearly all of them in the two vermilion banners hung above the side portals: L 0.63, chroma 0.114 and 0.116, hue 26° and 25°, peaks of 0.148 and 0.161. Their band mean of 0.109 is higher than the 0.094 of the blue band that occupies 70.33% of the frame, and their peak of 0.161 sits 0.002 below the blue band's 0.163. Among the 4,000 most chromatic pixels, sky and banners both average 0.142. Every way of measuring "which is more saturated" returns a tie, and this is still unmistakably a blue picture.

02

The cathedral casts no vote of its own

The towers and gable of the west front measure L 0.52 to 0.56, chroma 0.039 to 0.048, hue 249° to 256°. The frame's lightness median is 0.67 and its chroma median 0.071, so the subject falls below the median on both channels, and its hue belongs to the same family as the zenith's 248°. The forecourt paving at its feet goes further: L 0.72, chroma 0.020, under the 0.025 achromatic line, and the main source of the frame's 19.15% achromatic pixels. The blue of this picture is funded entirely by the sky's 70.33%. The landmark standing dead centre casts no vote on what colour the picture is; what it relies on is position and symmetry.

03

Focus and dominant colour are two different things

In Frost Moon, Earthlit, a warm accent covering 0.24% of the frame measures chroma 0.063 — lower than the cold blue arc beside it at 0.072 — and is still, unshakeably, the focus of the picture: focus is paid for by being the lone hue. The banners here are the same lone hue, and the eye does land on them. They win no share of the dominant colour at all, because that is paid for by the size of the cluster near the ceiling — 3,229 against 678. To judge the character of a palette, do not use an eyedropper to compare peaks. Circle the most chromatic cluster and look at what it grows on and how big it is.

Take these colours with you

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.