LiyueDayJaggedVividWilderness

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

0%2b75b432%5d98c558%ba916280%ab5c71100%6b4f3f

Why it works

Warm against cold has three knobs — lightness, chroma, area — and at least one has to be turned. Here the crimson pink and the blues are all but tied in chroma (0.105 against 0.09–0.12), so the whole verdict rests on area: 43% blue against 14% pink.

Chroma ties, area decides

The crimson trees sit at C 0.105; the blue cliffs and sky at C 0.09–0.12. The two ends of the collision are near-identical in saturation, and what separates lead from support is area (43% against 14%). Read it against the Court of Fontaine study: that one turns the lightness knob, this one turns the area knob. Turn none of the three and the collision really does collide.

The stone is blue

The cliff face measures 242°, C 0.091: the rock's own colour has been swallowed whole by the blue haze in the gorge, and even the foreground blocks carry blue. Same law as the violet haze in the Desert of Hadramaveth — ambient colour comes from the air, and here the air happens to be blue.

The amber is a buffer zone

The meadow at 70°, C 0.080 belongs to neither the pink nor the blue, and lies exactly along the ground where the two meet. Put a third, middle tone between the colliding parties and the conflict turns from a head-butt into a transition — its area need not be large, only its position right.

Take these colours with you

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

/* The Chasm in Blue Haze · The Chasm in Blue Haze — Teyvat Palette */
:root {
  --deep-sky: oklch(0.549 0.122 248); /* Clear Sky Blue #2b75b4 */
  --haze-cliff: oklch(0.658 0.091 242); /* Hazed Cliff Blue #5d98c5 */
  --pink-bloom: oklch(0.574 0.105 4.4); /* Cherry Pink #ab5c71 */
  --amber-field: oklch(0.685 0.08 70.5); /* Amber Meadow #ba9162 */
  --umber-slope: oklch(0.454 0.046 52.4); /* Umber Rock #6b4f3f */
  --gradient-the-chasm: linear-gradient(165deg, oklch(0.549 0.122 248) 0%, oklch(0.658 0.091 242) 32%, oklch(0.685 0.08 70) 58%, oklch(0.574 0.105 4) 80%, oklch(0.454 0.046 52) 100%);
}

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