Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
The Chasm: Underground Mines toward a Distant Glow
LiyueGloomedDamp-coldHollow

The Chasm: Underground Mines toward a Distant Glow

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 35° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%0c1d2322%12222548%14384175%1b4a52100%1b535c

Why it works

When the light is too weak to wash anything white, a fog's lightness and chroma are bound to one slider: take four openings receding into the frame and L runs 0.24 → 0.32 → 0.38 → 0.41 while chroma runs 0.023 → 0.044 → 0.052 → 0.059, rising in perfect step, hue only wobbling between 210° and 217° the whole way — so anything that wants to be seen on its own has to step off that slider.

01

One slider walks the whole depth

Take four openings from the nearest pit floor into the depth of the frame: (0.30, 0.62) at L 0.24 / chroma 0.023, (0.38, 0.50) at 0.32 / 0.044, (0.44, 0.40) at 0.38 / 0.052, (0.50, 0.32) at 0.41 / 0.059. Lightness climbs 0.17, chroma reaches 2.6 times its start, and hue reads 211° / 217° / 211° / 210° — it never moves. 〈Dainichi Mikoshi in White Glare〉 measured the same concentric fog on the near side of a strong light, and the sign there is reversed: further from the light, lightness falls while chroma rises. The dividing line is whether the light is strong enough to wash the fog white. Here even the brightest fog only reaches L 0.41 against a frame p99 of 0.43: the light never gets to the step where washing begins. So the two channels merge into one, and that single channel draws the depth, the volume and the direction of the light by itself.

02

The one cloth off the slider

2,497 of the frame's 4000 brightest pixels land on that sheet of canvas at mid left — cells (0.0, 0.4) and (0.2, 0.4), lightness 0.46 and 0.47, chroma 0.046 in both, hue 164° and 165°. The whole sheet measures L 0.39 / chroma 0.037, while fog at the same L 0.38 carries 0.052: one step below the slider. That one step is what makes it read as a piece of cloth rather than as air further away. To place a real object inside fog you do not need to give it more lightness — lightness is the fog's private property and you will not win it. Give it a chroma that leaves the slider, and that is enough.

03

A timber mining camp with 974 warm pixels

The `330°–90°` warm window over the whole frame holds 974 pixels, 0.11% of it, averaging L 0.38 / chroma 0.039 / hue 82°, with the densest 3% (29 pixels) at L 0.51 / chroma 0.071 — a peak of 0.082, far under the 0.122 of the fog in the depth. The camp is built entirely of timber, yet the nearest beam measures 221° at chroma 0.025, the same family as the ceiling rock's 234° and the pit floor's 240°: not one of them kept its own warmth. So only two things in the picture are off the slider, and they leave it by different exits — the canvas drops a step in chroma, the lamps cross to the other side in hue. In a picture run by a single axis, an exception can only be marked by leaving that axis, and which channel it leaves by depends on what it is: objects leave through chroma, lights leave through hue.

Take these colours with you

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

/* The Chasm: Underground Mines toward a Distant Glow · The Chasm: Underground Mines toward a Distant Glow — Teyvat Palette */
:root {
  --pit-blue: oklch(0.24 0.023 211); /* Pit Blue #122225 */
  --mid-fog: oklch(0.32 0.044 217); /* Mid Fog #143841 */
  --deep-fog: oklch(0.38 0.052 211); /* Deep Fog #1b4a52 */
  --distant-glow: oklch(0.41 0.059 210); /* Distant Glow #1b535c */
  --canvas-grey: oklch(0.39 0.037 174); /* Canvas Grey #2f4c43 */
  --lamp-amber: oklch(0.51 0.071 80); /* Lamp Amber #7b6134 */
  --gradient-the-chasm-underground-mines: linear-gradient(35deg, oklch(0.22 0.025 221) 0%, oklch(0.24 0.023 211) 22%, oklch(0.32 0.044 217) 48%, oklch(0.38 0.052 211) 75%, oklch(0.41 0.059 210) 100%);
}

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