Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
The Flagship under Neon Glow
LanguidCloseNeon-lit

The Flagship under Neon Glow

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%583f7522%f085f132%ddb18558%97546880%774678100%744a81

Why it works

Hue can be spread as wide as you like without getting loud, and without lowering the ceiling: seven hue bands cover 98.52% of the frame, running from 268° all the way to 96°, and their mean lightness falls into line behind them — 0.43 / 0.42 / 0.47 / 0.53 / 0.62 / 0.79 / 0.89, not a step out of order except the darkest two swapping by 0.01 — while chroma stays pinned at 0.074–0.098, a spread of just 0.024. Land of Upper Setekh at Dusty Noon says loudness is set by the chroma ceiling: six bands filling 97.18% with not one pixel over 0.121. Here the ceiling is 0.231, nearly double, and the picture is just as quiet — because lightness has sorted the hues into a queue.

01

Lightness sorts the hues

Ordered by hue the seven bands read blue 268° (0.15%), violet 304° (27.94%), pink 326° (25.71%), red 2° (37.01%), orange 23° (5.86%), yellow 66° (1.62%), green 96° (0.23%) — 98.52% together — and their mean lightness follows: 0.43 / 0.42 / 0.47 / 0.53 / 0.62 / 0.79 / 0.89. Chroma, meanwhile, is 0.079 / 0.090 / 0.098 / 0.091 / 0.074 / 0.078 / 0.078; not one band is richer than another. So no two colours are competing for the same lightness, and the eye reads 188° of span as one continuous slope rather than seven colours. If you want a wide hue range without noise, do not reach for the chroma slider first — give each step of hue its own non-overlapping step of lightness.

02

There are two roads to quiet, and this is the second

Sea of Bygone Eras in Sunken Daylight took the first: 99.2% one family of blue, a chroma median of 0.153, 0.00% achromatic — the saturation is lifted everywhere at once, so nothing stands out (figures quoted from that study). This frame is 1.47% achromatic, so it has no grey to spend either, but its hues are spread across 188° and its chroma median is only 0.087; it can lean neither on a single family nor on a low ceiling. It leans on order. Lifting one family together and queueing several families by lightness are two kinds of quiet that cannot substitute for each other: the first demands narrowness, the second demands sequence. The hue span you already have decides which one you get, not the other way round.

03

The focus is the ladder's top rung

The sign is not an exception to this scheme; it is its top. Of the 4000 brightest pixels, the seven cells the bench reports all sit at 76°–96° and lightness 0.92–0.94, the largest holding 2,155 pixels centred at (0.48, 0.29) — the sign's tubes, against a frame-wide lightness median of 0.48. That cell's chroma is only 0.065, below the frame's median of 0.087. The most saturated cluster is not on the tubes at all: 3,604 of the 4000 most chromatic pixels fall at 300°–360°, L 0.74 and 0.77, chroma 0.192 and 0.186 — the halo the sign throws onto the beams and the wall, in the same family as the whole room. One lamp is therefore recognised on two separate accounts: the halo says «this room is that colour», the core says «the light is here». When the base is already too rich to add chroma to, the core has to pay in lightness.

Take these colours with you

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

/* The Flagship under Neon Glow · The Flagship under Neon Glow — Teyvat Palette */
:root {
  --beam-violet: oklch(0.42 0.09 304); /* Beam Violet #583f75 */
  --porch-pink: oklch(0.47 0.098 326); /* Porch Pink #774678 */
  --wall-vermilion: oklch(0.53 0.091 2); /* Wall Vermilion #975468 */
  --lit-corner: oklch(0.62 0.074 23); /* Lit Corner #af7471 */
  --tube-amber: oklch(0.79 0.078 66); /* Tube Amber #ddb185 */
  --sign-halo: oklch(0.77 0.186 327); /* Sign Halo #f085f1 */
  --door-blue: oklch(0.43 0.079 268); /* Door Blue #3d4e7b */
  --gradient-the-flagship: linear-gradient(180deg, oklch(0.42 0.09 304) 0%, oklch(0.77 0.186 327) 22%, oklch(0.79 0.078 66) 32%, oklch(0.53 0.091 2) 58%, oklch(0.47 0.098 326) 80%, oklch(0.48 0.098 318) 100%);
}

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