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