FontaineDayStatelySpaciousLimpid

Hotel Debord in Slanting Light

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%3b6bb516%50659344%646b8258%4b7f8070%476c3c82%9f823e100%9d8798

Why it works

The third frame in the family, and this one turns on position: Windwail Highland under a Clear Zenith draws its frame with chroma alone (top edge 0.121 against a centre of 0.073), Brightcrown Mountains in Plain Daylight with lightness alone (four edges at 0.87 / 0.71 / 0.71 / 0.65, all standing on the bright side of a centre at 0.61) — in both, the extremes stay inside the picture and pile up on one side. Here two axes take one edge each, and both are cut off by the frame: all 4000 of the most chromatic pixels fall into one hue bucket, 240°–270°, centred at (0.38, 0.07) — the two banners hanging in from outside the picture (chroma 0.128 and 0.117); and 3593 of the 4000 brightest press into the sunlit flagstones along the bottom edge (L 0.93 and 0.94). The hotel at the centre sits at L 0.53, chroma 0.037, below the frame's chroma median of 0.056, holding neither extreme — give the chroma ceiling and the lightness ceiling to opposite edges and the subject leads without getting louder.

The most saturated thing is cut off by the frame

The two banners reach in from the top edge; their tops, and the poles holding them, are outside the picture. They are the frame's chroma ceiling: the left banner measures L 0.53, chroma 0.128, 259°, its most saturated 3% reaching 0.179 and peaking at 0.200; the right one 0.117. The colossal wall behind them never rises above a Cmax of 0.077–0.113 wherever it is sampled, and the hotel itself stops at 0.117 — so the 4000 most chromatic pixels have nowhere to be but those two banners. In the family's other two studies the extreme sits whole and entire inside the picture: Windwail Highland's top edge at chroma 0.121 against a centre of 0.073, Brightcrown Mountains' four edges at lightness 0.87 / 0.71 / 0.71 / 0.65 against a centre of 0.61 (both sets of figures quoted from those studies). They become frames by how far they stand from the centre. This one stakes one thing more: put your strongest colour where it runs off the edge and it is no longer even a whole object — it can only be a border; it can never be the lead.

The brightest band is laid at your feet

The lightness ceiling sits on the opposite edge: 3593 of the 4000 brightest pixels land in the two bottom cells at L 0.93 and 0.94, centred at (0.71, 0.98) and (0.54, 0.95); the whole bottom strip averages L 0.67 against a frame-wide lightness median of 0.50. That strip is also the only large field in the picture that is not blue — the sunlit flagstones measure 334° at L 0.65, turning to 287° at L 0.52 as they retreat into shadow. The two extremes sit on opposite edges and on two different axes, so they do not even compete with each other.

The centre takes both minima

The hotel at the centre reads L 0.53, chroma 0.037: 0.14 darker than the bottom edge, under a third of the left banner's chroma, and the nearest thing to neutral in the frame — only 8.56% of the picture is achromatic, and even the grey-looking wall behind measures as a 265° violet-blue at chroma 0.078. The Dragonspine study split warm and cool between the four edges and the centre; here the split is on lightness and chroma, with the top and bottom edges taking one axis each. Layouts work the same way: press the brand colour into the header, lay the whitespace along the footer, and the centre becomes the centre without being given anything at all.

Take these colours with you

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

/* Hotel Debord in Slanting Light · Hotel Debord in Slanting Light — Teyvat Palette */
:root {
  --banner-blue: oklch(0.53 0.128 259); /* Banner Blue #3b6bb5 */
  --wall-violet: oklch(0.51 0.078 265); /* Wall Violet #506593 */
  --hotel-limestone: oklch(0.53 0.037 271); /* Limestone White #646b82 */
  --glass-teal: oklch(0.56 0.056 198); /* Glass Teal #4b7f80 */
  --cypress-green: oklch(0.49 0.084 139); /* Cypress Green #476c3c */
  --flowerbed-gold: oklch(0.62 0.094 86); /* Flowerbed Gold #9f823e */
  --sunlit-flagstone: oklch(0.65 0.036 334); /* Sunlit Flagstone #9d8798 */
  --gradient-hotel-debord: linear-gradient(180deg, oklch(0.53 0.128 259) 0%, oklch(0.51 0.078 265) 16%, oklch(0.53 0.037 271) 44%, oklch(0.56 0.056 198) 58%, oklch(0.49 0.084 139) 70%, oklch(0.62 0.094 86) 82%, oklch(0.65 0.036 334) 100%);
}

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