Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Voidsea Outlook in Glowing Haze
Nod-KraiHazeboundVacantLingering Warmth

Voidsea Outlook in Glowing Haze

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

0%5e5c8022%6f628045%7d667c72%906f80100%a37a77

Why it works

How far you are from the light can be booked entirely to hue. Sampled right to left at one constant height, the sky measures 287° → 304° → 327° → 346°, then drops to the glow burning on the left horizon at 24° — 97° in all. Over that same walk lightness only climbs from 0.49 to 0.62, and chroma wanders between 0.043 and 0.058, a span of 0.015. «Dainichi Mikoshi in White Glare» drew the same map of distance-from-the-light on chroma instead (0.005 rising to 0.058 outward from the sun disc). Here that axis has no money in it — the frame's 99th chroma percentile is only 0.075 — so direction gets said in hue.

01

Four bands, one arc

Pink 27.64%, red 25.40%, violet 23.24%, orange 13.41% — four adjacent hue bands each holding somewhere between a tenth and a quarter of the frame, 89.69% together. Their lightnesses are 0.50 / 0.55 / 0.47 / 0.56 and their chromas 0.039 / 0.042 / 0.047 / 0.050 — a spread of 0.011 across all four. So the eye never counts them as four colours; it reads one body of air turning. To give a large low-chroma field a direction of light, pin the chroma first, then walk the hue one way.

02

Road, crag and machine are all weather

The flagstone road underfoot measures 353°, L 0.43, chroma 0.032; the crag on the right carrying the derrick is 344°, L 0.44, chroma 0.038 — both sit on the sky's own arc, so they read as part of the weather rather than as two separate things. What genuinely leaves the arc is only the grass on the slope: 45°–165° is 48,084 pixels, 5.22% of the frame. Of the 4000 most chromatic pixels, 3879 fall in 30°–120°, all of them on the slope along the bottom edge at (0.33–0.63, 0.78–0.83). And 190°–280°, the whole stretch from cyan through blue to violet-blue, holds 133 pixels in the entire frame — this picture that looks so cold has almost no blue in it at all.

03

The grass wins by being off the arc, not by being brighter

That grass measures chroma 0.055 and lightness 0.50, against the shaded side of the sky at 0.058 / 0.49 — identical on both channels, and yet it is the only thing in the frame you read as a colour, because it sits at 57°, still 33° from the warm end of the arc. The frame's chroma runs median 0.044, 99th percentile 0.075, peak 0.121, and lightness spans just 0.33 from the 1st to the 99th percentile. With both channels that thin, the map of distance-from-the-light can only be drawn in hue. Next time you paint a thin haze, measure how much room is left in chroma and in lightness, and hand «which side is the light on» to whichever still has some. To put something into a haze, you need not add saturation either — just move it off the arc.

Take these colours with you

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

/* Voidsea Outlook in Glowing Haze · Voidsea Outlook in Glowing Haze — Teyvat Palette */
:root {
  --sunward-glow: oklch(0.62 0.052 24); /* Sunward Glow #a37a77 */
  --near-sun-rose: oklch(0.58 0.048 346); /* Near-Sun Rose #906f80 */
  --mid-sky-mauve: oklch(0.54 0.043 327); /* Mid-Sky Mauve #7d667c */
  --antisolar-violet: oklch(0.49 0.058 287); /* Antisolar Violet #5e5c80 */
  --causeway-stone: oklch(0.43 0.032 353); /* Causeway Stone #5e4951 */
  --crag-shade: oklch(0.44 0.038 344); /* Crag Shade #624a58 */
  --slope-grass: oklch(0.5 0.055 57); /* Slope Grass #7c5b44 */
  --gradient-voidsea-outlook: linear-gradient(225deg, oklch(0.49 0.058 287) 0%, oklch(0.52 0.049 304) 22%, oklch(0.54 0.043 327) 45%, oklch(0.58 0.048 346) 72%, oklch(0.62 0.052 24) 100%);
}

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