Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
The Arsenal, Lit from Below
InazumaDeepCold-brightWondrous

The Arsenal, Lit from Below

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%212d4734%292caa54%2b4da870%0a2f6b88%0981d7100%17e4f5

Why it works

Chroma in the blue-violet half is bought with lightness, and this frame paid all the way down. Its median lightness is pressed to 0.34 before the most chromatic 3% of 210°–270° reaches chroma 0.211 — over one and a half times the 0.122 that Kannazuka in Hazy Daylight gets at L 0.63. Yet inside the same cave, the 1,121 cyan pixels on the valley floor hold 0.141 while staying at L 0.84. Same light, same ground: what green-cyan gets at lightness 0.84, blue-violet must sink to 0.42 to obtain. The bill is charged by hue, not by picture.

01

The brightest thing sits along the bottom edge of the frame

Of the 4,000 brightest pixels, 2,934 fall into three cells along the lower edge (L 0.81–0.83, chroma 0.140–0.144, hue 212°–216°) — a band of glowing petals laid across the valley floor. The rock overhead measures L 0.30, chroma 0.050, hue 264°. Ochkanatlan under Pressing Cloud measured the same inversion — storm cloud at L 0.42 bearing down on a fog sea at L 0.69, a gap of 0.27, read as ominous. Here the gap is 0.52, nearly twice as wide, and what it reads as is wonder. The difference is not how far the inversion goes but whether the bright half is generating its own light: a lit ground grows more like a collapsing sky the brighter it gets, a glowing ground grows more like treasure.

02

The cheap hues live at the bright end, the expensive ones at the dark end

Across the frame, 165°–210° holds only 1,121 pixels, averaging L 0.84 and chroma 0.141, peaking at 0.155. The 22,271 most chromatic pixels of 210°–270° have to sink to L 0.42 to reach 0.211, and the caps in 270°–315° buy 0.224 at L 0.48. Three bands in one cave, lit by the same organisms, working at three different exchange rates. To put something into a dark scene that is bright and still coloured, push it toward cyan; push blue or violet into the bright end and it merely fades to pink.

03

When there are too many sources to leave a dark place, the ratio yardstick stops moving

The cave roof reads brown, yet the 120°-wide `330°–90°` window returns nothing matched across the whole frame — not one warm pixel, and that "brown" measures L 0.30, chroma 0.050, hue 264°. Ashveil Peak in Cave Light left a yardstick made of ratios: in that cave the floating leaves at 0.178 against a median of 0.034 — 5.2 times — were what counted as glowing. Here the most chromatic blue is 0.211 against a median of 0.089, only 2.4 times, below the 2.5 that piece called "not glowing yet" — and there is not one place in this picture that is not light. The reason is the floor. That cave's floor was grey rock; this one has under 0.27% achromatic, and its floor is itself laid down by the glowing things. When a dark scene has more than one source, stop judging luminosity by ratio and ask instead which colour has reached the ceiling of its own hue.

Take these colours with you

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

/* The Arsenal, Lit from Below · The Arsenal, Lit from Below — Teyvat Palette */
:root {
  --spore-violet: oklch(0.39 0.194 272); /* Spore Violet #292caa */
  --vault-mauve: oklch(0.3 0.05 264); /* Vault Mauve #212d47 */
  --blue-cap: oklch(0.45 0.151 265); /* Blue Cap #2b4da8 */
  --dark-grass: oklch(0.32 0.113 260); /* Dark Grass #0a2f6b */
  --stream-blue: oklch(0.59 0.16 249); /* Stream Blue #0981d7 */
  --underglow-cyan: oklch(0.84 0.141 204); /* Underglow Cyan #17e4f5 */
  --gradient-the-arsenal: linear-gradient(180deg, oklch(0.3 0.05 264) 0%, oklch(0.39 0.194 272) 34%, oklch(0.45 0.151 265) 54%, oklch(0.32 0.113 260) 70%, oklch(0.59 0.16 249) 88%, oklch(0.84 0.141 204) 100%);
}

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