
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 180° (used by the hero and exports), while gallery cards share a uniform 135° sweep.
Once a light has taken both the lightness channel and the hue channel, chroma is the only channel left that can still report what a thing is — and it has to come from the material itself. Here, the further from the light, the more the hue turns cyan and the lower the lightness falls (137° / 154° / 161° / 179° / 183° against L 0.62 / 0.40 / 0.43 / 0.37 / 0.36); yet the chroma of those five places reads 0.063 / 0.064 / 0.065 / 0.056 / 0.051, a spread of 0.014. The one that breaks rank is the mound of grass the light lands on: at almost the same depth as the base of the shaft (138° against 137°, L 0.59 against 0.62), its chroma of 0.103 is 1.6 times as high.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Roots of the Valley of Life in Filtered Green · Roots of the Valley of Life in Filtered Green — Teyvat Palette */
:root {
--shaft-green: oklch(0.8 0.075 119); /* Shaft Green #b8c58e */
--lit-turf: oklch(0.64 0.148 139); /* Lit Turf #59a143 */
--root-cyan: oklch(0.43 0.065 161); /* Root Cyan #2b5b44 */
--abyss-cyan: oklch(0.36 0.051 183); /* Abyss Cyan #184640 */
--cap-red: oklch(0.44 0.058 23); /* Cap Red #6f4643 */
--gradient-roots-of-the-valley-of-life: linear-gradient(180deg, oklch(0.8 0.075 119) 0%, oklch(0.62 0.063 137) 30%, oklch(0.37 0.056 179) 62%, oklch(0.64 0.148 139) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.