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