NatlanDayWide OpenBustlingGrass-Scented

Flower-Feather Clan Secret Space, Clear Noon

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%5a85a814%62253944%69382c64%6b6a91100%8ca851

Why it works

An element that has to be dropped into many scenes cannot bake its contrast into itself. This is the brightest and most chromatic frame in the set — median lightness 0.43, median chroma 0.078, achromatic pixels down to 6.33%, all eight hue bands carrying real area — and the gate's chroma of 0.060 now sits below the frame's median, a ratio of 0.77, the one time in five that the same gate drops under 1. In the Scions' night frame it ran 2.3. One colour, five environments, a straight slide from protagonist to scenery. Set a reusable element's constant so it is still findable in the brightest scene, not so it is loudest in the darkest one.

Noon fills all three channels

The foreground grass lit through by noon measures L 0.69 / chroma 0.118 / hue 124°, and the drift of white flowers in it L 0.70 / 0.111. The red sandstone face measures L 0.40 / 0.073 / 35°, the sky through the gaps between structures L 0.60 / 0.072 / 244°, the low trees on the clifftop L 0.38 / 0.076 / 84°, and the long banners — taking the 5542 pixels inside 340°–30° from a rectangle 20% wide and 15% tall across the upper frame — L 0.36 / 0.090 / 2°. Lightness runs from 0.36 to 0.70, chroma from 0.072 to 0.118, and all eight hue bands are occupied. The gate, at L 0.54 / chroma 0.060 / hue 285°, ranks near the top of none of those lists.

Even its hue is no longer rare

In the Scions' night frame the gate's family (240°–300°) covered 2.36% and had no other source — that hue in that picture simply was the gate. Here 210°–300° holds 86942 pixels, 9.88% of the frame: the sky, the far buildings' shadows and the balloons floating overhead all belong to it. The rock beside the gate measures L 0.37 / chroma 0.073 / hue 40°, and the gate is brighter by just 0.17 — against a frame whose lightness p99 already reaches 0.79, that 0.17 is a shallow dent in noon's dynamic range, and it looks like nothing more than a hole at the foot of the cliff. Rarity is given by the environment; an element cannot bring its own.

Set the constant by the brightest scene

The gate's absolute values barely move across the five frames: lightness 0.46 to 0.59, hue 253° to 295°, chroma 0.026 to 0.070. What moves is the environment — achromatic share from 55.13% to 0.97%, median chroma from 0.023 to 0.078 — and so its chroma ratio against the median slides from 2.3 down to 0.77. This is what a reusable element should look like: tune it to be loudest for the night scene and it burns out as a white blotch at noon; tune it to be findable at noon and it becomes the only light in the dark on its own. Highlight states, wordmarks and indicators in a design system all take the same road — fix one absolute constant and let each scene open the gap with whatever channel it has to spare, instead of writing the contrast into the element.

Take these colours with you

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

/* Flower-Feather Clan Secret Space, Clear Noon · Flower-Feather Clan Secret Space, Clear Noon — Teyvat Palette */
:root {
  --cliff-ochre: oklch(0.4 0.073 35); /* Cliff Ochre #69382c */
  --noon-grass: oklch(0.69 0.118 124); /* Noon Grass #8ca851 */
  --zenith-blue: oklch(0.6 0.072 244); /* Gap Sky #5a85a8 */
  --canopy-yellow: oklch(0.38 0.076 84); /* Canopy Yellow #553e03 */
  --banner-red: oklch(0.36 0.09 2); /* Banner Red #622539 */
  --gate-violet: oklch(0.54 0.06 285); /* Gate Violet #6b6a91 */
  --gradient-tribal-secret-space-flower-feather-clan-location-context: linear-gradient(180deg, oklch(0.6 0.072 244) 0%, oklch(0.36 0.09 2) 14%, oklch(0.4 0.073 35) 44%, oklch(0.54 0.06 285) 64%, oklch(0.69 0.118 124) 100%);
}

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