InazumaDayBrightBlossom airStreet life

Uyuu Restaurant in Sakura Sunlight

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%296fae22%b789d044%7e464262%343e4c76%162945100%867f93

Why it works

The largest colour in a frame only governs the places where you cannot see the sun. The blue band takes 51.54%, almost all of it sky, measuring chroma 0.120 at hue 249° — and it tints one side only. The shop's boarding reads 259°, the doorway noren 258°, both right beside the sky. The sunlit flagstones, meanwhile, read 301°–320°: fifty degrees from the sky and less than twelve from that cherry tree at 313°, with chroma climbing from 0.018 to 0.039 as they approach it. Skylight owns the shadows, bounced light owns the lit faces, and the two ledgers never change hands.

The widest surface is not the most saturated one

Of the 4000 most chromatic pixels, 3138 land in the crown of the cherry on the right (L 0.55, chroma 0.157, hue 308°); the sky is allotted 216. By area the blue band is 51.54%, while the cherry's two bands (violet 10.10% plus pink 6.12%) come to 16.22% — under a third of it. And yet the two surfaces differ by only 0.007 in mean chroma, 0.120 against 0.113. Area did not bring density with it. Because first-by-area and first-by-density part company in this one picture, what follows becomes visible.

The ground leans towards the cherry, not the sky

Measure the same flagstones in three places. At the left edge, furthest from the tree: L 0.68, chroma 0.018, hue 305°. In the middle: L 0.61, chroma 0.031, 301°. Directly under the cherry: L 0.62, chroma 0.039, 320°. The hue stays locked on the magenta side throughout, and chroma more than doubles along the distance to the tree. Half a frame of sky overhead never pulled it back one degree, because the flagstones are in direct sun — direct light carries no colour of its own, so the surface it strikes waits for the nearest bright thing to tint it. The strength of bounced light is a function of distance; skylight is not.

Everything in shadow belongs to the sky

The shop's dark boarding reads L 0.36, chroma 0.028, hue 259°; the indigo noren at the door L 0.28, chroma 0.058, 258°; the sky 249°. All three fall inside 10°, and all three sit 42° to 61° away from the flagstones. Two light sources are splitting one picture between them. When you set a scene's colour, do not settle it with a single unified ambient: separate the faces that can see the sky from the faces that can only see the sun, and give each its own hue. One picture can carry two ambient colours, and they ought to be far apart.

Take these colours with you

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

/* Uyuu Restaurant in Sakura Sunlight · Uyuu Restaurant in Sakura Sunlight — Teyvat Palette */
:root {
  --clear-sky: oklch(0.53 0.12 249); /* Clear Sky #296fae */
  --sakura-cloud: oklch(0.7 0.113 313); /* Sakura Cloud #b789d0 */
  --petal-stone: oklch(0.61 0.031 301); /* Petal Flagstone #867f93 */
  --eave-shadow: oklch(0.36 0.028 259); /* Eave Shadow #343e4c */
  --indigo-noren: oklch(0.28 0.058 258); /* Indigo Noren #162945 */
  --lacquer-red: oklch(0.46 0.078 25); /* Lacquer Red #7e4642 */
  --gradient-uyuu-restaurant: linear-gradient(180deg, oklch(0.53 0.12 249) 0%, oklch(0.7 0.113 313) 22%, oklch(0.46 0.078 25) 44%, oklch(0.36 0.028 259) 62%, oklch(0.28 0.058 258) 76%, oklch(0.61 0.031 301) 100%);
}

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