Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Masters of the Night-Wind Secret Space, Rosy Light
NatlanOchre WallsRosy RimsDeep Canyon

Masters of the Night-Wind Secret Space, Rosy Light

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%8e658610%b3a3c542%5e303562%7a6f9d76%4d3f78100%683330

Why it works

There is not one patch of grey in this picture to separate planes with: achromatic pixels are down to 0.97% and the median chroma of 0.070 runs higher than many scenes' p99. So it separates planes by hue instead — every upright rock face belongs to the material, measuring 14° through 25°; every sky-facing ledge top belongs to the sky, measuring 293° through 306°; and in the 82944 pixels of shaded cliff on the right, not one falls inside 240°–345°. When no neutral is available, hand each class of orientation its own hue and the picture still has structure.

01

What looks like snow is the colour of the sky

All the way down the canyon, every horizontal ledge carries a pale band along its top surface that reads as snow. Pull out the part of it falling inside 270°–345°: the upper rim measures L 0.41 / chroma 0.093 / hue 293°, the middle ledge L 0.74 / 0.051 / 306°, the one beside the timber ladder below L 0.33 / 0.069 / 293° — lightness travels from 0.33 to 0.74 while the hue stays clamped between 293° and 306°. The strip of sky along the top edge measures L 0.56 / chroma 0.070 / hue 333°. It is not snow: sky-facing planes take the sky's colour outright. How bright a plane is depends on how far it sits from the canyon mouth; what colour it is depends on which way it faces.

02

Not one cool pixel on any upright face

Search the shaded cliff face on the right (20% wide by 45% tall from 0.75, 0.35 — 82944 pixels) for 240°–345° and the answer is "nothing matched". The lit face on the left, 111276 pixels, yields 196, or 0.18%. Meanwhile the frame holds 59887 pixels in 240°–330°, 6.80% of it — and every bit of that 6.80% grows on horizontal surfaces and in the sky, none of it on a vertical one. The warmth in 345°–45°, by contrast, runs to 800374 pixels, 90.9%: that is the upright faces' share. Separating planes needs no light-and-dark at all — let orientation choose the hue and the edges appear on their own, cleaner than edges made by darkening.

03

The gate is the only sky-colour standing upright

The gate in the middle of the cliff measures L 0.57 / chroma 0.070 / hue 295° — its chroma is identical to the frame's median of 0.070, not a fraction more, and its lightness of 0.57 is only 1.5 times the median of 0.39. Hue is all it has: in a picture where 90.9% falls inside 345°–45° it takes 295°, and 295° happens to be the ledge-top family (293°–306°). So it reads as a piece of standing sky — a hue that should only ever appear on horizontal surfaces, stood up on a vertical one. To slip a foreign body into a fully chromatic frame you need not invent a hue: borrow the one another class of orientation is already holding, and the misplacement is the signal.

Take these colours with you

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

/* Masters of the Night-Wind Secret Space, Rosy Light · Masters of the Night-Wind Secret Space, Rosy Light — Teyvat Palette */
:root {
  --cliff-ochre: oklch(0.37 0.066 14); /* Cliff Ochre #5e3035 */
  --shaded-ochre: oklch(0.39 0.077 25); /* Shaded Ochre #683330 */
  --ledge-rose: oklch(0.41 0.093 293); /* Ledge Rose #4d3f78 */
  --high-ledge-rose: oklch(0.74 0.051 306); /* High-Ledge Rose #b3a3c5 */
  --sky-haze: oklch(0.56 0.07 333); /* Canyon Sky #8e6586 */
  --gate-violet: oklch(0.57 0.07 295); /* Gate Violet #7a6f9d */
  --gradient-tribal-secret-space-masters-of-the-night-wind-location-context: linear-gradient(180deg, oklch(0.56 0.07 333) 0%, oklch(0.74 0.051 306) 10%, oklch(0.37 0.066 14) 42%, oklch(0.57 0.07 295) 62%, oklch(0.41 0.093 293) 76%, oklch(0.39 0.077 25) 100%);
}

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