
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.