NatlanDayExpansiveLimpidFlowing

Basin of Unnumbered Flames in Sunlit 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 180° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%a2defa24%72b1d344%72b2af68%80b358100%6f5638

Why it works

A line can hold on hue alone: the teal ribbons on the cliff face measure 189°, L 0.49, chroma 0.064, and the rock they cross is 71°, L 0.47, chroma 0.055 — a lightness difference of 0.02, a chroma difference of 0.009, and 118° of hue between them and nothing else. The line that carries Moontide Sea after Dark was made of a 0.57 lightness gap and more than five times the chroma jumping out together; here both channels are held still and the line is just as visible — and it reads as flowing across the rock, not carved into it.

The rock and the ribbon are equally bright

On the cliff face of the lone peak in the foreground, the rock falling in 30°–90° is 5,599 pixels at L 0.47; the 165°–215° teal ribbon crossing it is 2,830 pixels at L 0.49. A 0.02 lightness difference, set into a picture whose lightness median is 0.73 and which reaches up to 0.97, is no difference at all; the violet edging the ribbon (278°) hugs the rock the same way, landing just 0.02 below it. An isoluminant boundary is soft to the eye — it can only be resolved by the chromatic channel, whose spatial resolution is far below the lightness channel's, so the edge can never come out sharp. If you want to draw energy flowing across a surface, do not brighten it; brighten it and you have carved a groove.

The picture already knows which hue to use

189° was not picked at random. The two largest fields in the frame are blue at 45.98% (mean 235°) and green at 34.28% (126°); 189° is 46° from the blue and 63° from the green, sitting almost exactly between the two, while the whole teal band is only 6.90% and cannot hold a field of its own. So on the cliff face this line is a foreign colour — 118° away from the rock's 71°, separable at a glance — and put back into the whole picture it is no new face at all: the sky and the grassland each claim half of it. If an isoluminant line has to speak entirely through hue, that hue must be picked from the gap between the families the picture already has: far enough to be seen, one of the family so it does not sting.

To actually light something, you still have to spend lightness

For a place called the Basin of Unnumbered Flames, red and orange together come to 0.60% of the frame, and the only real fire is the 441 pixels at the heart of the altar: mean L 0.84, which is 0.11 above the sea of mist below it (L 0.73 — also the lightness median of the whole frame), with its dozen-odd most saturated pixels landing at 15°, chroma 0.118. The one thing in this picture that is genuinely glowing uses the opposite tool from the ribbons — it raises lightness. Design the two separately: for energy running across a surface, lock the lightness and change only the hue; only for a light source in the frame do you move the lightness. One picture demonstrates both. Do not merge them into one move.

Take these colours with you

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

/* Basin of Unnumbered Flames in Sunlit Haze · Basin of Unnumbered Flames in Sunlit Haze — Teyvat Palette */
:root {
  --high-sky: oklch(0.87 0.072 228); /* High Sky Blue #a2defa */
  --rim-green: oklch(0.71 0.134 133); /* Rim Green #80b358 */
  --vein-teal: oklch(0.49 0.064 189); /* Vein Teal #2e6c68 */
  --cliff-umber: oklch(0.47 0.055 71); /* Cliff Umber #6f5638 */
  --vein-violet: oklch(0.45 0.051 278); /* Vein Violet #4e5372 */
  --altar-flame: oklch(0.74 0.118 15); /* Altar Flame #eb8b93 */
  --gradient-basin-of-unnumbered-flames: linear-gradient(180deg, oklch(0.87 0.072 228) 0%, oklch(0.73 0.081 233) 24%, oklch(0.72 0.066 192) 44%, oklch(0.71 0.134 133) 68%, oklch(0.47 0.055 71) 100%);
}

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