
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.
The gap between top and bottom can be charged to all three channels at once — but that amounts to declaring that top and bottom no longer belong to the same light. Measure Madinat al-Nuhas's upper and lower edge with the same pair of rectangles: lightness 0.20 against 0.53, chroma 0.015 against 0.075, hue 274° against 76°. All three axes are pushed to the stop, and what it buys is not "a cleaner separation" — it is swapping the sky for a lid. The 10%-tall band of rock along the very top of the frame holds 92,160 pixels and not one of them crosses the achromatic line; its highest chroma is 0.024. The whole cool half of the wheel, 150°–330°, has 1,448 pixels left in the entire picture. Its batch-mate «Treasures Street under a Seam of Sky» separates top from bottom on hue alone (the two ends measure chroma 0.052 against 0.060). That one has a sky; this one does not — spending all three channels does not buy a stronger separation, it buys "there is no way out of here".
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Madinat al-Nuhas in Golden Dust · Madinat al-Nuhas in Golden Dust — Teyvat Palette */
:root {
--rock-lid-violet: oklch(0.17 0.012 293); /* Rock-Lid Violet #0f0e14 */
--remote-violet: oklch(0.24 0.026 280); /* Remote Violet #1d1e2c */
--clockwork-gold: oklch(0.8 0.118 81); /* Clockwork Gold #e5b65f */
--dust-haze-gold: oklch(0.4 0.045 70); /* Dust-Haze Gold #57432c */
--lamplit-terrace: oklch(0.59 0.081 77); /* Lamplit Terrace #987743 */
--gradient-madinat-al-nuhas: linear-gradient(180deg, oklch(0.17 0.012 293) 0%, oklch(0.24 0.026 280) 20%, oklch(0.8 0.118 81) 42%, oklch(0.4 0.045 70) 62%, oklch(0.59 0.081 77) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.