Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Foggy Forest Path in Teal Daylight
FontaineDaycleardeep tealquickened

Foggy Forest Path in Teal Daylight

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 180° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%62cddb16%abfcfc40%3e949f62%7bbd5184%023934100%023536

Why it works

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.

01

Three edges at one darkness, the fourth let go

The foreground conifer on the left measures L 0.30 / chroma 0.050 / 195°, the one on the right L 0.30 / 0.049 / 197°, the grass slope along the bottom L 0.31 / 0.053 / 186° — 0.01 of lightness between the three edges, and every one of their chroma values held below the frame's median of 0.065. The fourth edge does not take part: the sky along the top runs L 0.77 to 0.83, chroma 0.093 to 0.100, hue 203°–208° — the same family as the three dark edges, half a lightness axis brighter. Brightcrown Mountains in Plain Daylight framed its picture with all four edges on the bright side of centre; here only three sit on the dark side, and the missing one is exactly where the subject comes in. A frame need not close — a closed frame has no entrance.

02

Brightest and most chromatic, stacked into one vertical line

Of the brightest 4000 pixels, 2034 sit at (0.48, 0.31), L 0.94 / chroma 0.079 / 196°: the water-spirit swirl over the valley mouth. Of the most chromatic 4000, 2712 fall in 120°–150° (L 0.71 / chroma 0.149, centred at (0.46, 0.67)) and another 598 in 150°–180° (L 0.69 / 0.148, centred at (0.49, 0.62)). Isolate that patch of grass and its most chromatic 3% (553 pixels) measures L 0.73 / chroma 0.157 / 135°, with the frame's peak of 0.179 sitting right there. The two centroids have x-coordinates 0.48 and 0.46. Hotel Debord in Slanting Light sent its two extremes to opposite edges and let the subject hold neither; this picture stacks them instead, so "brightest" and "most chromatic" stop being two landmarks and become one line running from sky to ground.

03

One extreme draws on one channel only

The swirl took lightness and wants nothing else: its hue is 196°, 1° from the darkest thing in the picture — the left tree at 195° — and its chroma of 0.079 is lower than the 0.093 of the sky behind it. The grass took chroma and wants nothing else: L 0.71 to 0.73, sitting exactly between the sky's 0.79 and the trees' 0.30. Each draws once, so stacking them causes no fight. The rest of the picture draws nothing at all — the little trail that looks like sand measures L 0.41 / chroma 0.071 / 173°, the same family as the trees and the sky; the green is 6.33% of the frame yet holds the 0.179 ceiling, while the cyan band covering 76.54% averages only 0.067; and a 330°–90° warm search over the whole frame returns 2 pixels at chroma 0.027. Accent colours work the same way: let an element break out on one channel only and give the second one back, and you can afford more than one focus.

Take these colours with you

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.