FontaineEmpty RingMachineryLamplight Warmth

Pankration Ring under Lanternlight

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%1f2c4014%3d445924%cbeeff46%4c383162%9d5628100%29261e

Why it works

A highlight is a trade, and the material sets the exchange rate: under the same lamps the timber stair on the left gains only 0.10 in lightness and turns it into chroma from 0.025 to 0.061, while the ring's riveted iron deck gains 0.16 and moves only from 0.016 to 0.031 — a diffuse material trades light for chroma, a specular one trades it for lightness.

Two colour temperatures, one budget

The top third (y 0–0.30, 276,480 pixels) measures L 0.34, chroma 0.037, hue 265°. The band of identical height across the middle (y 0.42–0.72, the same 276,480 pixels) measures L 0.34, chroma 0.031, hue 41°. The cool half and the warm half have exactly the same lightness and differ by 0.006 in chroma: two colour temperatures 136° apart handing out one budget. So the fact that the brick and timber below carry colour while the steel above does not cannot be charged to the light. The difference has to be found on the material's side.

Gain 0.10, get 0.036; gain 0.16, get 0.015

The timber stair down into the ring measures L 0.29, chroma 0.025 overall, and its most chromatic 3% is L 0.39, chroma 0.061; the brick of the left wall (13,056 pixels) is L 0.34, chroma 0.025, its most chromatic 3% L 0.38, chroma 0.039 — on both diffuse surfaces, a little more lightness brings chroma up with it. The specular side runs the other way. The shadow face of the steel pipe at upper left is L 0.30, chroma 0.026; the vertical highlight along the pipe is L 0.43, chroma 0.044. The iron deck goes from L 0.23, chroma 0.016 on its dry stretch to L 0.39, chroma 0.031 in the reflected band down the middle — 0.16 of lightness bought 0.015 of chroma. The mechanism is not mysterious: a diffuse highlight is the body colour multiplied by more light, so chroma has no choice but to grow with it; a specular highlight is an image of the source itself, and the strongest light in this hall is close to white (L 0.93, chroma 0.043 behind the vent), so what comes back is lightness alone. To make two surfaces read as different materials, do not change their body colour — change the exchange rate of their highlights.

The surface nearest the lamps has the least colour

The ring floor is a single riveted iron deck, and the bottom quarter of the frame (189,249 pixels) is almost nothing else: L 0.27, chroma 0.015. Four lanterns hang from the timber structure directly above it. The horizontal band that holds those lanterns (y 0.62) measures chroma 0.034; the band across the iron (y 0.90) is down to 0.013. More absolutely: search the iron rectangle for pixels falling between 180° and 300° and there is not one; pixels between 0° and 90° number 5,949, at chroma 0.034. Not a thread of the 265° steel blue that fills the upper half is mirrored in that floor. It accepts a trace of warmth, and only in the reflected band down the centre. When you paint a metal floor, do not count on the lamps to colour it — its budget has to come out of the lightness column.

Take these colours with you

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

/* Pankration Ring under Lanternlight · Pankration Ring under Lanternlight — Teyvat Palette */
:root {
  --vent-daylight: oklch(0.93 0.043 228); /* Vent Daylight #cbeeff */
  --pipe-steel: oklch(0.34 0.037 265); /* Pipe Steel #2f384b */
  --riveted-iron: oklch(0.27 0.015 93); /* Riveted Iron #29261e */
  --tier-brick: oklch(0.34 0.025 42); /* Tier Brick #44342e */
  --stair-timber: oklch(0.39 0.061 55); /* Stair Timber #5e3c24 */
  --lantern-glow: oklch(0.53 0.111 51); /* Lantern Glow #9d5628 */
  --gradient-pankration-ring: linear-gradient(180deg, oklch(0.29 0.041 259) 0%, oklch(0.39 0.037 271) 14%, oklch(0.93 0.043 228) 24%, oklch(0.36 0.031 38) 46%, oklch(0.53 0.111 51) 62%, oklch(0.27 0.015 93) 100%);
}

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