
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.
Grey is not taken away by the saturation knob, it is claimed by a second hue. Two pictures of the same Aaru Village return the same reading for their brightest handful of pixels (L 1.00, chroma 0.003), and their lightness ceilings barely move — 1.00 against 0.98 — yet the achromatic share is 27.81% against 3.36%, a gap of 8.3 times. Here the sun is warm and the sky is a cold 233°, so every backlit surface that had nowhere to go now reports violet, rose and red instead, taking 43.55% of the frame, and the only grey left is that one cloud at the top left.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Village Chief's House in Slanting Light · Village Chief's House in Slanting Light — Teyvat Palette */
:root {
--last-white-cloud: oklch(0.99 0.003 130); /* Last White Cloud #fbfcfa */
--zenith-blue: oklch(0.89 0.047 233); /* Zenith Blue #bde1f5 */
--sunlit-sand: oklch(0.79 0.11 59); /* Sunlit Sand #efa971 */
--overhang-tan: oklch(0.48 0.068 34); /* Overhang Tan #7f4f44 */
--rock-shadow-violet: oklch(0.45 0.059 295); /* Rock-Shadow Violet #574f73 */
--cliff-shadow-rose: oklch(0.35 0.047 326); /* Cliff-Shadow Rose #473248 */
--sunlit-awning: oklch(0.88 0.114 86); /* Sunlit Awning #f9d27c */
--gradient-village-chiefs-house: linear-gradient(180deg, oklch(0.99 0.003 130) 0%, oklch(0.89 0.047 233) 10%, oklch(0.48 0.068 34) 35%, oklch(0.35 0.047 326) 60%, oklch(0.79 0.11 59) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.