Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Thalatta Submarine Canyon under Descending Light
FontaineDayVerdantSubmergedTeeming

Thalatta Submarine Canyon under Descending 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 165° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%cff5e818%42d3e746%207c8972%077382100%46913f

Why it works

A medium hands over its chroma when it darkens; a material only hands over lightness. Descending from the surface to the seabed, the water drops from L 0.80 to 0.51 and its chroma follows, 0.122 down to 0.087 — while the very same weeds hold their chroma still (0.147 → 0.143) and surrender lightness alone, 0.74 down to 0.53. At the deepest band the weeds are only 0.02 lighter than the water, yet 0.056 more chromatic. When the background is a medium, contrast is not something you add; it grows on its own.

01

Water loses two things, weed only one

Cut the frame into five horizontal bands and count only the 165°–270° water: lightness 0.80 → 0.66 → 0.60 → 0.56 → 0.51, chroma 0.122 → 0.114 → 0.097 → 0.091 → 0.087, and hue nailed inside the 6° between 206° and 212°. Count only the 90°–165° weed in the same bands — starting from the second, since the top band holds just 11301 green pixels, under a quarter of the second — and lightness runs 0.74 → 0.69 → 0.59 → 0.53 while chroma reads 0.147 → 0.144 → 0.140 → 0.143. The deeper the light travels, the closer the water itself gets to having no light at all, and no light means no colour; the weed is merely less lit. To push a distant plane back, darkening it is not enough — take away its chroma in the same proportion.

02

Lightness runs out, chroma picks it up

In the second band the weed is 0.08 lighter than the water and 0.033 more chromatic. In the bottom band only 0.02 of lightness is left, while the chroma gap has opened to 0.056. The lightness channel is spent on the way down, occupied entirely by "how far from the surface" — the Sea of Bygone Eras study settled that: underwater, lightness is a depth gauge — so the boundary has to be rehung on chroma, which happens to be the channel the water lets go of as it sinks. The most chromatic 4000 pixels in the frame (chroma 0.197, hue 134°) sit at (0.82, 0.76), that clump of tall kelp at the lower right, inside the darkest fifth of the picture; the brightest 4000 are the opposite, at (0.06, 0.03) where the shafts enter, with chroma of only 0.044. To separate things in shadow, do not reach for brightness — ask which of them still has chroma left.

03

The cliff is not the colour of stone, it is the colour of water

The wall that splits the frame in two measures L 0.54, chroma 0.084, hue 209° — the same figure as the open water above it at 208°, just one step darker, and with less chroma than the water itself. A solid far enough away stops behaving as a material and starts behaving as the medium, which is also why pixels below chroma 0.025 amount to 0.01% of this frame. The Nostoi Region study stands above the same Fontaine water: further is brighter, and chroma falls from 0.106 to 0.079. Here we are below it: deeper is darker, and chroma falls from 0.122 to 0.087. Chroma drops in both, by a similar amount; the only channel that reversed is lightness. So before drawing depth, ask whether the medium is brighter or darker than the objects in it: brighter goes up, darker goes down, and the chroma channel never asks who the medium is.

Take these colours with you

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

/* Thalatta Submarine Canyon under Descending Light · Thalatta Submarine Canyon under Descending Light — Teyvat Palette */
:root {
  --shaft-white: oklch(0.94 0.044 172); /* Shaft White #cff5e8 */
  --upper-water: oklch(0.8 0.122 208); /* Upper Water #42d3e7 */
  --canyon-wall: oklch(0.54 0.084 209); /* Canyon Wall #207c89 */
  --deep-water: oklch(0.51 0.087 211); /* Deep Water #077382 */
  --weed-carpet: oklch(0.59 0.14 142); /* Weed Carpet #46913f */
  --kelp-crown: oklch(0.74 0.197 134); /* Kelp Crown #73c429 */
  --gradient-thalatta-submarine-canyon: linear-gradient(165deg, oklch(0.94 0.044 172) 0%, oklch(0.8 0.122 208) 18%, oklch(0.54 0.084 209) 46%, oklch(0.51 0.087 211) 72%, oklch(0.59 0.14 142) 100%);
}

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