MondstadtDayVastBitingAutumn

Dragonspine, Autumn Snow

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%558aa616%d0bab046%60697072%8f9a98100%49736f

Why it works

Six-tenths grey is a peace treaty between three colours: sky blue (233°), autumn gold (67°) and meltwater teal (188°) sit more than a hundred degrees apart and ought to clash — 63% neutral rock keeps them apart and strings them together at once. To put several hues in one frame, first lay a ground that says nothing.

Grey as the mediator

63.1% of pixels fall below chroma 0.05: the slopes, the rock faces, the shadowed side of the snow. The three remaining hues — sky 233°, autumn woods 67°, river 188° — are 114° to 159° apart, and yet none of them ever touches another. Every colour's neighbour is grey. To use three colours in one interface, first give them a neutral ground that takes up six-tenths of it.

The dragon's bones are the mountain's grey

Durin's skeleton draped over the ridge measures L 0.51, C 0.008 — all but identical to the rock beneath it (L 0.52, C 0.016). It is recognised by shape alone; colour does nothing to help. Which says the reverse too: when the silhouette is strong enough, colour can step aside entirely. Not every element needs a colour of its own.

The warm colours all stand at the edges

The 11.6% of warm pixels (mean 74°) sit only along the four borders: stands of autumn trees left and right, a stroke of rimlight top left. The central massif has not one warm pixel. Warm outside, cold inside — the mountain's bite is drawn out by contrast rather than stated, and cropping the massif on its own stops it feeling cold at all. To say cold, don't reach only for cold colours; give them warm neighbours.

Take these colours with you

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

/* Dragonspine, Autumn Snow · Dragonspine, Autumn Snow — Teyvat Palette */
:root {
  --alpine-sky: oklch(0.607 0.071 233.4); /* Clear Sky Blue #558aa6 */
  --alpenglow: oklch(0.805 0.029 47.8); /* Warm Rimlight #d0bab0 */
  --slate-grey: oklch(0.515 0.016 247.1); /* Rock Grey #606970 */
  --old-snow: oklch(0.676 0.012 189.2); /* Lingering Snow #8f9a98 */
  --autumn-gold: oklch(0.687 0.105 66.5); /* Autumn Gold #c68d4f */
  --meltwater-teal: oklch(0.523 0.047 188.4); /* Meltwater Teal #49736f */
  --gradient-dragonspine: linear-gradient(180deg, oklch(0.607 0.071 233) 0%, oklch(0.805 0.029 48) 16%, oklch(0.515 0.016 247) 46%, oklch(0.676 0.012 189) 72%, oklch(0.523 0.047 188) 100%);
}

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