
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.
To make one line the subject of a picture, jump lightness and chroma on the same line. Above the horizon: L 0.13, chroma 0.026. Below it: L 0.70, chroma 0.137 — a 0.57 step in lightness and a 5.3× step in chroma, both breaking at the same edge.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Moontide Sea after Dark · Moontide Sea after Dark — Teyvat Palette */
:root {
--night-vault: oklch(0.13 0.026 263); /* Night Vault #030712 */
--haze-violet: oklch(0.24 0.073 268); /* Haze Violet #111c41 */
--moontide-blue: oklch(0.7 0.137 239); /* Moontide Blue #38a9ea */
--deep-tide: oklch(0.59 0.212 258); /* Deep Tide #0d76f7 */
--shoal-white: oklch(0.9 0.048 152); /* Shoal White #c7e8cf */
--dawn-pink: oklch(0.77 0.098 317); /* Dawn Pink #cea1de */
--gradient-moontide-sea: linear-gradient(180deg, oklch(0.13 0.026 263) 0%, oklch(0.24 0.073 268) 34%, oklch(0.7 0.137 239) 44%, oklch(0.59 0.212 258) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.