Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Chenyu Vale: Upper Vale, Backlit
LiyueTenderAbundantTranslucent

Chenyu Vale: Upper Vale, Backlit

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%c295b024%fed89842%ae7d5666%a98959100%54692f

Why it works

In a backlit frame the brightest and most saturated point is not on the sun, it is on a leaf: the 4,000 brightest pixels fall into two clusters, the sunlight in the gap between the peaks at L 0.90 and chroma 0.091, the pierced canopy at the right edge at L 0.93 and chroma 0.177. Reflection can only wash a colour toward white; transmission multiplies the light's lightness by the material's own hue — so to paint light, hand the peaks to whatever the light passed through, and leave the source itself light and pale.

01

The brightest point is a leaf

The 4,000 brightest pixels in the frame land in two clusters. One is at (0.53, 0.43), the gap between two karst peaks with the sun sitting in it, averaging L 0.90 and chroma 0.091. The other is at (0.96, 0.37), a canopy at the right edge run through from behind by the light, averaging L 0.93 and chroma 0.177. The leaf is brighter than the sun, and nearly twice as saturated.

02

The whole sky never passes 0.082

The two bands that make the sky — red 345°–15° at 12.11%, pink 315°–345° at 4.52% — both stop at a peak chroma of exactly 0.082, and the top 6% of the frame measures L 0.72 at chroma 0.064, against a peak of 0.218 across the bottom two-thirds. The reflecting surfaces have been washed the same way: only 8 pixels in the entire frame land between 165° and 315°, and even the lake reads 77° yellow-green (in the other half of the same valley, «Chenyu Vale: Southern Mountain in Bright Mist», the stretch from 165° to 270° alone accounts for 97.12%). Scattering and reflection lift the whole spectrum together, and the direction they lift it is white, not pure — a sunset may look saturated, but the saturated thing is never the sky.

03

Transmission is lightness times hue

Pull out only the most chromatic 3% of that canopy on the right edge: L 0.88, chroma 0.197, hue 125° — the top of the lightness ranking and the top of the chroma ranking are the same handful of pixels. A thin leaf does not bounce the light back, it lets the light through carrying the leaf's own hue, which is how both channels reach their ceiling at once; a reflecting surface goes paler for every step it goes brighter. To make something in an interface look lit, don't add a whiter highlight — add a thin layer its own hue can show through.

Take these colours with you

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

/* Chenyu Vale: Upper Vale, Backlit · Chenyu Vale: Upper Vale, Backlit — Teyvat Palette */
:root {
  --dusk-mauve: oklch(0.72 0.064 342); /* Dusk Mauve #c295b0 */
  --sun-gap-gold: oklch(0.9 0.091 80); /* Sun-Gap Gold #fed898 */
  --lit-leaf: oklch(0.88 0.197 125); /* Lit Leaf #baed43 */
  --autumn-crown: oklch(0.61 0.143 47); /* Autumn Crown #c6642c */
  --hazed-bank: oklch(0.63 0.081 59); /* Hazed Bank #ae7d56 */
  --lake-sheen: oklch(0.65 0.076 77); /* Lake Sheen #a98959 */
  --lotus-pad: oklch(0.49 0.087 126); /* Lotus Pad #54692f */
  --gradient-chenyu-vale-upper-vale: linear-gradient(180deg, oklch(0.72 0.064 342) 0%, oklch(0.9 0.091 80) 24%, oklch(0.63 0.081 59) 42%, oklch(0.65 0.076 77) 66%, oklch(0.49 0.087 126) 100%);
}

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