Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Atocpan, Drifting Embers
NatlanDayExpansiveAdriftMild

Atocpan, Drifting Embers

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%4d76ad26%6c618c58%a97372100%ab7a57

Why it works

Alignment is not one thing. The eight hue bands here all land inside a single 0.14 slot of lightness, 0.54–0.68, while chroma is left to spread across 0.052–0.087 — the exact inverse of Tequemecan Valley, which aligned chroma instead (0.091 / 0.092 / 0.094) and let lightness run from 0.47 to 0.73. Hold one channel and the other goes free; the 160° span is what lightness gave up.

01

No lightness step along the ridgeline

The zenith measures L 0.56, chroma 0.097, 256°; the sunlit face of the massif L 0.61, 0.069, 20° — 0.05 apart in lightness, 124° apart in hue. The longest edge in the frame, climbing from the rock spine at lower left to the summit at the centre, is drawn entirely by hue; not one stretch of it is cut by light and dark. The consequence sits on the summit: the shattered floating rock and the dust plume straddle the skyline, half in the sky and half on the stone, and neither half looks pasted on. To put a subject inside a scene rather than in front of it, push it to the same lightness as the ground behind it and let hue carry the outline.

02

The lightness saved is all spent on distance

The eight hue bands use only 0.14 of lightness, while the frame runs from L 0.42 to 0.84 — and not one notch of the spare ends is wasted, all of it goes to distance. The brightest 4000 pixels form two heaps, one at (0.10, 0.65) and one at (0.96, 0.65), both the far sea at L 0.87, against the mountain at frame centre at L 0.60. Depth here runs sideways: the mountain has taken the vertical, so the distance has to withdraw to the left and right. Once lightness stops moonlighting as a hue sorter, it can say a single thing.

03

The embers are as chromatic as the sky they float in

In the two blocks of pure sky (the upper third of x 0–0.28 and 0.72–1), 332 warm pixels sit against 150,773 blue ones: the embers measure L 0.72–0.73 and chroma 0.093–0.095, the sky holding them L 0.57–0.59 and chroma 0.086–0.096 — identical in chroma, told apart by 125° of hue and 0.14 of lightness. The whole frame keeps the same discipline: the eight bands' chroma lies between 0.052 and 0.087, and the most chromatic 4000 pixels scatter across seven hue bands, the largest clump (30°–60°, 1,326 of them) taking only a third. On the same yardstick Quahuacan Cliff puts all 4000 in a single band. To run eight colours in one interface, don't reach for saturation first — check that none of them is leaning on lightness to outrank the rest.

Take these colours with you

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

/* Atocpan, Drifting Embers · Atocpan, Drifting Embers — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.56 0.097 256); /* Zenith Blue #4d76ad */
  --ochre-ridge: oklch(0.61 0.069 20); /* Ochre Ridge #a97372 */
  --summit-mauve: oklch(0.52 0.069 296); /* Summit Mauve #6c618c */
  --meadow-gold: oklch(0.62 0.078 56); /* Meadow Gold #ab7a57 */
  --drifting-ember: oklch(0.73 0.095 23); /* Drifting Ember #dd908c */
  --far-sea: oklch(0.87 0.045 249); /* Far Sea #bed7f1 */
  --gradient-atocpan: linear-gradient(180deg, oklch(0.56 0.097 256) 0%, oklch(0.52 0.069 296) 26%, oklch(0.61 0.069 20) 58%, oklch(0.62 0.078 56) 100%);
}

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