DayMossed StoneCool ShadeStanding Watch

Noblesse Secret Treasury, Stone in Shade

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 135° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%bbbe9615%3e864f34%40664060%25506280%3f3342100%1c3c4c

Why it works

An accent is not buying a place in the chroma ranking, it is buying a vacancy on the hue wheel. The crimson banner hanging in the arch measures chroma 0.032 — below this picture's own chroma median of 0.056, a mere 0.007 above the achromatic line of 0.025. But 345°–15° holds not a single pixel in the frame, 15°–45° holds 0.02%, and 315°–345° holds 0.41%: the entire warm half comes to 0.43%, and the banner is its only resident. To make a small patch speak, first look at which stretch of the wheel is empty, then decide whether it needs any chroma at all.

Both extremes sit outside the wall

All 4000 of the frame's brightest pixels land on the pale rock at lower left, centroids running from (0.08, 0.51) to (0.18, 0.87) at a mean L of 0.78 to 0.79. All 4000 of the most chromatic pixels are on the left as well: 2235 in 150°–180° (mean 154°, L 0.66 / chroma 0.154) and 1765 in 120°–150° (138°, L 0.68 / 0.147), centroids (0.26, 0.56) and (0.29, 0.72) — the sunlit shrub at the foot of the wall and the grass beside it, peaking at 0.196. The arch everyone looks at first sits dead centre and measures L 0.34 / chroma 0.047 / 232°: on neither ranking. It hardly even reads as a hole — the coursed wall is L 0.41 / 0.056 / 227°, so the arch is only 0.07 darker, is 0.009 lower in chroma, and differs by 5° in hue. Whatever marks the entrance on this wall, it is not that opening.

The banner is paler than this picture's average

The crimson banner measures L 0.34 / chroma 0.032 / hue 320°, while the frame's chroma median is 0.056, its p99 0.127 and its peak 0.196 — the banner does not even reach the median. Everything that makes it legible grows elsewhere: blue 56.55% (232°), green 20.75% (144°), teal 12.34% (184°), 89.64% of the frame packed into one half of the wheel, while 315°–45° — a full 90° — holds 0.43% and the red band 345°–15° is empty. «Wangshan Hall, Main Hall in Thin Teal» set the threshold for a dominant hue: a chroma median of 0.026 pressed against the achromatic line still reads as teal, because no second hue argues with it. An accent is cheaper still — it need not even reach its own picture's median, so long as nobody else stands in its stretch.

Find the vacancy first, then decide about chroma

In the same frame, the shrub at the foot of the wall measures chroma 0.112 — three and a half times the banner's 0.032, over a far larger area — and nobody takes it for the subject: its 149° falls in the middle of a green band covering 20.75%, one more resident of a crowded half. The banner's 320° is the first. Same in interface work: an accent is not the brand colour turned up a notch, it is what you get by pulling the large background areas into one half of the wheel and then placing the accent in the empty half. A place on the hue wheel is cheaper than a place in the chroma ranking, and steadier — deepen the background and an accent held by chroma has to chase it, while an accent holding a vacancy does not move at all.

Take these colours with you

CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.

/* Noblesse Secret Treasury, Stone in Shade · Noblesse Secret Treasury, Stone in Shade — Teyvat Palette */
:root {
  --wall-slate: oklch(0.41 0.056 227); /* Wall Slate #255062 */
  --vine-green: oklch(0.47 0.074 144); /* Vine Green #406640 */
  --lit-shrub: oklch(0.56 0.112 149); /* Lit Shrub #3e864f */
  --pale-rock: oklch(0.79 0.055 111); /* Pale Rock #bbbe96 */
  --arch-dark: oklch(0.34 0.047 232); /* Arch Dark #1c3c4c */
  --noblesse-crimson: oklch(0.34 0.032 320); /* Noblesse Crimson #3f3342 */
  --gradient-noblesse-secret-treasury-location-context: linear-gradient(135deg, oklch(0.79 0.055 111) 0%, oklch(0.56 0.112 149) 15%, oklch(0.47 0.074 144) 34%, oklch(0.41 0.056 227) 60%, oklch(0.34 0.032 320) 80%, oklch(0.34 0.047 232) 100%);
}

A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.