Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Moontide Sea after Dark
Nod-KraiNightDimLuminousOpen

Moontide Sea after Dark

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%03071234%111c4144%38a9ea100%0d76f7

Why it works

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.

01

The break uses ten percent of the frame's height

The upper half (sampled across the top 20%) measures L 0.13 at chroma 0.026; the sea below (55%–90%) measures L 0.70 at chroma 0.137. All that sits between them is a mist band about 6% of the frame tall, measured at L 0.24 and chroma 0.073 — not a gradient, a single step. Cross that line and lightness rises 0.57 while chroma rises to 5.3×, so the eye reads the horizon as the subject rather than reading sea and sky as two colour fields. It is the complement of the Musoujin Gorge study: there the violent L/C jump happens in time, between flash and no flash; here it happens in space, above the line and below it.

02

The upper half is not deep blue, it is black

76.1% of the frame's pixels fall in the blue band (mean 254°), which reads as "a blue picture". But the night sky measures chroma 0.026 — already pressed against the grey threshold, and nearly all of the frame's 10.74% achromatic pixels live there. Every bit of colour is staked below the waterline. That is the economy of a night scene: the sky does not have to actually be blue, it only has to be dark enough to make the little chroma underneath look extravagant.

03

Not one warm pixel

A 330°–90° warm search across the whole frame returns **nothing** above the grey threshold. Those bright streaks in the lower left that read as golden sandbars measure L 0.90, chroma 0.048, hue 152° — pale cyan. The brightest 3300 pixels gather right there at (0.10, 0.88), averaging L 0.91 at a chroma of only 0.039, while the chroma peak of 0.212 sits in the mid-frame trench at (0.58, 0.66), L 0.59. The brightest place and the most saturated place are two different places: one carries the light, the other carries the colour.

Take these colours with you

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.