InazumaDayDreamlikeLimpidDivine

Watatsumi Island, Mirage

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%6fc9f428%e6c1dc55%98cff880%73a1ca100%657bc3

Why it works

Dreaminess has a mechanical recipe: shut every colour into the top-right corner of the colour space. All five hue bands average out inside L 0.60–0.87 and C 0.05–0.11, and inside that window even distant relations like a pink shell and a teal cliff become one family.

High lightness, low chroma is the dream

Every hue band in the frame averages, without exception, into L 0.60–0.87 and C 0.05–0.11. Dreaminess is not a matter of picking the right hues; it comes from pushing the whole palette into the bright, unsaturated corner — any set of colours that enters it softens immediately.

Pink used as white

Sangonomiya's shell measures L 0.85, C 0.055 — one step of chroma away from a white cloud. It is the largest building material in the frame and still never shouts, because what it plays here is a coloured white. Pale pink at high lightness makes an excellent neutral material colour, with one degree more body heat than pure white.

Only the violet is allowed to saturate

The violet trees are the chroma peak of the frame at a mean of C 0.11 and a peak of 0.23, over 7.7% of the pixels. A frame where everything is desaturated will eventually dissolve into fog, so one hue has to stay awake and hold the ground — letting exactly one family break the rule while the rest keep it is what stops a pastel from cloying.

Take these colours with you

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

/* Watatsumi Island, Mirage · Watatsumi Island, Mirage — Teyvat Palette */
:root {
  --clear-sky: oklch(0.795 0.106 231.5); /* Clear Sky Blue #6fc8f4 */
  --mirage-mist: oklch(0.831 0.081 240.9); /* Mirage Mist #98cff8 */
  --coral-shell: oklch(0.851 0.055 336.2); /* Coral Pink #e6c1dc */
  --haze-cliff: oklch(0.692 0.078 246.1); /* Hazed Cliff Teal #73a1ca */
  --spirit-violet: oklch(0.597 0.113 270.3); /* Spirit Violet #667bc3 */
  --gradient-watatsumi-island: linear-gradient(180deg, oklch(0.795 0.106 231) 0%, oklch(0.851 0.055 336) 28%, oklch(0.831 0.081 241) 55%, oklch(0.692 0.078 246) 80%, oklch(0.597 0.113 270) 100%);
}

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