FontaineCavernousHushedCold-lit

Canotila and the Book of Revealing in Groundglow

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%1d3d4830%23506958%1e7a7d82%5080f9100%cad6ff

Why it works

Whether a line reads as glowing or as painted on is decided by the sign relation between lightness and chroma: the circle's engraved lines measure L 0.88 at chroma 0.058, the field they sit on L 0.63 at chroma 0.187 — 0.25 brighter, with only a third of the chroma left. The lead line in Moontide Sea after Dark is made by both channels jumping together; the one in Basin of Unnumbered Flames in Sunlit Haze holds both channels still and changes only hue. This one jumps in opposite directions, and reads as the light itself.

Brighter, and necessarily paler

Of the 4000 brightest pixels, 2963 land on the circle in the lower half of the frame, at L 0.87–0.89 and chroma 0.056–0.066, centred at (0.30, 0.89) and (0.52, 0.92). The field beneath them measures L 0.63 at chroma 0.187, and all 4000 of the most chromatic pixels are here too, 4000/4000 (L 0.54, chroma 0.239, peaking at 0.259). The lines' chroma of 0.058 is the same figure as the frame's median, 0.061 — they carry no more colour than any rock in the cave, only more light. The mechanism is plain: light strong enough washes a material's own colour out, so surrendering chroma is the proof that this is light and not paint. A line that is both bright and saturated can only read as illuminated pigment. To draw a glowing line, measure the chroma of the field under it first, then take the line down to a third of it.

One line, three signs

The horizon in Moontide Sea after Dark is made by lightness 0.13 → 0.70 and chroma 0.026 → 0.137 jumping together, and reads as the border between two worlds; the veins across the cliff in Basin of Unnumbered Flames in Sunlit Haze hold both channels still (a lightness difference of 0.02, a chroma difference of 0.009) and let hue alone open 118°, so they read as energy flowing across a surface (both sets of figures quoted from those studies). This is the third case: lightness up 0.25, chroma down to a third against it, hue moving only from 265° to 272°. Three combinations, three readings — and which one you want is not decided by your subject but by whether that line should be a border, a marking, or a source of light.

The cave has no green of its own

Only 3.85% of the frame is achromatic, and yet the chroma median stops at 0.061: the roof rock 0.043, the boulder at left 0.065, the far mossy slope 0.048, the shelves at upper right 0.033 — the whole cave hugs the median, and the only saturated thing is the circle at 0.187, three times it. Where the colour comes from is measurable. One continuous grass slope reads 147° directly beneath the candles, then 189° and 198° further out, and by the far left it is already 221°. That green was bought back, temporarily, by 0.97% of candlelight (8,553 pixels, mean chroma 0.042); it does not belong to the grass. A single strong coloured light will clear the greys away and still not make a picture saturated. To know whether a base is rich, measure the chroma median — the achromatic share is answering a different question.

Take these colours with you

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

/* Canotila and the Book of Revealing in Groundglow · Canotila and the Book of Revealing in Groundglow — Teyvat Palette */
:root {
  --sigil-blue: oklch(0.63 0.187 265); /* Sigil Blue #5080f9 */
  --sigil-line: oklch(0.88 0.058 272); /* Sigil Line #cad6ff */
  --cavern-rock: oklch(0.41 0.065 236); /* Cavern Rock #235069 */
  --mossy-slope: oklch(0.32 0.048 221); /* Far-Slope Blue #113844 */
  --candlelit-moss: oklch(0.64 0.064 147); /* Candlelit Moss #739776 */
  --shelf-amber: oklch(0.52 0.11 46); /* Shelf Amber #9b522d */
  --gradient-canotila-and-the-book-of-revealing: linear-gradient(180deg, oklch(0.34 0.043 224) 0%, oklch(0.41 0.065 236) 30%, oklch(0.53 0.082 198) 58%, oklch(0.63 0.187 265) 82%, oklch(0.88 0.058 272) 100%);
}

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