Fontaineabyssalstill waterfaintly lit

Chemin de L'Espoir in Abyssal Light

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%024b6a30%025b6358%41dbec78%00e2ef100%0151ab

Why it works

Area, the chroma ceiling, the lightness ceiling — one hue family gets at most two of the three. In this deep water blue takes 84.73% and also holds the chroma peak of 0.250 (the most chromatic 4000 pixels go 4000/4000 to 240°–270°), so the third is handed back whole: the brightest 3584 pixels all fall in 196°–206° and belong to a cyan band covering only 15.14%. Once those are dealt out, everything else in the picture has no channel left: half the pixels are packed into the six points between L 0.33 and 0.39, and hue is all they have to tell each other apart.

The dominant family takes two

The blue band, 210°–270°, covers 84.73% at a mean of L 0.41 / chroma 0.093, and the most chromatic 4000 pixels land 4000/4000 in 240°–270°, mean L 0.47 / chroma 0.185, centred at (0.42, 0.62), with the frame's peak of 0.250 among them. On the objects, that is two clumps of glowing algae: the most chromatic 3% of the patch at lower left measures L 0.45 / chroma 0.159 / 257°, and the clump at centre, counting only its 240°–270° pixels, measures L 0.41 / 0.122 / 251°. Morte Region in Clear Green is another Fontaine picture that is four-fifths blue — 80.12% — yet its ceiling of 0.200 belonged to a green covering just 7.50%. Here the dominant family takes the ceiling itself, and the price shows up in the very next point.

The lightness one is handed back whole

The brightest 4000 pixels spread over seven cells totalling 3584, and every one of their hues falls in 196°–206°, at L 0.82 to 0.85 and chroma 0.126 to 0.143. They are the row of luminous coral on the left (centred at (0.08, 0.30) and (0.28, 0.28)) and the lit stone gate at the bottom of the chasm (centred at (0.58, 0.69) and (0.61, 0.67)) — all of them inside the cyan band that covers only 15.14%. That band's mean chroma of 0.074 is lower than the blue band's 0.093, and its peak of 0.168 never reaches 0.250: it takes lightness, and takes nothing but lightness. To put a light inside a single-key picture, don't let the light share the ground's family — move it twenty or thirty degrees off, then hand it the whole lightness ceiling.

What is left has only hue

Lightness p01 is 0.33 and p50 is 0.39: half the picture is packed into six points, and it still reads as an abyss. Three completely different things measure at almost the same brightness — the cliff face on the right at L 0.39 / chroma 0.082 / 235°, the stone wall at centre at L 0.39 / 0.067 / 208°, the masonry at upper left at L 0.43 / 0.073 / 206° — and all that separates them is 29° of hue. There is no spare channel anywhere: achromatic pixels are 0.00%, a 330°–90° warm search returns nothing matched, and even the fish that look yellow-striped measure L 0.51 / chroma 0.096 / 216°, with the warm search inside their own rectangle likewise returning zero; 99.99% of the frame is shut inside the 105° between 165° and 270°. When you build a palette for a dark scene, deal these three out first: let one hue take two of them and everything else has to live on hue alone, with barely a hundred degrees of the wheel still available.

Take these colours with you

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

/* Chemin de L'Espoir in Abyssal Light · Chemin de L'Espoir in Abyssal Light — Teyvat Palette */
:root {
  --abyss-blue: oklch(0.39 0.082 235); /* Abyss Blue #024b6a */
  --algal-flare: oklch(0.45 0.159 257); /* Algal Flare #0151ab */
  --coral-glow: oklch(0.83 0.142 202); /* Coral Glow #00e2ef */
  --gate-light: oklch(0.82 0.126 206); /* Gate Light #41dbec */
  --masonry-teal: oklch(0.43 0.073 206); /* Masonry Teal #025b63 */
  --gradient-chemin-de-lespoir: linear-gradient(225deg, oklch(0.39 0.082 235) 0%, oklch(0.43 0.073 206) 30%, oklch(0.82 0.126 206) 58%, oklch(0.83 0.142 202) 78%, oklch(0.45 0.159 257) 100%);
}

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