FontaineDayEtherealFar-OffHushed

Court of Fontaine Region in Distant Haze

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%57a5fc14%e9fdfe38%75c4f758%589fd986%3680b7100%82d270

Why it works

Haze does not take chroma away, it flattens chroma into a constant. Court of Fontaine Region is 95.96% blue: the far mountains measure chroma 0.106, the Court's stone 0.112, the near water 0.112 — three distances, three materials, a spread of 0.006, every hue shut inside 238°–245°, while lightness walks from 0.79 down to 0.58, a range of 0.21. Which is why the haziest of the six Fontaine scenes carries a median chroma of 0.105, higher than haze-free Belleau at 0.093 and Morte at 0.091. To paint haze, do not desaturate everything; pull each thing's chroma onto the same value and let lightness carry distance alone.

Three distances, one chroma

The jagged range along the horizon measures L 0.79 / chroma 0.106 / hue 238°. The stone of the Court standing on the water measures L 0.68 / 0.112 / 245°. The water at your feet measures L 0.58 / 0.112 / 244°. From farthest to nearest, chroma moved 0.006, hue moved 7°, lightness moved 0.21. Nostoi Region in Hazy Daylight — the same nation, the same kind of haze — splits depth into two opposing gradients, near water at 0.106 falling 0.027 to 0.079 at the far mountains while lightness rises 0.15 from 0.72 to 0.87, and warns that dropping chroma alone "looks like a film of grey." This frame walks the other half of that sentence: throw the chroma gradient out entirely, keep only lightness, and depth still stands — over a longer distance and through thicker air.

The one thing in front of the air covers 0.47%

The single most chromatic pixel in the frame measures 0.180 at (0.56, 0.98) — the very bottom edge, a tuft of grass at the camera's feet. The green band covers just 0.47%, and its most saturated 3% (124 pixels) averages L 0.79 / chroma 0.155 / hue 140°, against a whole-frame median of 0.105 and a p99 of only 0.154: less than half a percent of the picture holds up its ceiling single-handed, for one reason — it is the only thing here not standing behind the air. The evidence from the other side is harder still: search the whole frame for warmth in 330°–90° and not one pixel matches. Every roof and every span of bridge in this city has had its hue swapped out by the same air.

What haze confiscates first is darkness

The frame's lightness p01 is 0.54: even the darkest one percent sits above 0.54. Court of Fontaine in Open Daylight paints the same city from close range, and the wall that reads as white stone there measures L 0.53, a full 0.19 below that picture's own median — a conspicuously dark plane. Retreat to this distance and the city's stone rises to 0.68, carrying the same 0.112 of chroma as the water in front of you, no longer an extreme at either end. Haze lifts the floor and lowers the ceiling (p99 0.154, the lowest of the six Fontaine scenes), closing from both sides at once. So what a far distance needs is narrowness, not paleness: decide how much lightness and chroma range that distance is allowed, then arrange near and far inside that narrow band.

Take these colours with you

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

/* Court of Fontaine Region in Distant Haze · Court of Fontaine Region in Distant Haze — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.71 0.15 253); /* Zenith Blue #57a5fc */
  --high-cloud: oklch(0.98 0.021 199); /* High Cloud #e9fdfe */
  --far-ridge: oklch(0.79 0.106 238); /* Far-Ridge Haze #75c4f7 */
  --court-stone: oklch(0.68 0.112 245); /* Court Stone #589fd9 */
  --near-bay: oklch(0.58 0.112 244); /* Near Bay #3680b7 */
  --shore-green: oklch(0.79 0.155 140); /* Shore Green #82d270 */
  --gradient-court-of-fontaine-region: linear-gradient(180deg, oklch(0.71 0.15 253) 0%, oklch(0.98 0.021 199) 14%, oklch(0.79 0.106 238) 38%, oklch(0.68 0.112 245) 58%, oklch(0.58 0.112 244) 86%, oklch(0.79 0.155 140) 100%);
}

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