Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Bantan Sango Detective Agency in the Shade
InazumaDayCool shadeQuietFaint chill

Bantan Sango Detective Agency in the Shade

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

0%3c85c416%a881ba34%32693e55%202d3a74%506373100%817a84

Why it works

Whether a field of blue is sky or shadow is settled by measuring chroma. 22.70% of this picture falls in the blue band, and not one of its 4000 most chromatic pixels is blue. The 199,894 pixels in 210°–270° average chroma 0.054; sorted by chroma, only the top 3% (5,997 of them) reach 0.124 — exactly matching the patch of sky showing in the top-left corner at 0.120. The share skylight hands to shadowed surfaces keeps the hue intact and gives up more than half the chroma. Do not sink a shadow towards black or drift it towards grey: hold the sky's hue still and move only chroma.

01

A fifth of the frame is blue, and none of the top four thousand is

The blue band is 22.70%. Yet the 4000 most chromatic pixels go to the pine and grassy bank on the right (2505 of them, hue 139°) and the cherry over the roof (1431, at 313°); 210°–270° places none at all. The mean explains it: those 199,894 blue pixels carry chroma 0.054, while the real sky in the top-left corner carries 0.120. Do not file a wide blue as sky on sight — skylight loses more than half its chroma the first time it changes hands.

02

The hue never moves; only chroma does

That corner of sky reads 247°, the upper run of the long staircase 245°, the agency's shadowed boarding 250°, and the blue band as a whole averages 251° — four readings inside 6°. Chroma, meanwhile, falls from the sky's 0.120 to the staircase's 0.035 and the boarding's 0.030. That single move is why 45.10% of this picture sits below the neutral threshold with a chroma median of only 0.028. A shadow is not a separately mixed colour; it is the low-chroma version of the same one.

03

The sky can be one corner and still hand out the same share

In Yae Publishing House under an Open Sky the blue band takes 49.95%, almost all of it sky, and the 74,563 blue pixels below the skyline read L 0.40, chroma 0.046, hue 252°. Here the sky is down to one corner, and the same shadow blue reads L 0.43, chroma 0.054, 251° — 1° apart in hue, 0.008 apart in chroma. The two frames differ by more than double in how much sky they keep, and the share paid out to shadowed surfaces barely moves. Composition decides how much sky you see, not what colour the shadows are. So to shift a picture's overall cast, change the sky — do not go repainting shadows one at a time.

Take these colours with you

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

/* Bantan Sango Detective Agency in the Shade · Bantan Sango Detective Agency in the Shade — Teyvat Palette */
:root {
  --sky-corner: oklch(0.6 0.12 247); /* Corner of Sky #3c85c4 */
  --stair-shadow: oklch(0.49 0.035 245); /* Stair Shadow #506373 */
  --eave-ink: oklch(0.29 0.03 250); /* Eave Ink #202d3a */
  --petal-stone: oklch(0.59 0.016 318); /* Petal Flagstone #817a84 */
  --pine-shade: oklch(0.47 0.09 149); /* Pine Shade #32693e */
  --sakura-crown: oklch(0.66 0.093 315); /* Sakura Crown #a881ba */
  --gradient-bantan-sango-detective-agency: linear-gradient(155deg, oklch(0.6 0.12 247) 0%, oklch(0.66 0.093 315) 16%, oklch(0.47 0.09 149) 34%, oklch(0.29 0.03 250) 55%, oklch(0.49 0.035 245) 74%, oklch(0.59 0.016 318) 100%);
}

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