Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Bayt Al-Sukr by Flowerlight
SumeruHazyFragrantTipsy

Bayt Al-Sukr by Flowerlight

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

0%3a65a828%ad37e555%37437880%373f76100%2d1d33

Why it works

A chroma allowance in a dark scene is affordable only to whatever glows on its own: the two Padisarah blooms at upper right measure L 0.59 / chroma 0.250, crossing the visible shaft of light in the picture (0.51 / 0.117) on both channels at once. They cover 2.81% of the frame, and they push its chroma allowance (p99 0.227 minus the median 0.054) to 0.173 — against 0.038 for Bayt Al-Hayah in the same set, a factor of 4.6. Meanwhile the four lightness allowances are 0.34 / 0.37 / 0.39 / 0.45; nobody took more than anyone else. What separates one dark picture from another is not lightness but chroma, and chroma is not mixed — it is earned by something inside the frame.

01

The flowers are brighter than the light, and more saturated

The brightest cluster in the shaft coming down from the roof measures L 0.51 / chroma 0.117 / hue 259°; the brightest cluster in the Padisarah at upper right, L 0.59 / chroma 0.250 / hue 312° — higher by 0.08 and 0.133 on the two channels. This is exactly the test set by «Wangshan Hall, Mossglow»: crossing the visible light source in both lightness and chroma is what counts as glowing; crossing only one means merely lit. That study was a daylit interior with both sides bright (the mossy pool 0.81 / 0.093 against the skylight 0.71 / 0.066); here both sides are dark and the test still holds — it compares rank, not absolute value. One compositional corollary to add: the flowers sit in the upper-right corner, the point in the frame furthest from that shaft. Nothing merely lit can be at its brightest furthest from the light, so the position itself is testimony. To make something read as glowing, first move it somewhere the light cannot reach.

02

Two ways to buy a focus: pay in chroma, or pay in hue distance

Three adjacent bands — blue 36.06%, violet 44.54%, pink 14.07% — eat 94.67% of this frame across 210°–345°. Search 45°–165° and the whole picture yields 141 pixels averaging L 0.63, compression artefacts in a highlight gradient. The flowers' 322° is the far end of that 135°-wide band, only 47° from the haze at 275°: not a foreigner, just the same band pushed to its limit. Bayt Al-Muazzam in the same set takes the other road — its golden lamp at 66° stands 168° from the blue haze at 258°, covers 3.72%, and has a chroma allowance of only 0.046, yet its focus is just as certain. Paying in hue distance is far cheaper, but it demands that everything else be gathered into a narrow band. Paying in chroma is expensive (0.173 here), and it does not tear the picture into two opposing halves.

03

It gained nothing at all on lightness

The four halls have median lightness 0.25 / 0.30 / 0.30 / 0.32, and Bayt Al-Sukr's lightness allowance of 0.39 ranks only third (the Fane of Ashvattha 0.45, Bayt Al-Muazzam 0.37, Bayt Al-Hayah 0.34) — yet at a glance it is the most vivid of the four. It is all on the chroma ledger: 0.173 is 4.6 times Bayt Al-Hayah's 0.038, and what buys that gap is those flowers, under 3% of the frame. The pink band as a whole covers 14.07% but averages only chroma 0.059; most of it is the magenta lean of haze and rock, and the genuinely saturated part is the one patch the flowers occupy (rectangle mean 0.144, peak 0.269). Stop spending effort on "darker" in a dark theme — anyone can produce that step. The question is who glows, and why it deserves that much chroma.

Take these colours with you

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

/* Bayt Al-Sukr by Flowerlight · Bayt Al-Sukr by Flowerlight — Teyvat Palette */
:root {
  --padisarah-magenta: oklch(0.59 0.25 312); /* Padisarah Magenta #ad37e5 */
  --rift-blue: oklch(0.51 0.117 259); /* Rift Blue #3a65a8 */
  --violet-haze: oklch(0.39 0.092 275); /* Violet Haze #373f76 */
  --bud-violet: oklch(0.4 0.091 272); /* Bud Violet #374378 */
  --shadow-crimson: oklch(0.26 0.047 316); /* Shadow Crimson #2d1d33 */
  --gradient-bayt-al-sukr: linear-gradient(160deg, oklch(0.51 0.117 259) 0%, oklch(0.59 0.25 312) 28%, oklch(0.4 0.091 272) 55%, oklch(0.39 0.092 275) 80%, oklch(0.26 0.047 316) 100%);
}

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