Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Lempo Isle in Night Blue
Nod-KraiNightDeep NightHearthMachinery

Lempo Isle in Night Blue

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%184ab830%273a5d62%d1847182%37563a100%debcad

Why it works

An accent's chroma budget is handed out by how far its hue sits from the field's: 73.04% of this night scene is the blue band at mean chroma 0.145, and the sky itself is the chroma ceiling (peak 0.282). The lamp on the tall pole at the right is only 23° from the blue band's 259°, and it dares push chroma to 0.239 — past the frame's 99th percentile of 0.222. Every warm pixel, 132° away, adds up to 45,126 of them, 5.13% of the frame, and peaks at 0.165 — short of that percentile. An accent in the family buys chroma; an accent opposing it can only buy lightness.

01

The sky is the most saturated thing here

3997 of the frame's 4000 most chromatic pixels fall in 240°–270° at mean chroma 0.239, positioned at (0.38, 0.09) — the night sky along the top edge. Measured as a block, the top 15% reads L 0.45, chroma 0.183, 263°, peak 0.282. The blue family holds 73.04% of the frame at mean chroma 0.145, and the frame's own chroma median is 0.130 — the median is all but the sky's own reading, because the sky is this picture's majority. Only 3.91% is achromatic; there is no grey to give away. The chroma channel was sold out before the picture began, so every lamp that wants to spend chroma has to bargain with the sky.

02

The two lamps each buy one thing

The lamp atop the tall pole on the right measures L 0.39, chroma 0.141, 271° as a block; its most chromatic 3% is L 0.56, chroma 0.222, 282°, peaking at 0.239 — only 23° from the blue band's 259°, and yet it lifts chroma past the frame's 99th percentile of 0.222, while its lightness sits 0.02 *below* the frame median of 0.41. The open furnace at the foot of the great ring dome does the opposite: L 0.72, chroma 0.102, 44° as a block, and counting warm pixels alone L 0.69, chroma 0.100, 35°, peak 0.144. It is 132° from the blue band, its lightness runs 0.28 above the median, and its chroma never touches the 99th percentile. Two lamps in one village, one buying chroma only and one buying lightness only — and which it buys is set by how many degrees it stands from the night sky.

03

Warm gets the lightness axis

Sweep the whole frame for 330°–90° and you get 45,126 pixels, 5.13% of it, mean L 0.56, chroma 0.064, 31°, peak 0.165. Look at what they land on, one by one: the furnace reflected in the river at L 0.82, chroma 0.044 (667 pixels); the rust-coloured scrub bottom left at L 0.43, chroma 0.045; the same scrub bottom right at L 0.51, chroma 0.075; the furnace mouth itself at L 0.69, chroma 0.100. Lightness spreads over a run of 0.39; chroma stays locked between 0.044 and 0.100 throughout. 〈Asase Shrine at Dusk Star〉 argued that chroma is taxed on area, lowering only the larger pole (the 53.95% dusk sky paid down to 0.050–0.060 while the 15.50% grass stayed at 0.072). Here it is inverted: the largest area, 73.04%, is exactly the most chromatic pole, and what gets pushed down is the 5.13% of warm. The tax base has been swapped for hue distance. Putting an accent on a deep blue interface: let a violet in the same family run its chroma all the way up; an opposing orange should not be made more saturated, it should be made brighter.

Take these colours with you

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

/* Lempo Isle in Night Blue · Lempo Isle in Night Blue — Teyvat Palette */
:root {
  --night-vault: oklch(0.45 0.183 263); /* Night Vault #184ab8 */
  --machine-indigo: oklch(0.35 0.067 262); /* Machine Indigo #273a5d */
  --furnace-orange: oklch(0.69 0.1 35); /* Furnace Orange #d18471 */
  --pole-lamp-violet: oklch(0.56 0.222 282); /* Pole Lamp Violet #6855f0 */
  --water-gold: oklch(0.82 0.044 44); /* Water Gold #debcad */
  --slope-green: oklch(0.42 0.058 147); /* Slope Green #37563a */
  --gradient-lempo-isle: linear-gradient(180deg, oklch(0.45 0.183 263) 0%, oklch(0.35 0.067 262) 30%, oklch(0.69 0.1 35) 62%, oklch(0.42 0.058 147) 82%, oklch(0.82 0.044 44) 100%);
}

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