InazumaDayHazySakuraSerene

Inazuma City, Sakura in the Mist

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%85bbda30%bd97c755%70acb278%958ab7100%5184b7

Why it works

Two ways of using an accent are settled by this one frame. The sakura pink is about 3% — near the same area as Liyue Harbor's warm colour (2.6%) — but scattered as dozens of small points across the whole island. Gathered, an accent is the lead; scattered, it is texture. Same area, different job.

A scattered accent becomes atmosphere

Sakura pink (319°, C 0.080) plus the electro violet come to roughly 3%, broken into dozens of small clusters spread over the island; Liyue Harbor's almost identical area of warm colour instead gathers into one narrow band. Gathered reads as focus, scattered reads as texture — break it small and spread it evenly for atmosphere, pull it into one place for a lead.

The city is a silhouette

The keep measures 250°, L 0.60 against a sea of mist at L 0.77 — inside 83% teal mist, the architecture is not seen by a difference in colour but by 0.17 of lightness. A city in mist is a silhouette: leave the detail to the outline, and colour can be given away to the environment entirely.

Violet is Inazuma's papers

The only non-teal hue with any real presence is the violet-pink family at 296°–319° — the violet of lightning and the pink of the blossom share one hue family. A region's visual memory can rest on a single accent family: let the ground colour change with the weather and the hour as it likes, so long as the papers stay the same.

Take these colours with you

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

/* Inazuma City, Sakura in the Mist · Inazuma City, Sakura in the Mist — Teyvat Palette */
:root {
  --sea-mist: oklch(0.765 0.072 235.4); /* Sea Mist Teal #85bbda */
  --shallow-teal: oklch(0.706 0.063 203); /* Shallows Teal #70acb2 */
  --castle-indigo: oklch(0.599 0.096 250.4); /* Keep Silhouette #5284b7 */
  --sakura-pink: oklch(0.727 0.08 318.8); /* Sakura Pink #bd97c7 */
  --electro-violet: oklch(0.66 0.067 296); /* Electro Violet #958ab7 */
  --gradient-inazuma-city: linear-gradient(180deg, oklch(0.765 0.072 235) 0%, oklch(0.727 0.08 319) 30%, oklch(0.706 0.063 203) 55%, oklch(0.66 0.067 296) 78%, oklch(0.599 0.096 250) 100%);
}

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