FontaineDayCrispCleanOrdered

Court of Fontaine in Open Daylight

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%66b4fe22%bceafa55%4c96cd80%467190100%5798a5

Why it works

White is a ratio, not a colour: on the wall of the stone keep standing in deep water at right, 3 pixels out of ten thousand are neutral and every other one sits at 241° — the same hue as the 243° sea beneath it, with the chroma cut to six tenths (0.069 against 0.111). To make a white inside a frame already full of colour, don't push it towards neutral. Let it inherit its neighbour's hue and halve the chroma instead.

Three white pixels in ten thousand

The water-facing wall of the keep at right, roughly ten thousand pixels, averages L 0.53, chroma 0.069, hue 241° — and exactly 3 of those pixels fall below chroma 0.025. Five more walls across the city — the central tower, the curved buttress, the retaining wall of the round terrace on the left — all land inside the same small box: L 0.52–0.62, chroma 0.067–0.082, hue 234–244°. Not one face is grey. Neutral pixels are 4.26% of the frame, and the brightest 4000 are packed at L 0.98, chroma 0.024 — that is the cloud, not the city. When this city reads as white stone, absolute values are not what is being read.

The white is 0.19 darker than its surroundings

The stone measures L 0.53, the deep water immediately behind it L 0.65, and the frame's median lightness is 0.72 — this "white" city sits 0.19 below the middle. In Qiongji Estuary at Noon, the cliff face that reads as "black" sat 0.20 below that frame's median. Nearly the same deficit, read one way as black and the other as white: a lightness gap is enough to say "there is a separate surface here" and nothing more about what colour that surface is. That study argued on lightness. This one has to change axis.

Halving the chroma is only half of it

The shallow shelf at the city's foot carries chroma 0.069 too — identical to the stone — and still reads as teal rather than white, because it lands at 212°, a full 31° away from the deep water's 243°. The stone lands at 241°, off by 2°. Halving the chroma withdraws it from the competition; pinning the hue to its neighbour makes it give up an identity of its own. Only when both are done does a surface read white. Same in an interface: that "white card" on a deep blue ground should not be a pure neutral. Take the ground's hue, cut the chroma to six tenths, and the card grows out of the picture instead of being stuck onto it.

Take these colours with you

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

/* Court of Fontaine in Open Daylight · Court of Fontaine in Open Daylight — Teyvat Palette */
:root {
  --masonry-white: oklch(0.53 0.069 241); /* Masonry White #467190 */
  --deep-bay: oklch(0.65 0.111 243); /* Deep Bay #4c96cd */
  --clear-sky: oklch(0.75 0.132 249); /* Clear Sky #66b4fe */
  --cloud-drift: oklch(0.91 0.052 221); /* Cloud Drift #bceafa */
  --shoal-shelf: oklch(0.64 0.069 212); /* Shoal Shelf #5798a5 */
  --garden-green: oklch(0.77 0.096 141); /* Garden Green #92c48a */
  --gradient-court-of-fontaine: linear-gradient(180deg, oklch(0.75 0.132 249) 0%, oklch(0.91 0.052 221) 22%, oklch(0.65 0.111 243) 55%, oklch(0.53 0.069 241) 80%, oklch(0.64 0.069 212) 100%);
}

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