
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.
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.
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.