
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.
That one degree is necessary, not sufficient: the grass at 146° and the sky at 243° are 97° apart, which puts the equidistant point at 14.5° — and the 330°–60° window really does hold something, 1,221 pixels at hue 39°, the four brown boars scattered across the grass. What it never paid is the other two channels: lightness 0.31 against the frame's median of 0.54, chroma 0.045 against 0.089, both about half. So the focus falls back entirely to the largest and brightest surface — all 4000 of the 4000 most chromatic pixels sit in the sun-soaked slope along the bottom edge, hue 135°, chroma 0.182. Getting the hue right still leaves you owing lightness or chroma above the median; without that, the seat is merely occupied.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Boar Habitat in a Clearing of Light · Boar Habitat in a Clearing of Light — Teyvat Palette */
:root {
--sky-gap: oklch(0.62 0.089 225); /* Sky in the Gap #4191ae */
--canopy-green: oklch(0.49 0.088 160); /* Canopy Green #2a704f */
--deep-shade: oklch(0.36 0.043 197); /* Deep Shade #1e4445 */
--boulder-grey: oklch(0.6 0.051 193); /* Boulder Grey #5b8a89 */
--sunlit-meadow: oklch(0.8 0.135 129); /* Sunlit Meadow #a3cf6d */
--boar-brown: oklch(0.31 0.045 40); /* Boar Brown #44281f */
--gradient-boar-habitat: linear-gradient(180deg, oklch(0.62 0.089 225) 0%, oklch(0.49 0.088 160) 18%, oklch(0.36 0.043 197) 46%, oklch(0.6 0.051 193) 70%, oklch(0.8 0.135 129) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.