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