Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Bayt Al-Hayah under a Single Shaft
SumeruEnclosedHushedDamp cold

Bayt Al-Hayah under a Single Shaft

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%19190c18%57969045%5f5c3a62%222313100%397074

Why it works

Whether a dark picture can hold a focus depends on whether it owns a single hue that does not belong to its light — and Bayt Al-Hayah owns none. Search the whole frame from 270° to 45° and you get 30 pixels; even the patch that looks most like ochre measures 141°. So its chroma allowance (p99 0.065 minus the median 0.027) is only 0.038, the lowest of the four halls, while its lightness allowance of 0.34 sits in the same step as the other three at 0.37 / 0.39 / 0.45. In a dark scene lightness is public and chroma is private: with no foreign hue available, the focus has to be rehung on lightness — and that money has to be saved up first, out of 45.48% achromatic dark rock.

01

The sand is green

The sandstone ledge in the middle distance, the one the light grazes, measures L 0.47 / chroma 0.051 / hue 104°; the sand path along its lower edge, 113°; the shelf on the left, 113°; and even the single patch that reads most like ochre — the corner of that ledge — is 141°. All chartreuse, not one of them warm. Search the whole frame from 270° to 45° at the caliber of «Brightcrown Mountains in Plain Daylight» and it yields 30 pixels. The only light in this cave is the daylight through the crack overhead (its brightest cluster measures L 0.63 / chroma 0.066 / hue 188°), and it is cyan, so the sandstone's own yellow has been dragged, as a family, to 104°–141°. To build a space lit by one light only, leave no material its local colour — the sand has to turn green too.

02

The lightness allowance is public, the chroma allowance is not

Subtract each picture's own median from its peak (the method of «Belleau Region in Limpid Daylight») and Bayt Al-Hayah's lightness allowance is 0.59 − 0.25 = 0.34, Bayt Al-Muazzam's 0.37, Bayt Al-Sukr's 0.39, the Fane of Ashvattha's 0.45 — four pictures inside a third of a step. The chroma allowances are 0.038 / 0.046 / 0.073 / 0.173, a spread of 4.6 times. The reason is the floor: a dark scene has already pushed its median lightness down to 0.25–0.32 while the ceiling is still 1.0, so every one of them leaves most of the lightness track unused. What everyone can afford cannot tell anyone apart. Chroma carries no such guarantee — something in the frame has to earn it. Same for dark interfaces: before spending effort on "darker still", decide who is going to supply the one hue that does not belong to the background.

03

45.48% black rock is the only capital it has

This frame is 45.48% achromatic, the highest of the four halls (Bayt Al-Muazzam 23.22%, Bayt Al-Sukr 4.81%, the Fane of Ashvattha 4.19%), and nearly all of it is the rock on both sides and overhead that the light never reaches — the left wall measures L 0.21 / chroma 0.024, sitting exactly on the achromatic threshold. Only with that 0.21 ground does the cyan mist in the lower half hold at L 0.51: the two are 0.30 apart, while the frame's median lightness is just 0.25. Once the chroma route is closed, all a picture can still do is push its surroundings lower. When you want a focus in a dark scene and cannot find a foreign hue, stop adding saturation to the subject and sink the whole field around it below the median — the difference is the only thing left to move.

Take these colours with you

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

/* Bayt Al-Hayah under a Single Shaft · Bayt Al-Hayah under a Single Shaft — Teyvat Palette */
:root {
  --rift-cyan: oklch(0.63 0.066 188); /* Rift Cyan #579690 */
  --mist-pool: oklch(0.51 0.059 201); /* Mist-Pool Cyan #397074 */
  --ledge-chartreuse: oklch(0.47 0.051 104); /* Ledge Chartreuse #5f5c3a */
  --shaded-shelf: oklch(0.25 0.029 113); /* Shaded Shelf #222313 */
  --wall-shadow: oklch(0.21 0.024 109); /* Wall Shadow #19190c */
  --gradient-bayt-al-hayah: linear-gradient(180deg, oklch(0.21 0.024 109) 0%, oklch(0.63 0.066 188) 18%, oklch(0.47 0.051 104) 45%, oklch(0.25 0.029 113) 62%, oklch(0.51 0.059 201) 100%);
}

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