FontaineDayOpenTeemingHigh Summer

Beryl Region in Full Light

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%2d7ff214%a2d9fc28%90c9f042%7aaaba62%248b6c86%61af49100%aaa55b

Why it works

"Dense" and "loud" are two separate numbers and one knob will not produce both. Beryl's median chroma is 0.121, exactly as dense as Liffey's, yet its p99 is 0.195 where Liffey's is only 0.160 — the same median, and one frame keeps 0.074 of headroom while the other keeps 0.039. The difference is not the half-frame of grass on the ground, it is that band of sky along the very top edge: in the central rectangle 40% wide and 5% tall, this frame measures chroma 0.190 where Belleau measures 0.163 in the same rectangle. A high median is not the mistake. The mistake is raising the median without raising the ceiling with it.

Half the frame stands high

The green band covers 51.94% at a mean of L 0.68 / chroma 0.138 / hue 138°. Take the grass slope in the lower edge, centred, 30% wide and 12% tall: 33408 pixels averaging L 0.68 / chroma 0.158 — the mean of a perfectly ordinary patch of foreground meadow already reaches Belleau's whole-frame p99 of 0.164. That is the entire origin of the 0.121 median: nothing here is unusually saturated, half the picture simply stands high. Even the thing that ought to dilute it does not — the dirt track winding from mid-right out through the lower-left corner measures hue 105° / chroma 0.096 in its lower stretch, yellower and paler than the grass yet never once leaving the 90°–165° green band. The frame's yellow in 45°–90° totals 0.14% (a few sunflowers at the edge of the village) and its red in 330°–15° totals 0.01%. To make a picture dense, do not turn up anyone's saturation; look first at which step the largest surface is standing on.

The ceiling still comes from the sky

Of the 4000 most chromatic pixels, 3705 fall in 240°–270° at a mean of L 0.59 / chroma 0.196, with the peak point at (0.45, 0.02) — the very top edge of the frame, the same structure as Belleau. No amount of green displaces it: the green band's highest chroma is 0.218, the blue band's is 0.225. What changed is only how deep that sky itself is, and that step was taken by the framing — the full top strip (3% tall) measures chroma 0.117, lower than Belleau's 0.152 in the same strip, because a large cumulus bank sits in the top-right corner. Clear the cloud and take only the open sky at the centre and it is 0.190 against 0.163. A ceiling is not mixed, it is a question of how much of the deepest sky you left inside the frame.

Headroom is two numbers, computed together

Line up chroma p99 minus p50 for the six Fontaine scenes: Belleau 0.071, Morte 0.072, Liffey 0.039, Beryl 0.074, Court of Fontaine Region 0.049, the Institute region 0.069. (Belleau's and Liffey's own texts subtract the median from a measured surface instead, giving 0.070 and 0.015 — a different gauge, the same ranking.) Beryl has the largest headroom of the six, and its median is as high as the frame with the smallest — so "lower the median" is one way to save headroom, not the only way. There is a route that economises on nothing: keep the picture dense and keep the deepest sky inside the frame. Both routes work, but the two numbers have to be read together; watch the median alone and you will mistake Beryl for Liffey.

Take these colours with you

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

/* Beryl Region in Full Light · Beryl Region in Full Light — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.61 0.19 258); /* Zenith Blue #2d7ff2 */
  --cumulus-pale: oklch(0.86 0.075 237); /* Pale Cumulus #a2d9fc */
  --saw-peak: oklch(0.81 0.081 239); /* Saw-Peak Blue #90c9f0 */
  --grey-scarp: oklch(0.71 0.056 221); /* Grey Scarp #7aaaba */
  --fir-ink: oklch(0.57 0.104 168); /* Fir Ink #248b6c */
  --slope-green: oklch(0.68 0.158 139); /* Slope Green #61af49 */
  --path-ochre: oklch(0.71 0.096 105); /* Path Ochre #aaa55b */
  --gradient-beryl-region: linear-gradient(180deg, oklch(0.61 0.19 258) 0%, oklch(0.86 0.075 237) 14%, oklch(0.81 0.081 239) 28%, oklch(0.71 0.056 221) 42%, oklch(0.57 0.104 168) 62%, oklch(0.68 0.158 139) 86%, oklch(0.71 0.096 105) 100%);
}

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