Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Boar Habitat in a Clearing of Light
MondstadtDayVerdantQuietUntended

Boar Habitat in a Clearing of Light

Palette

Click a swatch to copy its HEX; hover for the OKLCH value.

Reconstructed gradient

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.

0%4191ae18%2a704f46%1e444570%5b8a89100%a3cf6d

Why it works

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.

01

Four boars are standing in the right place

The 90°-wide window 330°–60° recovers only 1,221 pixels from the whole frame — 0.139%, hue 39°. That is 25° off the calculated 14.5°, but it is the closest answer this picture has, and it lands on real objects: four boars on the grass and the patch of turned earth beneath them. Nothing else here belongs to a foreign family; 290°–335° holds 3 pixels.

02

Standing in the right place and still being invisible

Measure only the warm pixels on the boar at the bottom edge: 648 of them, L 0.31, C 0.045, Cmax 0.069. The frame's median lightness is 0.54 and its median chroma 0.089, while the sunlit grass right at its feet is L 0.80 / C 0.135. On the hue ledger it is the one foreign family in the picture; on the other two it comes last — which is why most people do not notice a boar on the first look. When an accent has the right hue and still disappears, go and measure where its lightness ranks in the frame.

03

If nobody takes it, the focus goes to the largest surface

All 4000 of the 4000 most chromatic pixels are green, hue 135°, mean chroma 0.182, and they crowd into one small patch at (0.48, 0.90) — the grass in the middle of the clearing taking direct sun. Green holds 64.64% of the frame: it is both the largest surface and the owner of the 0.199 chroma ceiling. The canopy around the clearing only reaches 0.088, and the darkest layer under the trees 0.043. When the accent cannot pay, the picture does not leave the focus vacant; it hands it to whichever surface is biggest and best lit — and that is rarely the result you wanted.

Take these colours with you

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.