Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Tequemecan Valley in Clear Daylight
NatlanDayGrandWildVivid

Tequemecan Valley in Clear Daylight

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

0%6fafdd20%75b4ec58%5a763b100%864636

Why it works

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.

01

Three large fields, less than 0.003 of chroma between them

Orange 17.7% (mean 35°, chroma 0.091, L 0.47), green 31.3% (130°, 0.092, 0.53), blue 16.7% (241°, 0.094, 0.73). The chroma readings line up between 0.091 and 0.094 while the hues span 206°. This is the cheapest route to unity in a palette: unity does not require hues to sit close together, it requires chroma on one step — which amounts to declaring that these colours are lit by the same lamp. The Mondstadt–Liyue Harbor pair was about one formula wearing two identities; this study is about different hues sharing one identity.

02

Ochre and green nearly share a lightness, so the sky takes the job

Rock at L 0.47 and grass at L 0.53 are 0.06 apart, and they are the two largest fields in the frame — by rights, lightnesses that close should vibrate against each other. What actually steadies the picture is the sky at 0.73: more than 0.20 above both, taking over the top of the lightness range single-handed. Depth is thereby handed from "which is brighter" to "which is above". If you want two large fields to coexist at one lightness, some third field has to carry the value structure.

03

The accent is the only step allowed out of line

Median chroma across the frame is 0.084 with a p99 of 0.154, while the most saturated 3% of those orange canopies in the foreground measures L 0.70, chroma 0.175, hue 50°; the most saturated four thousand pixels average 0.167, at (0.28, 0.86). Their area is tiny, and they are the only thing permitted past 0.15. Because the three fields align their chroma into a background, the accent has somewhere to go — the discipline is not there to hold every colour down, it is there to clear a seat for one exception.

Take these colours with you

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.