Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Wikala Funduq at White Noon
SumeruDaySun-BeatenOrderlyEmptied Out

Wikala Funduq at White Noon

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%2c513d14%365b5130%21634c48%a3d89f70%d4da5a100%d2d7c7

Why it works

Separating top from bottom on lightness requires gathering both ends into one hue family first. Measure Wikala Funduq's upper and lower edge with the same pair of rectangles: lightness reads 0.34 against 0.87 — a gap of 0.53 — while the hues, 158° against 123°, sit together in the green-cyan family and the chromas, 0.043 against 0.023, are both low. The 120°–180° green-cyan band alone eats 610,777 pixels of the frame, and the ground rectangle at the bottom edge reaches only chroma 0.030 even in its most chromatic 3%. Because hue and chroma both step aside, that 0.53 reads as "sunlight falling on stone" rather than "the material changed". Its batch-mate «Shapur Hotel in Cliff Shade» charges the same gap entirely to chroma (lightness 0.33 at both ends). Both pictures separate — separating is the common term; which axis carries it is what decides what kind of place you are looking at.

01

Same wall — sunlight buys lightness and nothing else

The tiled wall on the right half of the frame, struck by the sun, measures L 0.83 / chroma 0.096 / hue 143°. The same kind of tiled wall on the left, turned away from it, measures L 0.45 / chroma 0.076 / hue 167°. That is 0.38 of lightness, only 0.020 of chroma, and 24° of hue: direct light in this picture travels almost entirely down the lightness channel. Meanwhile the 120°–180° green-cyan band totals 610,777 pixels averaging L 0.44 / chroma 0.057 — most of the picture is one glazed tile, and cutting it into a lit half and a shaded half is what gives a symmetrical composition a left and a right. To show strong sun, do not reach for saturation on the way past; build 0.38 of lightness and keep the chroma difference under 0.02, and it will look like light rather than two buckets of paint.

02

The ground takes no position, so the lightness spends cleanly

The stone ground along the bottom edge measures L 0.87 / chroma 0.021 / hue 121°; even its most chromatic 3% reaches only 0.030, with a maximum of 0.042 — the whole ground is held near the achromatic line of 0.025, while the frame's median chroma is 0.045, so the ground runs at half of it. Precisely because the ground takes no hue position, the 0.53 of lightness between it and the roofs at the top edge is not interfered with by any hue, and reads as two steps under one light. Turn it around: glaze this ground too, and 0.53 instantly becomes a standoff between two materials. If you want to tell a space through lightness, first pick the largest surface and empty out its hue.

03

A bed of flowers hits the ceiling without changing family

The single bed of yellow flowers at dead centre is the most chromatic handful in the frame: its most chromatic 3% measures L 0.86 / chroma 0.151 / hue 112°, and the frame's chroma maximum of 0.194 also falls in the green band. Real warmth — the whole 330°–90° window — comes to just 1,582 pixels across the picture (0.03% of orange plus 0.15% of yellow in the census). It looks like yellow flowers and measures 112°, still between green and yellow, without a single step outside the dominant family. What does the work is that it sits on ground at L 0.87, which makes it the centre of a symmetrical composition. That is the dividend of spending the lightness account cleanly: the plainer the floor beneath, the less area a chromatic handful needs — and the less it needs a new hue at all.

Take these colours with you

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

/* Wikala Funduq at White Noon · Wikala Funduq at White Noon — Teyvat Palette */
:root {
  --eave-deep-green: oklch(0.4 0.054 159); /* Deep Green of the Eaves #2c513d */
  --arch-pillar-stone: oklch(0.44 0.046 174); /* Arch-Pillar Stone #365b51 */
  --shaded-tile-teal: oklch(0.45 0.076 167); /* Shaded Tile Teal #21634c */
  --sunlit-tile-green: oklch(0.83 0.096 143); /* Sunlit Tile Green #a3d89f */
  --flowerbed-yellow: oklch(0.86 0.151 112); /* Flowerbed Yellow #d4da5a */
  --sunbleached-flagstone: oklch(0.87 0.021 121); /* Sun-Bleached Flagstone #d2d7c7 */
  --gradient-wikala-funduq: linear-gradient(180deg, oklch(0.4 0.054 159) 0%, oklch(0.44 0.046 174) 14%, oklch(0.45 0.076 167) 30%, oklch(0.83 0.096 143) 48%, oklch(0.86 0.151 112) 70%, oklch(0.87 0.021 121) 100%);
}

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