
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.
Air does not merely push colour toward itself; it is the point the whole picture's gamut converges on. The dust of Sand-Embraced Home measures 94°, and the frame's two families of material walk toward it from opposite sides — the same rock reads 116° near and 93° at maximum distance; the same sand reads 63° in the foreground and 86° at its farthest edge. Two things 53° apart up close are 7° apart far away. To narrow a picture's gamut, you do not have to touch the objects: put the hue of the medium between the two families.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Sand-Embraced Home in Dust Haze · Sand-Embraced Home in Dust Haze — Teyvat Palette */
:root {
--dust-veil: oklch(0.65 0.056 94); /* Dust Veil #9a8f68 */
--carved-rock: oklch(0.57 0.064 116); /* Carved Rock #757c50 */
--sun-struck-sand: oklch(0.75 0.138 81); /* Sun-Struck Sand #daa433 */
--deep-sand: oklch(0.32 0.065 63); /* Deep Sand #4a2a09 */
--far-wall: oklch(0.55 0.055 93); /* Far Wall #7d714c */
--gradient-sand-embraced-home: linear-gradient(180deg, oklch(0.65 0.056 94) 0%, oklch(0.55 0.055 93) 30%, oklch(0.57 0.064 116) 52%, oklch(0.75 0.138 81) 74%, oklch(0.32 0.065 63) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.