
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.