
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.