Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Easybreeze Holiday Resort in Floating Clarity
NatlanDayBuoyantWide-openHoliday

Easybreeze Holiday Resort in Floating Clarity

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%1d74d022%3f93cf42%adeefc56%8ae0f778%5db2b3100%6bb35f

Why it works

When the base is already rich, the cheapest way to make a subject is to give ground on all three channels at once: the airship measures L 0.52, chroma 0.080, hue 234°, and the sky immediately either side of it measures L 0.66 / 0.114 / 241° and L 0.63 / 0.121 / 243° — same family, 0.11 and 0.14 darker, and only two-thirds to seven-tenths of their chroma. In a frame that is 4.85% achromatic with a chroma median of 0.096, saturation is a property of the air and the ground; the one field that gives it up becomes the only thing readable as an object.

01

The subject holds neither extreme

Of the 4000 most chromatic pixels, 2,738 sit on the near meadow slope at lower right (120°–150°, mean chroma 0.193, centred at (0.67, 0.79)) and 1,256 in that corner of the zenith (240°–270°, 0.185, centred at (0.11, 0.03)). Of the 4000 brightest, every cell the bench reports is cloud, at chroma 0.009–0.022. The airship takes none of it. What it takes is one thing only: being paler than the background right beside it — 0.080 against 0.114 and 0.121 — and measuring left and right separately gives almost symmetric figures, so this is not an artefact of framing. The two strongest colours in the picture sit at the top edge and the bottom edge, and the subject sits quietly between them.

02

Pale is not deference, it is «not air»

Secret Hall of the Realms, Stars and Afterglow argued that a field defers by being pale: its floor is 0.12 brighter than the subject at four-tenths the chroma (0.044 against 0.109), and the separation never loosens (figures quoted from that study). Here the palest large field is precisely the subject. The difference is who owns the chroma. There it lives on objects; here it lives in the air and the grass — zenith 0.162, near meadow 0.139 (the green band peaks at 0.267) — while the whole middle distance, from the cloud band out to the far sea, holds only 0.051–0.094. Inside rich air, giving up chroma is itself the declaration «I am not air». So what pale decides is not rank but material class: measure whether the chroma belongs to the environment or to the objects, then decide whether your subject should rise or step down.

03

The most vivid path in the picture is 533 pixels

A painted path winds across the meadow at right, and it looks orange-gold. A 330°–60° warm search over the whole frame returns 1,019 pixels (0.12%). Narrow the rectangle onto the path itself and take only 30°–90°, and 533 remain, mean chroma 0.097 — while the same rectangle holds 16,412 pixels at 90°–180°, mean 0.134. Nearly all of that «orange road» is simply green pushed a little towards yellow: this is the rule from Elton Trench in Dimmed Daylight — warmth is a rank inside the frame — playing out on a field of grass at 141°. So before you cite a warm path in a palette argument, measure it rather than believe it.

Take these colours with you

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

/* Easybreeze Holiday Resort in Floating Clarity · Easybreeze Holiday Resort in Floating Clarity — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.56 0.162 254); /* Zenith Blue #1d74d0 */
  --mid-sky: oklch(0.64 0.121 243); /* Mid Sky #3f93cf */
  --airship-teal: oklch(0.52 0.08 234); /* Airship Teal #347090 */
  --far-sea: oklch(0.86 0.089 217); /* Far Sea #8ae0f7 */
  --cloud-white: oklch(0.98 0.012 157); /* Cloud White #f2fbf5 */
  --meadow-green: oklch(0.7 0.139 141); /* Meadow Green #6bb35f */
  --painted-path: oklch(0.69 0.097 67); /* Painted Path #c48f57 */
  --gradient-easybreeze-holiday-resort: linear-gradient(180deg, oklch(0.56 0.162 254) 0%, oklch(0.64 0.121 243) 22%, oklch(0.91 0.068 213) 42%, oklch(0.86 0.089 217) 56%, oklch(0.71 0.082 197) 78%, oklch(0.7 0.139 141) 100%);
}

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