Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Puspa Café in Bleached Noon
SumeruDaySun-BeatenAirySparse

Puspa Café in Bleached 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%63a4cc10%e6f9fb24%153c2440%2e666156%a4725f84%d6dac5100%44687e

Why it works

When the only thing overhead is open sky, the lit and shaded halves of one piece of ground end up on opposite sides of the colour wheel. The sun-bleached plaza runs 40,608 pixels at L 0.88 / chroma 0.029 / hue 115°; the same paving where it drops into deep shade at the bottom edge runs 4,608 pixels at L 0.50 / chroma 0.054 / 235° — 120° of hue apart, with the chroma going up by 1.9 times rather than down. And 235° is not some arbitrary blue: the 99,874 sky pixels inside 210°–270° in the top quarter of the frame average 237°, a difference of 2°. This is the widest gap among the four Sumeru City shopfronts in this batch, and also the greyest picture of the four (32.49% achromatic) — and those are one fact, not two. The lit surface hands its chroma away and the shadow takes it back, and what it takes back is the hue of the sky above. If you want brightness and colour at once, do not ask one surface for both.

01

Bleaching is giving up chroma, not adding yellow

The plaza's 40,608 pixels sit at chroma 0.029, only 0.004 above the achromatic line of 0.025 and below the frame's median chroma of 0.037 — the largest surface in the picture is paler than the median, while its hue of 115° has not shifted a step. «Court of Fontaine in Open Daylight» said white is half the chroma at the same hue; this cuts further, down flush against the achromatic line, and pays for it by pushing lightness to 0.88 when the frame's own p99 is 0.95. Almost all of this picture's 32.49% achromatic comes from that one surface, and none of it was swapped for grey paint. To paint sun-beaten stone, do not turn it yellow: press its chroma down onto the achromatic line and push its lightness near the frame's ceiling.

02

Those 2° inside the shadow

The deep shade at the bottom corner runs 4,608 pixels at L 0.50 / chroma 0.054 / 235°, against 237° for the sky in the top quarter — 2°. The shaded lane in the background reads 226°, same family. «Bantan Sango Detective Agency in the Shade» measured the other half of this: skylight passed on once loses more than half its chroma while its hue does not move a degree. Here the sign is reversed — 0.029 in the light, 0.054 in the shade, chroma going up, because the lit side was bleached out first. So measuring chroma to tell sky from shadow still works; you just have to establish which of the two is the bleached side before you read it.

03

No sun, no saturation

The two coral parasols are the only massed warmth in the frame: a 15°–60° window holds 12,472 pixels at L 0.60 / chroma 0.070, peaking at just 0.103, and all of 330°–60° across the frame comes to 17,542 pixels peaking at 0.106 — short of six tenths of the ceiling, 0.177. They stand in the shade they themselves cast, so their fill light is a 237° sky, which can lend nothing to 42°. The vermilion canopy in this batch's «Bimarstan under a Green Awning» stands in direct sun and, being the same kind of cloth, peaks at 0.149. Same city, same material: how saturated a piece of cloth can get is settled first by whether the sun reaches it.

Take these colours with you

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

/* Puspa Café in Bleached Noon · Puspa Café in Bleached Noon — Teyvat Palette */
:root {
  --clear-sky-blue: oklch(0.69 0.089 237); /* Clear-Sky Blue #63a4cc */
  --cloud-white: oklch(0.97 0.02 203); /* Cloud White #e6f9fb */
  --trunk-deep-green: oklch(0.32 0.061 154); /* Trunk Deep Green #153c24 */
  --glazed-roof-green: oklch(0.47 0.059 189); /* Glazed Roof Green #2e6661 */
  --coral-parasol: oklch(0.6 0.07 42); /* Coral Parasol #a4725f */
  --bleached-plaza: oklch(0.88 0.029 115); /* Bleached Plaza #d6dac5 */
  --shadowed-stone: oklch(0.5 0.054 235); /* Shadowed Stone #44687e */
  --gradient-puspa-caf: linear-gradient(180deg, oklch(0.69 0.089 237) 0%, oklch(0.97 0.02 203) 10%, oklch(0.32 0.061 154) 24%, oklch(0.47 0.059 189) 40%, oklch(0.6 0.07 42) 56%, oklch(0.88 0.029 115) 84%, oklch(0.5 0.054 235) 100%);
}

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