Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Children of Echoes Secret Space, Firelit Night
NatlanNightFirelitOchre DarkNarrow Mouth

Children of Echoes Secret Space, Firelit Night

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

0%d8401d20%4c221c46%301b1876%271c1b100%535d78

Why it works

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.

01

The fire spent the chroma budget

The brazier at upper left is the frame's chroma ceiling: 3410 of the 4000 most chromatic pixels land at (0.15, 0.25), averaging L 0.59 / chroma 0.194 with a peak of 0.233. The painted totem below it measures L 0.31 / 0.064, the firelit ledge at lower left L 0.25 / 0.034, and the unlit wall on the right L 0.24 / 0.018 — one hue (26° through 34°) spread across four chroma steps paints the entire picture, and the warm band from 345°–90° totals 44.06%. The gate's 0.026 is the bottom step of that staircase, just 1.04 times the frame's median chroma of 0.025. Once a real light source enters a picture, the chroma channel is closed to everybody else.

02

0.40% of cool is the only opposition in the frame

Pull 200°–300° out of the whole picture and you get 3512 pixels, averaging L 0.48 / chroma 0.046 / hue 270°. They sit in two places: the palm-sized gate deep in the canyon, and the narrow painted band round the totem's waist — take 9% of the width by 2.5% of the height from (0.23, 0.36) and the 206 pixels falling inside 200°–280° measure L 0.33 / chroma 0.080 / hue 270°. The painted band is nearly twice as chromatic as the gate itself, yet because it is stuck to the brightest object in the frame and fenced in by 44.06% of warmth, it reads as decoration; the gate, held against a wall at L 0.24, reads as a way out. Same hue, same order of area — where you put it decides whether it is a pattern or an entrance.

03

A dosage table: 2.3% to change the hour, 0.40% to mark a spot

Seirai Island's warm band at L 0.85 / hue 42° covers 2.3%, and its job is to re-read a whole field of purple from deep night into dusk — changing the nature of the picture, which takes both size and brightness. The job here is only to say "the way is over there", so 0.40% suffices and it need not lead on chroma or lightness at all. Before adding an opposing colour to a frame, ask what it is for: colours that change the nature get percent, signposts get tenths of a percent. Overpay and the signpost becomes a second protagonist — and a picture can only afford one place worth walking to.

Take these colours with you

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.