Violet VaultLow GlowClear Hush

Secret Hall of the Realms, Stars and Afterglow

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%4e6cb124%fafdf540%9e6d5756%5b569b70%5f73ca84%5c5576100%8a7d98

Why it works

Receding is done with paleness, not with darkness. The great pillar on the right covers 87420 pixels at L 0.47 / chroma 0.052 / 293°; the stained-glass pavilion at the centre is L 0.49 / 0.109 / 285°. The lightness gap is 0.02 and the hues are 8° apart in one family — the only thing separating subject from support is 2.1 times the chroma. The plaza paving in the foreground is even 0.12 brighter than the subject (L 0.61) at four tenths its chroma (0.044). When a surface has to fall back into the background, do not reach for darkness first: darkness digs another hole in the picture, paleness does not.

The support is twice the subject's size and still support

The stone pillar on the right covers 87420 pixels in the sample and the pavilion's glass covers 45562 — the support has nearly twice the area of the subject and sits further forward besides. Yet it measures L 0.47 / chroma 0.052 / hue 293° against the subject's L 0.49 / 0.109 / 285°: a lightness gap of 0.02 the eye cannot resolve, a hue gap of 8° inside one family, and only the chroma differing by 2.1 times. Of the frame's 4000 most chromatic pixels, 2519 are at 274° and 1481 at 268°, centroids (0.47, 0.60) and (0.49, 0.63) — all on that pavilion and the portal light at its foot (measured L 0.58 / chroma 0.135 / 272°, peaking at 0.203). When a large surface has to leave the stage, the cheapest single stroke is to drain its chroma.

The paving is 0.12 brighter than the subject

The plaza paving in the foreground measures L 0.61 / chroma 0.044 / 307° and the white cliff on the right L 0.57 / 0.056 / 287° — both brighter than the pavilion's L 0.49, yet carrying about four tenths of its 0.109 in chroma. «Mingxing Jewelry at High Noon» registered the condition as «equal lightness lets chroma do the separating»; this picture runs the lightness backwards by 0.12 and the separation does not slacken at all. So «equal lightness» is not a requirement in that rule, only the least troublesome arrangement. Since chroma does the separating, the lightness axis is free to draw something else — here, the air between the sky and the ground.

The most complete act of yielding is the light itself

The ball of light on the left horizon is the brightest thing in the frame: 3872 of the brightest 4000 pixels land at (0.16, 0.50), measuring L 0.99 / chroma 0.011 — under a fifth of this picture's chroma median of 0.061, and below the achromatic line of 0.025. It fills the lightness channel and hands over its hue entirely, so the chroma ceiling of 0.203 goes to the pavilion's glass without a fraction taken off. Same in interface work: to let the subject own the chroma, empty the brightest surface first. Emptying it does not mean darkening it — darken it and it stops being light — it means draining it pale, under the achromatic line.

Take these colours with you

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

/* Secret Hall of the Realms, Stars and Afterglow · Secret Hall of the Realms, Stars and Afterglow — Teyvat Palette */
:root {
  --zenith-violet: oklch(0.54 0.114 265); /* Zenith Violet #4e6cb1 */
  --horizon-white: oklch(0.99 0.011 121); /* Horizon White #fafdf5 */
  --willow-gold: oklch(0.58 0.07 45); /* Willow Gold #9e6d57 */
  --stained-blue: oklch(0.49 0.109 285); /* Stained Blue #5b569b */
  --portal-core: oklch(0.58 0.135 272); /* Portal Core #5f73ca */
  --pillar-stone: oklch(0.47 0.052 293); /* Pillar Stone #5c5576 */
  --plaza-rose: oklch(0.61 0.044 307); /* Plaza Rose #8a7d98 */
  --gradient-secret-hall-of-the-realms-location-context: linear-gradient(180deg, oklch(0.54 0.114 265) 0%, oklch(0.99 0.011 121) 24%, oklch(0.58 0.07 45) 40%, oklch(0.49 0.109 285) 56%, oklch(0.58 0.135 272) 70%, oklch(0.47 0.052 293) 84%, oklch(0.61 0.044 307) 100%);
}

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