
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.
The two extremes need not go to opposite edges — stack them on one central axis and the picture stops being framed and starts having somewhere to go. The brightest 2034 pixels sit on the water-spirit swirl at (0.48, 0.31), L 0.94; the most chromatic 3310 sit on that patch of grass at (0.46, 0.67) and (0.49, 0.62), chroma 0.148 and 0.149. The two centroids differ by 0.02 horizontally, one in the sky and one on the ground, and between them lies the path. The framing is left to a third channel: left tree L 0.30, right tree 0.30, bottom grass 0.31.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Foggy Forest Path in Teal Daylight · Foggy Forest Path in Teal Daylight — Teyvat Palette */
:root {
--open-sky: oklch(0.79 0.1 207); /* Open Sky #62cddb */
--spirit-glow: oklch(0.94 0.079 196); /* Spirit Glow #abfcfc */
--path-end-green: oklch(0.73 0.157 135); /* Path-End Green #7bbd51 */
--far-ridge: oklch(0.62 0.083 206); /* Far Ridge #3e949f */
--bank-grass: oklch(0.31 0.053 186); /* Bank Grass #023934 */
--frame-conifer: oklch(0.3 0.05 195); /* Frame Conifer #023536 */
--gradient-foggy-forest-path: linear-gradient(180deg, oklch(0.79 0.1 207) 0%, oklch(0.94 0.079 196) 16%, oklch(0.62 0.083 206) 40%, oklch(0.73 0.157 135) 62%, oklch(0.31 0.053 186) 84%, oklch(0.3 0.05 195) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.