Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Jiulue Teahouse on Lantern Night
LiyueNightWarm ClamourDeep NightReunion

Jiulue Teahouse on Lantern Night

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%2e445f20%4d223740%fbd17e54%d7673868%78343c100%637480

Why it works

A festival is paid for out of the neutral budget: in the same Jiulue Teahouse the achromatic pixels fall from 56.13% on an ordinary day to 25.82%, and the 30 points given up are split between the warm end (5.71% → 27.74%) and the blue of night (28.81% → 40.91%), leaving the picture darker than it was by day (median lightness 0.54 → 0.47). To make a scene festive, count how much grey you have to spend rather than turning the ground up.

01

The grey is this festival's budget

On an ordinary day 56.13% of the teahouse's pixels sit under chroma 0.025 — white plaster, grey tile, stone court. On lantern night only 25.82% do. Not one of those 30 points stayed where it was: the warm band (345–90°) climbs from 5.71% to 27.74% and the blue band (210–270°) from 28.81% to 40.91%. Both ends fatten at once while the middle is emptied out, which is why the median chroma jumps from 0.021 to 0.045. If you want to throw a festival, first count how many silent surfaces you are holding. That is the only money you have.

02

Livelier, and darker

Median lightness falls from 0.54 to 0.47 and p99 from 0.87 to 0.81 — this festival brightened nothing. What changed is what sits at the top of the lightness range: by day the 4000 brightest pixels were paving stone at L 0.90 and chroma 0.016; tonight the top band is still L 0.88 but carries chroma 0.112, and it is the painted lit screens on either flank (peaking at 0.199, the highest in the frame). The same lightness ceiling, holding white in one picture and gold in the other. Festivity is not *brighter*; it is giving the lightness ceiling away to something that has a hue.

03

Only what a lantern reaches is warm

The paving across the court is still a cold 238° grey overall, and yet 14.7% of its pixels fall between 15–90°, averaging 41° — pools the lanterns spilled onto stone, not a floor tinted warm as a whole. Whatever the lanterns miss follows the night instead: the red maple on the left edge measured 17° at chroma 0.134 by day, and tonight is 351° at chroma 0.072, swung 26° towards magenta and 0.20 lower in lightness. To make an interface festive, do not warm the ground colour. Give up the neutral surfaces, spend the warmth only on light sources and the one pool each of them reaches, and keep pushing the ground colder.

Take these colours with you

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

/* Jiulue Teahouse on Lantern Night · Jiulue Teahouse on Lantern Night — Teyvat Palette */
:root {
  --night-blue: oklch(0.38 0.054 255); /* Night Blue #2e445f */
  --court-at-night: oklch(0.55 0.027 238); /* Court at Night #637480 */
  --banner-red: oklch(0.42 0.096 15); /* Banner Red #78343c */
  --lantern-amber: oklch(0.64 0.153 42); /* Lantern Amber #d76738 */
  --lit-screen-gold: oklch(0.88 0.112 83); /* Lit Screen Gold #fbd17e */
  --night-maple: oklch(0.32 0.072 351); /* Night Maple #4d2237 */
  --gradient-lantern-rite-festival-5-3-jiulue-teahouse: linear-gradient(180deg, oklch(0.38 0.054 255) 0%, oklch(0.32 0.072 351) 20%, oklch(0.88 0.112 83) 40%, oklch(0.64 0.153 42) 54%, oklch(0.42 0.096 15) 68%, oklch(0.55 0.027 238) 100%);
}

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