Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Coatepec Mountain under a Blazing Sun
NatlanDayBlazingOpenTotemic

Coatepec Mountain under a Blazing Sun

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 175° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%4f97ed32%72a7c168%a9614d100%7a4936

Why it works

Carry the opposite colour into the dominant mass: the sky (254°, 40% of the frame) and the red rock (37°, 21%) sit 143° apart at no small chroma — and the bands flowing across the cliff face measure 231°, only 23° from the sky. What makes two colliding halves one picture rather than two posters is that one half has borrowed the other's colour.

01

The cliff has the sky's colour written on it

Take only the blue-green pixels out of the cliff-face region — sixteen thousand of them — and they average 231° at chroma 0.068; the sky is 254° at 0.147. Twenty-three degrees apart, and on rock sitting at 37° they read as the same blue. The picture mediates itself: rather than inserting a third colour between two, it paints a little of the opposite colour *inside* the dominant one. Interfaces work the same way — to stop an accent fighting a large ground, put a little of the accent's own family into the ground's texture, rules and icons; it costs less than adding an intermediate colour.

02

The most saturated thing is the sky, and it is not the lead

The sky measures chroma 0.147, peaking at 0.205 — the highest in the frame; the rock only reaches 0.098. Usually the most saturated field steals the lead. It does not here, because it is also the lightest (L 0.67) and carries no detail — saturation plus lightness plus emptiness reads as *bright*, not as *near*. To keep a field saturated without letting it take over, strip its detail.

03

A third band does the grounding

The mesa's grass at 72°, chroma 0.092, holds the frame's lower edge and puts the boundary between teal and ochre on the ground rather than in mid-air. Of the three knobs for a warm-cold collision — lightness, chroma, area — the Chasm study turned area. Here none of the three moves much; the work is done by borrowing a colour and grounding it with one warm band. Same problem, different tool.

Take these colours with you

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

/* Coatepec Mountain under a Blazing Sun · Coatepec Mountain under a Blazing Sun — Teyvat Palette */
:root {
  --noon-blue: oklch(0.67 0.147 254); /* Noon Blue #4f97ed */
  --mesa-ochre: oklch(0.57 0.098 37); /* Mesa Ochre #a9614d */
  --banded-teal: oklch(0.7 0.068 231); /* Banded Teal #72a7c1 */
  --dry-gold: oklch(0.55 0.092 72); /* Dry Gold #93682e */
  --crimson-crown: oklch(0.57 0.081 331); /* Crimson Crown #93668d */
  --gradient-coatepec-mountain: linear-gradient(175deg, oklch(0.67 0.147 254) 0%, oklch(0.7 0.068 231) 32%, oklch(0.57 0.098 37) 68%, oklch(0.457 0.074 41.6) 100%);
}

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