Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Fontaine Research Institute of Kinetic Energy Engineering Region in Clear Daylight from Above
FontaineDayLoftyLucidCraggy

Fontaine Research Institute of Kinetic Energy Engineering Region in Clear Daylight from Above

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%a9dcfd18%8cd5ff34%3061d852%5c96c176%51aaa2100%74c07d

Why it works

The sky you can see in a picture is usually not the sky lighting it. This aerial view has its top edge pressed against the horizon, and the whole of that sky measures L 0.87 / chroma 0.070 — 0.075 / 0.073 / 0.073 taken left, centre and right, with not one pixel past 0.099. Meanwhile 3610 of the frame's 4000 most chromatic pixels crouch on the unlit rock face of the central spire at L 0.53 / chroma 0.191 / hue 264°, peaking at 0.234. The shaded face is 2.7 times more saturated than its only light source, because what colours it is the zenith outside the frame. Do not pick a shadow's colour off the sky in your picture — that reading has already been rewritten by the air.

01

The most saturated patch is a shadow, not the sky

Of the 4000 most chromatic pixels, 3610 fall in 240°–270° at a mean of L 0.53 / chroma 0.191 / hue 264°, peak point (0.42, 0.19) — the unlit rock face of the central spire. The lit face of the same spire measures L 0.65 / chroma 0.089 / hue 242°: taking the light made it paler, and pulled its hue 22° back. Nothing on the sky's side comes close. The full top strip measures L 0.87 / chroma 0.070; split left, centre and right it is 0.075 / 0.073 / 0.073, and its single most chromatic pixel reaches only 0.099. The frame's chroma ceiling of 0.234 is 2.4 times the highest value anywhere in that sky.

02

The frame caught the horizon, not the zenith

This is an aerial view whose top edge touches the horizon, so the only sky left inside it is the strip that came through a full thickness of atmosphere — which is why it is pale. Same Fontaine, same sun: Beryl Region tilts the camera up, and its central zenith rectangle measures chroma 0.190, nearly three times the 0.070 here. The shaded rock is not listening to this strip; it is listening to that 0.190 zenith, which simply was not photographed. Land of Lower Setekh in Thin Daylight measures the same thing in another nation: sky at 274° / chroma 0.051, shaded cliff at 0.141, a factor of 2.8. Here it is 0.070 to 0.191, a factor of 2.7. And Bantan Sango Detective Agency in the Shade — "skylight loses more than half its chroma passing hands once" — does not conflict: its denominator is the sky actually lighting that ground, not the strip nearest the horizon inside the frame.

03

A shadow can buy the highest point, not a whole floor

This picture's Cmax of 0.234 is the highest of the six Fontaine scenes, and yet its chroma p99 is only 0.163 — identical to Morte — and its median of 0.094 sits 0.001 from Belleau's 0.093. One shaded rock face bought the most saturated point in the frame and moved the picture's density not at all. So the two can be purchased separately: for one intensely saturated point, give it a shaded plane rather than turning up its own saturation — it reads far more real. For a dense picture, that is a different budget and only area will buy it (here 10.14% of green averaging 0.118 and 10.93% of cyan at 0.085 together barely hold the median up to 0.094). And whichever you are buying, do not pick the colour off that sky.

Take these colours with you

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

/* Fontaine Research Institute of Kinetic Energy Engineering Region in Clear Daylight from Above · Fontaine Research Institute of Kinetic Energy Engineering Region in Clear Daylight from Above — Teyvat Palette */
:root {
  --haze-sky: oklch(0.87 0.07 238); /* Haze Sky #a9dcfd */
  --far-sea: oklch(0.84 0.094 235); /* Far Sea #8cd5ff */
  --ridge-shade: oklch(0.53 0.191 264); /* Ridge Shade #3061d8 */
  --lit-rock: oklch(0.65 0.089 242); /* Lit Rock #5c96c1 */
  --shoal-pool: oklch(0.68 0.086 188); /* Shoal Pool #51aaa2 */
  --slope-green: oklch(0.74 0.121 147); /* Slope Green #74c07d */
  --gradient-fontaine-research-institute-of-kinetic-energy-engineering-region: linear-gradient(180deg, oklch(0.87 0.07 238) 0%, oklch(0.84 0.094 235) 18%, oklch(0.53 0.191 264) 34%, oklch(0.65 0.089 242) 52%, oklch(0.68 0.086 188) 76%, oklch(0.74 0.121 147) 100%);
}

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