LiyueDayBustlingWarmthInk landscape

Liyue Harbor at Midday

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

0%c5f5fb28%9ec8e255%60aec478%479ebf100%0072a3

Why it works

The art of yielding: 87% of the frame is given away to blue and grey so that 2.6% of warm colour can become an entire city — a lead colour's presence is never built by adding saturation, it is granted by what the ground gives up.

The lead is 2.6% of the frame

Warm hues (20°–110°) cover just 2.6% of the pixels, yet the eye lands nowhere else — tiled eaves, apricot gold and banners crowd a narrow band across the middle, ringed by 48% blue and 39% grey. The larger the cold ground, the more expensive the warm point. To make a colour the lead, ask how much the ground has yielded to it before you ask how saturated it is.

Even the grey reads as orange

Measured at three roofs, chroma is 0.009–0.011 — very nearly pure grey. It reads as warm orange because the vast blue ground (mean 218°) lends it simultaneous contrast. The same thing happens in an interface: a neutral grey button on cold blue carries warmth without ever being nudged towards orange.

Cold has depth too

The blues sort themselves into three steps: misted sky L 0.94, karst L 0.81, harbour water L 0.66 — and chroma climbs from 0.05 to 0.10 as lightness falls. The deepest place is the most saturated, which is what gives the water depth. A cold ground need not be a flat one: hand the saturation to the shadows and the layers appear on their own.

Take these colours with you

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

/* Liyue Harbor at Midday · Liyue Harbor at Midday — Teyvat Palette */
:root {
  --sky-haze: oklch(0.939 0.05 205); /* Clear Haze #c5f5fb */
  --karst-white: oklch(0.812 0.057 235.3); /* Karst White #9ec8e2 */
  --harbor-teal: oklch(0.66 0.096 226.1); /* Harbour Teal #479ebf */
  --ginkgo-gold: oklch(0.78 0.073 86.8); /* Apricot Gold #ccb581 */
  --coral-red: oklch(0.62 0.071 12); /* Coral Vermilion #ac747b */
  --gradient-liyue-harbor: linear-gradient(172deg, oklch(0.939 0.05 205) 0%, oklch(0.812 0.057 235) 28%, oklch(0.71 0.083 218) 55%, oklch(0.66 0.096 226) 78%, oklch(0.52 0.12 235) 100%);
}

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