Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Windrest Peak under Drifting Cloud
MondstadtDayLimpidFar-reachingWeightless

Windrest Peak under Drifting Cloud

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%4582fa30%f0f6fc48%27779e72%7bc0bc100%6bcb67

Why it works

The first way to live with an empty seat is to hand the focus to something that is not on the wheel at all: the slope at 143° and the sky at 244° are 101° apart, which puts the equidistant point at 13.5°, and yet 330°–60° holds only 315 pixels in the whole frame (0.036%), with chroma topping out at 0.080 — nobody is sitting on that degree. Instead, 3937 of the 4000 brightest pixels crowd into a single cell of cloud at the right edge, L 1.00, C 0.000. Achromatic is not on the wheel, so it owes no hue to either family; the gap between two large colours can stay empty, because a genuine white can cut in from any angle.

01

All three candidate positions are empty at once

330°–60° holds 315 pixels. Split further: 42 in 345°–15°, 55 in 290°–335°, 114 in 35°–75° — the equidistant point and both complement points, all vacant. Even the dandelions scattered across the lower slope, which read as yellow flowers, measure 2,091 pixels at hue 101°, still inside the green band; across the whole frame, 45°–90° accounts for 0.06%. From top to bottom this picture is three bands — sky 67.89%, mist and water 9.23%, grass 17.56% — and it does not intend to spend a single warm pixel.

02

White does not have to choose a position

3937 of the 4000 brightest pixels land in one cell at (0.8, 0.2), L 1.00 / C 0.000: the great cumulus bank at the right edge is pure white, not «a very pale blue». One step away, the zenith at upper left measures L 0.63 / C 0.190 / 262°, and 3850 of the 4000 most chromatic pixels are there too. One sheet of sky spends chroma up to 0.190 at one end and surrenders it to zero at the other, and that is why the 101° gap between the families never has to be filled. When no accent hue fits, lay down something thoroughly achromatic — it conflicts with nobody, because it holds no position.

03

A mediator is not a stand-in for an accent

The 165°–210° band takes 9.23%, and its hue of 192° falls squarely between the slope's 143° and the sky's 244° (49° to one side, 52° to the other), with lightness 0.76 and chroma 0.070 both held down — that is the water and haze that erase the horizon across the middle, doing the same job as the pine belt in «Galesong Hill in Sun and Pine Shade». But it lies inside the short arc, and the seat lies outside it: a mediator has to be close to both families, an accent has to be far from both. A picture can have one without the other. Do not let the mediator settle the accent's account.

Take these colours with you

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

/* Windrest Peak under Drifting Cloud · Windrest Peak under Drifting Cloud — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.63 0.19 262); /* Zenith Blue #4582fa */
  --cumulus-white: oklch(0.97 0.01 250); /* Cumulus White #f0f6fc */
  --mist-water: oklch(0.76 0.07 192); /* Mist and Water #7bc0bc */
  --island-rock: oklch(0.54 0.097 234); /* Island Rock #27779e */
  --slope-green: oklch(0.76 0.164 143); /* Slope Green #6bcb67 */
  --dandelion: oklch(0.9 0.134 101); /* Dandelion Yellow #f1e171 */
  --gradient-windrest-peak: linear-gradient(180deg, oklch(0.63 0.19 262) 0%, oklch(0.97 0.01 250) 30%, oklch(0.54 0.097 234) 48%, oklch(0.76 0.07 192) 72%, oklch(0.76 0.164 143) 100%);
}

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