
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 150° (used by the hero and exports), while gallery cards share a uniform 135° sweep.
How much of an opposing hue you need depends on the job it is doing. In this frame the cool span of 200°–300° amounts to 3512 pixels, 0.40% of the picture, nearly all of it on the gate deep in the canyon — and the gate's own chroma of 0.026 sits on the 0.025 grey threshold while its lightness of 0.46 is nowhere near the brightest thing here. It leads on no channel at all; it merely owns a hue nobody else has, and that is enough to walk the eye over. The warm band that re-reads Seirai Island's 83.9% of purple from deep night to dusk covers 2.3%, nearly six times as much: change a picture's nature and you pay in percent, plant a signpost and you pay in tenths of one.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Children of Echoes Secret Space, Firelit Night · Children of Echoes Secret Space, Firelit Night — Teyvat Palette */
:root {
--cold-canyon-ochre: oklch(0.24 0.018 26); /* Unlit Canyon Rock #271c1b */
--firelit-ledge: oklch(0.25 0.034 28); /* Firelit Ledge #301b18 */
--totem-ochre: oklch(0.31 0.064 30); /* Totem Ochre #4c221c */
--flame-orange: oklch(0.59 0.194 34); /* Flame Orange #d8401d */
--moss-chartreuse: oklch(0.3 0.055 95); /* Moss Chartreuse #362d07 */
--gate-violet: oklch(0.48 0.046 270); /* Gate Violet #535d78 */
--gradient-tribal-secret-space-children-of-echoes-location-context: linear-gradient(150deg, oklch(0.59 0.194 34) 0%, oklch(0.31 0.064 30) 20%, oklch(0.25 0.034 28) 46%, oklch(0.24 0.018 26) 76%, oklch(0.48 0.046 270) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.