Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Cider Lake at Crystal Noon
MondstadtDayLimpidOpenCool

Cider Lake at Crystal Noon

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%3278ba26%8ab4d345%71a7c266%72bdba84%96a581100%9f9665

Why it works

Depth and light source are two maps, and each can take a channel of its own, with its own origin. From the top of the frame down to the near shore, the hue of seven equal bands walks 248° → 143° without turning back once; lightness instead folds about the horizon — zenith 0.59, the band just above the horizon 0.75, underfoot 0.59, the two ends identical. Hue records how much water the light came through; lightness records how far you are from that bright line. Don't stack the two on one channel.

01

Lightness folds at the horizon

Cut the frame into eight equal bands and lightness reads 0.59 / 0.71 / 0.75 / 0.69 / 0.68 / 0.71 / 0.71 / 0.59: the two darkest are the zenith and the band pressed against the lens, identical to the digit, and the brightest 0.75 sits just above the horizon. «Hypostyle Desert in White Haze» measured the same fold — when the light source stretches into a horizon, the gradient folds along that line. The difference is that there chroma folds with it; here it does not: upward it rises 0.064 → 0.118, downward it falls 0.070 → 0.057. In this picture lightness answers one question only: how far from that bright line.

02

That 151° is a road, not a collision

Four hue bands carry area, averaging 88° / 130° / 188° / 239°, filling 151° rung by rung and 96.40% of the frame between them. It sounds like several hues fighting; in fact none of them ever appears at the same height: zenith 250°, horizon 231°, water surface 192°, sandbed underwater 126°, the beach out of the water 99°. The two far ends of the span are pinned to the top edge and the bottom edge and never come near each other. The hue channel is spent entirely on depth — which is also why this picture needs no neutral ground: only 3.55% of it is achromatic.

03

There is no warm pixel in that gold sand

Below the waterline, the sandbar at bottom right reads gold; it measures hue 126° and chroma 0.054. Put the 120°-wide window 330°–90° over the same rectangle and only 6 of its 18,966 pixels match. The red band across the whole frame (345°–15°) is 0.02%, and every pixel in the lower half falling within 45°–90° averages no further than 88°. It reads gold because that is where the hue road ends. So measure before assigning channels: what a thing looks like cannot decide which channel draws which map.

Take these colours with you

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

/* Cider Lake at Crystal Noon · Cider Lake at Crystal Noon — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.56 0.124 250); /* Zenith Blue #3278ba */
  --cumulus-white: oklch(0.97 0.01 216); /* Cumulus White #eef7f9 */
  --horizon-blue: oklch(0.7 0.069 231); /* Horizon Blue #71a7c2 */
  --lake-teal: oklch(0.75 0.075 192); /* Lake Teal #72bdba */
  --sandbed-green: oklch(0.7 0.054 126); /* Sandbed Green #96a581 */
  --shoal-gold: oklch(0.67 0.068 99); /* Shoal Gold #9f9665 */
  --cliff-shadow: oklch(0.59 0.067 246); /* Cliff Shadow #5c81a3 */
  --gradient-cider-lake: linear-gradient(180deg, oklch(0.56 0.124 250) 0%, oklch(0.75 0.064 242) 26%, oklch(0.7 0.069 231) 45%, oklch(0.75 0.075 192) 66%, oklch(0.7 0.054 126) 84%, oklch(0.67 0.068 99) 100%);
}

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