Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Wavechaser Plain in the Cliff's Shade
Nod-KraiDaySheerCoolBright-Aired

Wavechaser Plain in the Cliff's Shade

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%5e9be418%71799545%2c395b64%71799584%99af67100%5a8abc

Why it works

Hue is reserved for «the material changed», not for «the brightness changed». On one and the same cliff, the cave mouth moves lightness alone (L 0.58 → 0.35) and walks 6° of hue (273° → 267°); between cliff and sky only chroma moves (0.044 → 0.126, 2.9×) and hue walks 19°. One family, 210°–315°, holds rock, cave shadow, sky and water — 77.18% of the frame — and none of them is ever mistaken for another. The only edge in the picture that genuinely changes hue is the meadow line at the cliff's foot, 153° (275° → 122°), and it is also the only edge whose two sides are genuinely two materials.

01

The cave mouth borrows lightness only

The large lit expanse of the cliff face measures 273°, L 0.58, chroma 0.044. The mouth gaping in its flank is 267°, L 0.35, chroma 0.063. Lightness drops 0.23 while hue differs by 6° — the frame's 1st lightness percentile is 0.25 and the darkest patch in the picture lies inside that mouth, against a median of 0.61. It still reads as «the same rock where the light does not reach» rather than as black paint, precisely because nothing but lightness was changed (chroma even climbs 0.019, since the only thing still lighting that face is the sky at chroma 0.126).

02

The sky borrows chroma only

The corner of sky at top right measures 254°, L 0.68, chroma 0.126 — the most chromatic large surface in the frame. It differs from the cliff face by 0.10 in lightness and 19° in hue, but by 2.9× in chroma. The same family keeps going: the distant peaks and haze on the right at 249°, L 0.76, chroma 0.103, and the sea washing ashore at bottom right at 251°, L 0.62, chroma 0.093. Blue 52.35% plus violet 24.83% is 77.18% of the frame. Rock, sky, haze and water crowd into one hue family, and what tells them apart is never hue.

03

The one edge that changes hue is the one edge that changes material

The meadow at the cliff's foot is the green band's 18.35%, measuring 122°, chroma 0.106, L 0.71, against the cliff's 275°, 0.052, 0.56 — 153°, the largest hue crossing in the frame, and simultaneously the only edge whose two sides really are different things (stone and living ground). A smaller exception is the red banner on the reef: 315°–45° holds 191 pixels in the whole frame, 0.02%, yet it measures 20°, chroma 0.155, peak 0.173 — the picture's chroma ceiling. Interfaces work the same way: move lightness alone for the states of one component, chroma alone for hierarchy, and the moment you move hue you have told the reader «this is a different kind of thing». One edge borrows one channel. Turn all three at once and the hierarchy stops being readable.

Take these colours with you

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

/* Wavechaser Plain in the Cliff's Shade · Wavechaser Plain in the Cliff's Shade — Teyvat Palette */
:root {
  --cliff-face: oklch(0.58 0.044 273); /* Cliff Face #717995 */
  --cave-mouth: oklch(0.35 0.063 267); /* Cave Mouth #2c395b */
  --zenith-blue: oklch(0.68 0.126 254); /* Zenith Blue #5e9be4 */
  --far-peaks: oklch(0.76 0.103 249); /* Far Peaks #7cb6f0 */
  --shore-water: oklch(0.62 0.093 251); /* Shore Water #5a8abc */
  --foot-meadow: oklch(0.72 0.1 123); /* Foot Meadow #99af67 */
  --banner-red: oklch(0.49 0.155 20); /* Banner Red #a62f3a */
  --gradient-lunar-treasury-wavechaser-plain-location-context: linear-gradient(180deg, oklch(0.68 0.126 254) 0%, oklch(0.58 0.044 273) 18%, oklch(0.35 0.063 267) 45%, oklch(0.58 0.044 273) 64%, oklch(0.72 0.1 123) 84%, oklch(0.62 0.093 251) 100%);
}

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