Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Jiulue Teahouse under Plain Daylight
LiyueDayClearPlainUnhurried

Jiulue Teahouse under Plain Daylight

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%599cba18%6d9c9c44%4b575f62%a8424c100%bfc7bc

Why it works

Nothing built here is coloured: the steps and paving filling the lower 45% of the frame measure chroma 0.019, the teahouse block itself 0.020, and 56.13% of the picture sits under the achromatic threshold — every bit of colour has been handed to the things that change: the sky (229°), the cliffs (195°) and the one red maple in the middle of the court (17°, chroma 0.134). Spend chroma only on what changes, keep what doesn't blank, and the place can be dressed again.

01

The architecture has no colour of its own

The whole teahouse block filling the left half — grey tile, timber gallery, white plaster — averages chroma 0.020, already below the 0.025 at which a pixel counts as achromatic. Take only its most saturated 3% and the mean is still 229° at chroma 0.089 — and 229° is the hue of the sky directly overhead (chroma 0.082). Even the little colour the building has is borrowed from the sky; it issues no hue of its own. If you want a space that survives being redecorated, start by making the space say nothing.

02

One maple carries all the chroma

Of the frame's 4000 most saturated pixels, 3697 sit in one place: the red maple at (0.51, 0.43) in the centre of the court, averaging 17° at chroma 0.134 and peaking at 0.197, the highest in the picture. The second warmest thing is an orange tree (35°, chroma 0.102) pushed to the very outside of the right edge at (0.98, 0.32), all but out of frame. Warm pixels come to 5.71% in all, and they are still the only colour anyone remembers here — because the paving beneath them is bright to L 0.82 and yet holds chroma 0.018, and the 4000 brightest pixels in the frame (L 0.90) all lie on that stone at chroma 0.016. Only when the brightest plane is colourless does the most saturated thing have somewhere to stand.

03

Blank space exists so it can be painted later

The Lantern Rite version of the same teahouse proves what the blank was for: achromatic pixels fall from 56.13% to 25.82%, the same lower half of the ground climbs from chroma 0.019 to 0.032, and its most saturated 3% flips from 252° cold shadow to 33° lamplight. The ground was empty, so the festival could land on it. Products work the same way — keep frames, containers and dividers achromatic and save the chroma budget for the content that gets swapped; a season, a campaign or a theme then changes without repainting the shell.

Take these colours with you

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

/* Jiulue Teahouse under Plain Daylight · Jiulue Teahouse under Plain Daylight — Teyvat Palette */
:root {
  --open-sky: oklch(0.66 0.082 229); /* Open Sky #599cba */
  --karst-teal: oklch(0.66 0.051 195); /* Karst Teal #6d9c9c */
  --court-stone: oklch(0.82 0.018 137); /* Court Stone #bfc7bc */
  --eave-slate: oklch(0.45 0.02 239); /* Eave Slate #4b575f */
  --maple-red: oklch(0.52 0.134 17); /* Maple Red #a8424c */
  --rim-orange: oklch(0.54 0.102 35); /* Rim Orange #a15745 */
  --gradient-jiulue-teahouse: linear-gradient(180deg, oklch(0.66 0.082 229) 0%, oklch(0.66 0.051 195) 18%, oklch(0.45 0.02 239) 44%, oklch(0.52 0.134 17) 62%, oklch(0.82 0.018 137) 100%);
}

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