LiyueDayBrightExpansiveFestive

Northland Bank in Full Sun

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%398ccc22%b7d1cb44%68a86458%8db88a74%e1994c100%f25d50

Why it works

A man-made thing's colour comes in two halves: the borrowed and the owned. This gate's glazed tiles and the tree crowns on the rock share one hue, 143°, and the tiles are three tenths paler than the leaves (chroma 0.081 against 0.117). The only colour it owns is vermilion — of the eighty-three thousand pixels of sky and cloud in the upper left exactly 3 fall inside the warm window, and the cliff behind the gate holds none at all. A borrowed hue buys belonging; the one hue you own carries identity.

The tiles were fired to match the trees

The glazed tiles of the great roof at lower right measure L 0.74, chroma 0.081, hue 143°; the tree standing on the rock to the left of the gate measures L 0.67, chroma 0.117, hue 143° — the same hue to the degree, with the man-made half carrying three tenths less chroma. So the green roofs do not read as a slab of colour but as an extension of the hillside: the more of them stack up, the more the building looks grown out of the slope. To settle something new into a place, borrow its hue from the site and then yield a step of chroma.

Vermilion is the hue this landscape cannot grow

The sky and cloud of the upper left come to eighty-three thousand pixels; exactly 3 of them fall inside the 330–45° warm window, at chroma 0.028. The twenty thousand pixels of cliff behind the gate hold none at all. Meanwhile the 4,000 most saturated pixels in the frame are all 28° at chroma 0.186, gathered at (0.63, 0.69) on the column shafts and in front of the steps. The blue band takes 24.3% of the area and that sky measures chroma 0.125 — it loses to the red on neither count. Yet the eye still goes to the gate first, because vermilion is the one colour this landscape cannot produce. To establish identity, don't compete on chroma; find the hue the environment left empty.

Vermilion is painted only on what stands up

The red is rationed strictly to vertical members: the two columns (lit face L 0.73, chroma 0.147; shaded face L 0.55, chroma 0.131), the railings on either side, and the flight of steps at the centre (L 0.64, chroma 0.112, hue 39°). Roofs, walls and beams get not an inch of it — the most saturated 3% around the plaque is 32° at chroma 0.173, and it comes from the capitals' trim and the frame of the signboard, not from tiles. What the vermilion draws is therefore exactly the skeleton of a gate, while the glazed roofs go on merging with the slope. Give one accent colour to one class of member only, and hierarchy appears without a single dividing line.

Take these colours with you

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

/* Northland Bank in Full Sun · Northland Bank in Full Sun — Teyvat Palette */
:root {
  --cerulean-sky: oklch(0.62 0.125 245); /* Cerulean Sky #398ccc */
  --cliff-stone: oklch(0.84 0.03 179); /* Cliff Stone #b7d1cb */
  --canopy-green: oklch(0.67 0.117 143); /* Canopy Green #68a864 */
  --glaze-green: oklch(0.74 0.081 143); /* Glaze Green #8db88a */
  --plaque-gold: oklch(0.74 0.127 65); /* Plaque Gold #e1994c */
  --vermilion-post: oklch(0.67 0.186 28); /* Vermilion Post #f25d50 */
  --gradient-northland-bank: linear-gradient(180deg, oklch(0.62 0.125 245) 0%, oklch(0.84 0.03 179) 22%, oklch(0.67 0.117 143) 44%, oklch(0.74 0.081 143) 58%, oklch(0.74 0.127 65) 74%, oklch(0.67 0.186 28) 100%);
}

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