
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 180° (used by the hero and exports), while gallery cards share a uniform 135° sweep.
Whether a dark picture can hold a focus depends on whether it owns a single hue that does not belong to its light — and Bayt Al-Hayah owns none. Search the whole frame from 270° to 45° and you get 30 pixels; even the patch that looks most like ochre measures 141°. So its chroma allowance (p99 0.065 minus the median 0.027) is only 0.038, the lowest of the four halls, while its lightness allowance of 0.34 sits in the same step as the other three at 0.37 / 0.39 / 0.45. In a dark scene lightness is public and chroma is private: with no foreign hue available, the focus has to be rehung on lightness — and that money has to be saved up first, out of 45.48% achromatic dark rock.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Bayt Al-Hayah under a Single Shaft · Bayt Al-Hayah under a Single Shaft — Teyvat Palette */
:root {
--rift-cyan: oklch(0.63 0.066 188); /* Rift Cyan #579690 */
--mist-pool: oklch(0.51 0.059 201); /* Mist-Pool Cyan #397074 */
--ledge-chartreuse: oklch(0.47 0.051 104); /* Ledge Chartreuse #5f5c3a */
--shaded-shelf: oklch(0.25 0.029 113); /* Shaded Shelf #222313 */
--wall-shadow: oklch(0.21 0.024 109); /* Wall Shadow #19190c */
--gradient-bayt-al-hayah: linear-gradient(180deg, oklch(0.21 0.024 109) 0%, oklch(0.63 0.066 188) 18%, oklch(0.47 0.051 104) 45%, oklch(0.25 0.029 113) 62%, oklch(0.51 0.059 201) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.