Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Ardravi Valley, Clear Day
SumeruDayVerdantLimpidAbundant

Ardravi Valley, Clear Day

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%c8f4fd14%67b4e646%569eb474%54ae71100%6fc843

Why it works

A sky in the frame does not automatically take the chroma ranking — that depends on how saturated the sky itself is. Ardravi's sky measures chroma 0.106, while the grass knoll along the bottom edge measures 0.189, and the frame's peak of 0.206 is there too: all 4000 of the most chromatic pixels land on that knoll. In Harvisptokhm under a Dry Sky, dry air pushes the sky to 0.165 and the best thing on the ground reaches only 0.097 — no contest. To make the foreground the protagonist of chroma, don't saturate the foreground; drain the sky.

01

Four thousand pixels, every one underfoot

All 4000 of the frame's most chromatic pixels fall in the single 120°–150° bin, centred at (0.61, 0.97) — the flowering grass knoll along the very bottom edge, exactly where the viewpoint stands. Measured on its own (rect from 0.55, 0.94) it is L 0.76 / chroma 0.164 / hue 140°, and the peak of 0.203 is here. The sky along the top edge is 0.106; the ridges at the far end of the valley, 0.079. The most saturated step is neither in the light nor in the distance — it is under your feet. To paint an outdoor scene that says "you are standing here", hand the top of the chroma range to the strip along the bottom edge, not to the sky.

02

The air took half of it, and the ceiling never moved

Measure the same grass slope three times from near to far: bottom edge, chroma 0.164 / hue 140°; middle-ground slope, 0.126 / 152°; far end of the valley, 0.079 / 221°. The air takes more than half the chroma and bends the hue by 81°. Yet the frame's ceiling is still 0.206, because it sits on the nearest bin and nothing stands in front of that bin. An outdoor chroma ceiling is not set by how thick the air is, but by what stands in front of the nearest patch of ground. And because this air owns a hue, distance is converted into the sky's 239° rather than bleached out: achromatic pixels (C<0.025) come to just 0.10% of the frame.

03

It reads as a green valley; 62.42% of it is blue

The frame carries only three hue bands: blue 62.42%, cyan 23.47%, green 14.00% — and the 180°-wide window from 270°–90° holds 8 pixels in the whole picture. Blue wins the area by a landslide, yet everyone calls this a green valley: the green band averages chroma 0.129, 1.6 times the blue band's 0.080, and nearly all of it is pressed into the lower half. Area belongs to the air, chroma belongs to what is underfoot. To let one hue define a picture, give it chroma and position; you can give the area away entirely.

Take these colours with you

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

/* Ardravi Valley, Clear Day · Ardravi Valley, Clear Day — Teyvat Palette */
:root {
  --valley-grass: oklch(0.75 0.189 137); /* Valley Grass #6fc843 */
  --slope-moss: oklch(0.68 0.126 152); /* Slope Moss #54ae71 */
  --far-ridge-cyan: oklch(0.66 0.079 221); /* Far Ridge Cyan #569eb4 */
  --valley-sky: oklch(0.74 0.106 239); /* Valley Sky #67b4e6 */
  --cloud-rim: oklch(0.94 0.047 211); /* Cloud Rim White #c8f4fd */
  --gradient-ardravi-valley: linear-gradient(180deg, oklch(0.94 0.047 211) 0%, oklch(0.74 0.106 239) 14%, oklch(0.66 0.079 221) 46%, oklch(0.68 0.126 152) 74%, oklch(0.75 0.189 137) 100%);
}

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