Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Lianfang Dim Sum under a Pale Sun
LiyueDayPaleWide and BrightPlain

Lianfang Dim Sum under a Pale Sun

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%b2b7a620%5c8b7e40%44596255%514d4168%5d314e82%995338100%949884

Why it works

"Chroma all goes to the things that change" has a precondition: the thing that changes has to be standing in the light. The one plant on this street is the red-leaved tree showing a single corner at the right edge, and it sits in shade (L 0.38 / chroma 0.075 / 341°, peak 0.136) — so the frame's ceiling of 0.140 is picked up by the clay pots on the counter. The two Liyue daylight pictures in the same batch that do have a sunlit plant reach 0.216 and 0.184, and their man-made vermilion tops out at 0.107. To raise a street's chroma ceiling, do not saturate the buildings — you cannot — move the tree into the sun.

01

Grey cannot order a single step of it

Three Liyue daylight pictures in one batch: their lightness medians are 0.58 / 0.62 / 0.58, within 0.04 of each other, while their achromatic shares are 17.14% / 33.03% / 62.42%, a spread of 3.6×. And the chroma ceilings run 0.216 / 0.140 / 0.184 — the greyest picture sits below the least grey one, and this middling one sits lowest of all. No ordering by grey makes that list monotone. This frame's own 33.03% explains nothing either: its chroma median is 0.032, and the 33.24% sitting in 90°–165° sounds like a field of green but measures a mean chroma of 0.034 — it is pale blue-grey flagstone and whitewash, not vegetation.

02

Everything built sits between 0.02 and 0.03

Under one and the same sun, every large surface on this street is locked into the same band of chroma: the forecourt flagstones at (0.35, 0.68) read L 0.67 / chroma 0.029 / 115°, the whitewash on the left at (0.02, 0.16) reads L 0.77 / 0.024 / 119°, and the lattice windows and posts of the shopfront at (0.30, 0.40) read L 0.42 / 0.020 / 91° — the timber sits below the 0.025 achromatic line. The recess under the right-hand eaves at (0.75, 0.28) reads L 0.45 / 0.029 / 226°. Even the teal banner planted in the middle of the road as a shop sign, taller than a person, measures only L 0.60 / chroma 0.056 / 175°. 〈Jiulue Teahouse under Plain Daylight〉 turned this into a rule: nothing built takes any colour, and the chroma all goes to the things that change.

03

The thing that changes has to stand in the light

The trouble with this picture is where that changing thing was put: in shade. The red-leaved tree showing one corner at the right edge measures, over its 4,437-pixel rectangle, L 0.38 / chroma 0.075 / 341°, peaking at 0.136. So the ceiling of 0.140 falls to something built instead — the clay pots on the counter, whose most chromatic 3% reads L 0.52 / chroma 0.101 / 42°, while the whole frame's warm 330°–60° amounts to 24,643 pixels (2.67%). Set that against the batch: in 〈Chunming Teaworks in Verdant Daylight〉 the sunlit tea terraces on the left reach 0.161 in their most chromatic 3% (L 0.72), and in 〈Sword and Strongbox Secure Transport Agency, Sun-Bleached〉 the tree clearing the roof ridge at upper right reaches 0.162 (L 0.74). In scene colour the ceiling is not tuned, it is staged: the moment that tree steps back into shade, the whole picture's ceiling drops to the height of what was built.

Take these colours with you

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

/* Lianfang Dim Sum under a Pale Sun · Lianfang Dim Sum under a Pale Sun — Teyvat Palette */
:root {
  --banner-teal: oklch(0.6 0.056 175); /* Banner Teal #5c8b7e */
  --whitewash: oklch(0.77 0.024 119); /* Whitewash #b2b7a6 */
  --courtyard-flagstone: oklch(0.67 0.029 115); /* Courtyard Flagstone #949884 */
  --shopfront-wood: oklch(0.42 0.02 91); /* Shopfront Wood #514d41 */
  --clay-pot: oklch(0.52 0.101 42); /* Clay-Pot Orange #995338 */
  --eave-shadow: oklch(0.45 0.029 226); /* Eave-Shadow Blue #445962 */
  --edge-maple: oklch(0.38 0.075 341); /* Edge Maple #5d314e */
  --gradient-lianfang-dim-sum: linear-gradient(180deg, oklch(0.77 0.024 119) 0%, oklch(0.6 0.056 175) 20%, oklch(0.45 0.029 226) 40%, oklch(0.42 0.02 91) 55%, oklch(0.38 0.075 341) 68%, oklch(0.52 0.101 42) 82%, oklch(0.67 0.029 115) 100%);
}

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