
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 190° (used by the hero and exports), while gallery cards share a uniform 135° sweep.
To make several hues read as one place, align their chroma first. This picture's three large fields average chroma 0.091 (ochre rock), 0.092 (grassland) and 0.094 (sky) — hues 95° and 111° apart, chroma all but identical, which is why they look like three things under one light rather than three stickers.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Tequemecan Valley in Clear Daylight · Tequemecan Valley in Clear Daylight — Teyvat Palette */
:root {
--mesa-ochre: oklch(0.47 0.091 35); /* Mesa Ochre #864636 */
--plateau-green: oklch(0.53 0.092 130); /* Plateau Green #5a763b */
--valley-sky: oklch(0.73 0.094 241); /* Valley Sky #6fafdd */
--flame-canopy: oklch(0.7 0.175 50); /* Flame Canopy #f1771e */
--far-ridge: oklch(0.75 0.104 246); /* Far Ridge #75b4ec */
--gradient-tequemecan-valley: linear-gradient(190deg, oklch(0.73 0.094 241) 0%, oklch(0.75 0.104 246) 20%, oklch(0.53 0.092 130) 58%, oklch(0.47 0.091 35) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.