Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Avidya Forest, Clearing after Rain
SumeruDayLimpidExpansiveDamp

Avidya Forest, Clearing after Rain

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%58a6de22%5cafdc45%79bee274%4996a3100%71b385

Why it works

To make air read thick, don't add grey to the distance — count how many warm pixels are left. In Avidya Forest the window 315°–45° (90° wide) returns zero pixels across the whole frame, and widening it to 300°–60° (120° wide) yields only 3. Meanwhile the achromatic share (C<0.025) is just 0.38%: not one patch of grey is laid down. The two dirt paths crossing the woods measure hue 210° and 218° — the same family as the 242° of the sky overhead. Thickness is something you delete into being, not something you tune.

01

The dirt paths are cyan, and so are the wooden houses

From the wooden houses and bridges at the great tree's roots, two dirt paths run right across the woods. The middle stretch (from 0.40, 0.72) measures L 0.63 / chroma 0.078 / hue 210°; the right-hand stretch (from 0.63, 0.78) is L 0.57 / 0.081 / 218°. They read as ochre earth in the picture, yet they measure as kin to the sky. The 90°-wide window 315°–45° is empty across the entire frame; widen it to the 120° of 300°–60° and it yields only 3 pixels at a mean chroma of 0.031. 〈Brightcrown Mountains in Plain Daylight〉proved a hue band can go empty with only 2 pixels left in 345°–45°; Avidya Forest widens the window to 90° and still comes back with zero. The warmth was not muted. It was not left at all.

02

Grey is 0.38%, yet the mist is the largest thing in the frame

Measured on the same ruler (the bench's C<0.025), Avidya Forest is 0.38% achromatic, against the 1.43% of 〈Vanarana, Green Noon〉— the study of "harmony without grey". But Vanarana leaned on a chroma hierarchy: green 0.131 against cyan 0.059, better than two to one. Avidya Forest's three hue bands read green 0.095 / cyan 0.076 / blue 0.094, a spread of only 0.019 — no hierarchy at all. Its entire budget goes into area: the blue band 79.59%, the cyan band 14.48%, the green band 5.53%. The mist on the valley floor measures 232° / chroma 0.087 — a large surface with a hue, not a white veil. To paint mist, decide its hue before you decide how white it is.

03

Not even the nearest cell keeps its local colour

〈Sumeru City in Cyan Daylight〉left a rule: the last cell in the queue must keep one local colour the sky has not remade, or "further means closer to the sky" cannot be read — its lower-right grass slope measures hue 148° / chroma 0.124, and the frame's peak of 0.170 sits there too. Avidya Forest keeps nothing. The grass mound along the bottom edge (from 0.06, 0.86) measures hue 184°, already outside the green band; search that rectangle for 90°–165° and it returns 3288 pixels, under a fifth of it. Instead, 3822 of the frame's 4000 most chromatic pixels land on the farthest ridge along the right edge, mean 253° / chroma 0.137, where the frame's peak of 0.165 also sits — while the sky overhead peaks at only 0.118. Give up the reference and depth has to be said some other way; this picture says it with that 90° of emptiness.

Take these colours with you

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

/* Avidya Forest, Clearing after Rain · Avidya Forest, Clearing after Rain — Teyvat Palette */
:root {
  --cleared-sky: oklch(0.7 0.113 242); /* Cleared Sky #58a6de */
  --far-ridge: oklch(0.61 0.137 253); /* Far Ridge Blue #4085d3 */
  --tree-town: oklch(0.72 0.104 234); /* Tree-Town Teal #5cafdc */
  --valley-haze: oklch(0.77 0.087 232); /* Valley Haze #79bee2 */
  --path-cyan: oklch(0.63 0.078 210); /* Path Cyan #4996a3 */
  --near-slope: oklch(0.71 0.095 153); /* Near Slope Green #71b385 */
  --gradient-avidya-forest: linear-gradient(180deg, oklch(0.7 0.113 242) 0%, oklch(0.72 0.104 234) 22%, oklch(0.77 0.087 232) 45%, oklch(0.63 0.078 210) 74%, oklch(0.71 0.095 153) 100%);
}

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