
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 160° (used by the hero and exports), while gallery cards share a uniform 135° sweep.
A chroma allowance in a dark scene is affordable only to whatever glows on its own: the two Padisarah blooms at upper right measure L 0.59 / chroma 0.250, crossing the visible shaft of light in the picture (0.51 / 0.117) on both channels at once. They cover 2.81% of the frame, and they push its chroma allowance (p99 0.227 minus the median 0.054) to 0.173 — against 0.038 for Bayt Al-Hayah in the same set, a factor of 4.6. Meanwhile the four lightness allowances are 0.34 / 0.37 / 0.39 / 0.45; nobody took more than anyone else. What separates one dark picture from another is not lightness but chroma, and chroma is not mixed — it is earned by something inside the frame.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Bayt Al-Sukr by Flowerlight · Bayt Al-Sukr by Flowerlight — Teyvat Palette */
:root {
--padisarah-magenta: oklch(0.59 0.25 312); /* Padisarah Magenta #ad37e5 */
--rift-blue: oklch(0.51 0.117 259); /* Rift Blue #3a65a8 */
--violet-haze: oklch(0.39 0.092 275); /* Violet Haze #373f76 */
--bud-violet: oklch(0.4 0.091 272); /* Bud Violet #374378 */
--shadow-crimson: oklch(0.26 0.047 316); /* Shadow Crimson #2d1d33 */
--gradient-bayt-al-sukr: linear-gradient(160deg, oklch(0.51 0.117 259) 0%, oklch(0.59 0.25 312) 28%, oklch(0.4 0.091 272) 55%, oklch(0.39 0.092 275) 80%, oklch(0.26 0.047 316) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.