Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Yashiori Island under a Deep Vault
InazumaDayLoftyClearStill

Yashiori Island under a Deep Vault

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%1c5ea512%e4fafe36%39839550%bf8bce68%50748b100%80b4aa

Why it works

Chroma in the blue-violet half is paid for in lightness. Same family of blue, same clear day, same 210°–270° window: Yashiori's most chromatic 3% sits at L 0.53 with chroma 0.137, while Kannazuka in Hazy Daylight manages only 0.122 at L 0.63. The two blue bands peak at almost the same height (0.182 against 0.177) — the difference is not how rich they could get, but whether they were willing to go dark for it. This frame was, which is why its sky is deep, and why it is the most convincingly noon of the four.

01

Take the sky one step deeper and the whole picture follows

The sky along the top edge measures L 0.48, chroma 0.132, hue 254°. Take the same upper edge in Kannazuka in Hazy Daylight and it is L 0.68, chroma 0.110, 240°. The two blue bands peak within 0.005 of each other (0.182 against 0.177), yet the means actually collected differ by 0.022 — because Yashiori was willing to put its sky at L 0.48 and Kannazuka stopped at 0.68. If a palette must get richer without changing hue, lower the lightness; saturation will not produce it. The ceiling is fixed, and in bright territory it sits very low.

02

The cliff that reads as sandstone is a 238° blue

The great cliff across the middle ground looks like tan sandstone; it measures L 0.54, chroma 0.055, hue 238° — 42% of the sky overhead. The strand below that reads as yellow sand is L 0.73, chroma 0.056, hue 182°, and a 330°–90° search over the same rectangle returns nothing matched. Across the whole frame that warm window holds 84 pixels (0.009%) at a mean chroma of 0.029. Narukami Island in Clear Haze measured the same effect — cliff 244°/0.065 against sky 245°/0.110, hue identical, four tenths of the chroma cut away. Here 58% is cut and the hue gives up another 16°. The same law, pushed further because the sky it is measured against is deeper.

03

Ninety-eight pixels of maple out-saturate the whole sea

One red-leafed tree stands on the clifftop toward the right. The 315°–345° window holds 98 pixels in the entire frame, averaging L 0.71, chroma 0.111, hue 319°, peaking at 0.152. In the same picture the sea, at a comparable L 0.74, reaches only chroma 0.077, and the blue band covering 87.81% averages 0.092. At around L 0.7 blue has long since hit its ceiling while rose still has 0.111 to spend — that is the whole difference between an expensive hue and a cheap one. If you want real chroma at high lightness, do not ask blue or violet for it; ask rose, cyan, or green.

Take these colours with you

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

/* Yashiori Island under a Deep Vault · Yashiori Island under a Deep Vault — Teyvat Palette */
:root {
  --deep-vault: oklch(0.48 0.132 254); /* Deep Vault #1c5ea5 */
  --cumulus-white: oklch(0.97 0.024 209); /* Cumulus White #e4fafe */
  --ridge-meadow: oklch(0.57 0.078 217); /* Ridge Meadow #398395 */
  --maple-rose: oklch(0.71 0.111 319); /* Maple Rose #bf8bce */
  --sandstone-blue: oklch(0.54 0.055 238); /* Sandstone Blue #50748b */
  --pale-shore: oklch(0.73 0.056 182); /* Pale Shore #80b4aa */
  --gradient-yashiori-island: linear-gradient(180deg, oklch(0.48 0.132 254) 0%, oklch(0.97 0.024 209) 12%, oklch(0.57 0.078 217) 36%, oklch(0.71 0.111 319) 50%, oklch(0.54 0.055 238) 68%, oklch(0.73 0.056 182) 100%);
}

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