Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Aisa Bathhouse in Blossom Light
InazumaDayBrightCrispBlossom-scented

Aisa Bathhouse in Blossom Light

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 160° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%74539d18%2067b132%ebfcfe60%1f324586%515b70100%a278a5

Why it works

What a mass of colour gets called is decided by the small lit part of it: inside the cherry canopy, 70,270 pixels fall in the violet band and average 303°, L 0.51, chroma 0.117, while only 3,860 land in the pink band — 5.2% of them, sitting 0.14 higher in lightness, and they sign the whole tree's name by themselves. To make a large field read as a colour, move only its lit layer there.

01

The tree is violet; the pink is the light

Measure the canopy rectangle through two hue windows separately: 270°–315° holds 70,270 pixels averaging 303°, L 0.51, chroma 0.117; 315°–345° holds just 3,860, averaging 321° at L 0.65. The second group is one eighteenth the size of the first and 0.14 lighter — it is the layer of blossom the sun strikes and passes through. The eye gives no vote to hues in shadow; it counts only the sample it can confirm as a lit surface.

02

Pink here is a lightness band, not a hue

Only 0.99% of the frame falls in 315°–345°, averaging L 0.63, against a frame-wide lightness median of 0.45. The petals scattered on the plaza measure 327° at L 0.56, while the flagstones inside the same rectangle sit at L 0.39; the petals drifting in mid-air measure 329° at L 0.56 against a sky of L 0.48. Pink never once appears in shadow in this picture — every time it shows up it stands 0.17 or 0.08 above its neighbour. Pink here is not a mixed hue but a by-product of being lit.

03

The breath saved for the 5%

69.84% of the frame crowds into the blue band at a mean of 252°: the sky, the roof tiles, the bathhouse timbers (250°) and the plaza flagstones (266°) share one hue, and this cherry tree is the only exception. Painted 321° pink across the whole canopy, it would have to face down a sky of chroma 0.136 across a 68° gap. What the picture does instead is pull 94.8% of the canopy back to 303°, only 50° from the sky, and hand the pink to the lit 5%. To make a large field read as a colour, move its lit edge, not its body — it costs half the chroma budget and looks more like real light.

Take these colours with you

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

/* Aisa Bathhouse in Blossom Light · Aisa Bathhouse in Blossom Light — Teyvat Palette */
:root {
  --sakura-violet: oklch(0.51 0.117 303); /* Canopy Violet #74539d */
  --lit-petal: oklch(0.63 0.081 324); /* Lit Petal #a278a5 */
  --clear-sky: oklch(0.51 0.136 253); /* Clear Sky #2067b1 */
  --cumulus-white: oklch(0.98 0.018 204); /* Cloud White #ebfcfe */
  --bathhouse-timber: oklch(0.31 0.043 250); /* Bathhouse Ink #1f3245 */
  --plaza-flagstone: oklch(0.47 0.036 266); /* Flagstone Blue #515b70 */
  --gradient-aisa-bathhouse: linear-gradient(160deg, oklch(0.51 0.117 303) 0%, oklch(0.51 0.136 253) 18%, oklch(0.98 0.018 204) 32%, oklch(0.31 0.043 250) 60%, oklch(0.47 0.036 266) 86%, oklch(0.63 0.081 324) 100%);
}

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