Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
The Narzissenkreuz Ordo in a Shaft of Light
FontaineDayLimpidSolemnDrifting dust

The Narzissenkreuz Ordo in a Shaft of 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 200° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%96746a18%5be8ac30%a6de7c50%34313772%655045100%fef8ed

Why it works

A light's chroma is what its lightness leaves over. On one and the same rose window, the most chromatic end (the jade ring, chroma 0.150, peak 0.195) and the brightest end (the shaft where it lands on the floor, lightness 0.98, chroma 0.016) are not in the same place. The tinting therefore falls to the ambient the main light never reaches — the tiles outside the shaft measure only lightness 0.45 and hue 51°, and that is enough to pull the two pink banners overhead to 38° and 23° and the pink ring table to 79° and 80°, leaving 23 pixels between 300° and 360° in the whole frame. If you want a light that is both bright and coloured, keep the colour on the source and give the brightness to the surfaces it lands on.

01

The brightest and the most chromatic are two places

The rose window as a whole measures lightness 0.82 and chroma 0.059; its peak of 0.195 sits on the jade ring at (0.53, 0.32) in the frame and is the most chromatic point in the picture. The shaft that window throws onto the floor measures lightness 0.98 and chroma just 0.016 — the frame's lightness p99 is already 1.00, the track has run out. Where lightness reaches white there is no chroma left to spend; that is not a rendering compromise, it is the shape of the axis. If you are painting a strong coloured light, do not ask one surface to do both jobs.

02

Two pink banners, not one red pixel

Two wide pink banners hang from the top of the frame, and the circular council table at centre is wrapped in pink cloth. Measured, the banner tops are 38° and 23° and the ring table 79° and 80° — all of them on the warm side of that 51° ambient, with 23 pixels left between 300° and 360° in the whole frame. They were not washed out by the strong light: what got washed out is the floor tile taking the shaft head on at chroma 0.016. The banners hang outside the shaft and were dragged there by the ambient at lightness 0.45.

03

The light's hue sets the direction, not whether there is one

«The Duke's Office in Green Gloom», in the same city, is the same event in a different hue: that room's light is green (green band 43.06%, 112°) and it dragged crimson lacquer to 96°. Here the ambient is warm (51°) and it dragged pink to 38°. The two rooms are left with 44 and 23 pixels respectively between 300° and 360°, and their only shared condition is not colour temperature but having exactly one light. Before you argue about an interior's palette, count how many lights of different colour temperature it has — the palette is downstream of that number.

Take these colours with you

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

/* The Narzissenkreuz Ordo in a Shaft of Light · The Narzissenkreuz Ordo in a Shaft of Light — Teyvat Palette */
:root {
  --rose-jade: oklch(0.84 0.15 162); /* Rose Jade #5be8ac */
  --rose-green: oklch(0.84 0.14 133); /* Rose Green #a6de7c */
  --shaft-white: oklch(0.98 0.016 80); /* Shaft White #fef8ed */
  --ambient-amber: oklch(0.45 0.033 51); /* Ambient Amber #655045 */
  --banner-amber: oklch(0.59 0.046 38); /* Banner Amber #96746a */
  --pillar-shadow: oklch(0.32 0.01 310); /* Pillar Shadow #343137 */
  --gradient-the-narzissenkreuz-ordo: linear-gradient(200deg, oklch(0.59 0.046 38) 0%, oklch(0.84 0.15 162) 18%, oklch(0.84 0.14 133) 30%, oklch(0.32 0.01 310) 50%, oklch(0.45 0.033 51) 72%, oklch(0.98 0.016 80) 100%);
}

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