Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Kannazuka in Hazy Daylight
InazumaDayLuminousOpenHazy

Kannazuka in Hazy Daylight

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%51a1d522%8081ea42%4e80a562%5db2b280%5099a1100%459ec1

Why it works

Chroma in the blue-violet half is paid for in lightness; in the green-cyan half it is not — so a blue picture that refuses to go dark is condemned to be pale. Kannazuka has the highest lightness floor of the four Inazuma frames (L p01 0.50), and its most chromatic 3% of blue stops at L 0.63, chroma 0.122. The Arsenal, Lit from Below drops the same 210°–270° window to L 0.42 and the same family of blue climbs to 0.211. Unable to afford intensity, this frame pays in area instead: 17.19% cyan plus 77.93% blue — ninety-five percent of the picture saying one thing.

01

Half a percent of green is all that is left

The islands are covered in meadow, yet the 90°–165° green band holds only 0.51% — 4,516 pixels. The grass on the near plateau measures L 0.71, chroma 0.082, hue 196°; the grass on the middle terrace is already at 215°. Air has pushed all of it into the cyan and blue bands. That leaves the picture only the 165°–270° stretch to work with, and that is precisely the stretch where intensity has to be bought with darkness. Before guessing whether a picture can be rich, count how many cheap hues it still has in hand.

02

0.10% of miasma reaches as high as 77.93% of blue

Take the most chromatic 3% inside the 270°–315° window over the breach in the central plateau: L 0.65, chroma 0.155, hue 281°. The whole violet band is 0.10% of the frame, peaking at 0.175 — while the blue band, covering seventy-eight percent, peaks at 0.177. They tie. A ceiling cannot be bought with area: blue spread over three quarters of the picture still failed to out-saturate one small cloud of violet. To build a focus in a pale scheme, do not raise the dominant's saturation — its own lightness has already capped it. Move one small plane to a different hue instead.

03

Not one warm pixel in the golden sand along the bottom

The shoals along the lower edge read as sun-bleached gold; run a 330°–90° search over that rectangle and it returns nothing matched. It measures L 0.64, chroma 0.074, hue 204°. Across the whole frame, 330°–90° holds 454 pixels (0.05%) at a mean chroma of 0.030. Among the four, Yashiori Island under a Deep Vault has 84, The Arsenal has none, and only Chouji's House in Bright Daylight has any real warmth — 22,634 pixels — which is also the only one of the four to bet its dominant on green. The cleaner the cold field, the more you are forced to shop among the expensive hues. If you want one genuinely saturated colour, keep one green-cyan surface in reserve.

Take these colours with you

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

/* Kannazuka in Hazy Daylight · Kannazuka in Hazy Daylight — Teyvat Palette */
:root {
  --open-sky: oklch(0.68 0.11 240); /* Open Sky #51a1d5 */
  --miasma-violet: oklch(0.65 0.155 281); /* Miasma Violet #8081ea */
  --cliff-shadow: oklch(0.58 0.079 242); /* Cliff Shadow #4e80a5 */
  --haze-meadow: oklch(0.71 0.082 196); /* Haze Meadow #5db2b2 */
  --sandbar-teal: oklch(0.64 0.074 204); /* Sandbar Teal #5099a1 */
  --lagoon-blue: oklch(0.66 0.099 227); /* Lagoon Blue #459ec1 */
  --gradient-kannazuka: linear-gradient(180deg, oklch(0.68 0.11 240) 0%, oklch(0.65 0.155 281) 22%, oklch(0.58 0.079 242) 42%, oklch(0.71 0.082 196) 62%, oklch(0.64 0.074 204) 80%, oklch(0.66 0.099 227) 100%);
}

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