
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.
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.
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.