Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
The Steambird in Blue Shade
FontaineDayCoolComposedStill

The Steambird in Blue Shade

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%6882b816%698dc742%2a5d8362%3f7f9082%247965100%8b7e8f

Why it works

An exterior can have exactly one light too. There is not a single directly sunlit surface here; the only thing lighting it is the sky, which is outside the frame. The gilded inscription over the door measures 264°, identical to the grey stone tower wall behind it; the cypresses are 218°, the lawn 174°, the "turquoise" window above the door 244° — tree, grass, gold and stone all inside 174°–264°, the blue band alone taking 58.55% and green left with 2.52%. Whether there is a ceiling is not a mark on this ruler. How many lights of different colour temperature there are, is.

01

The gold lettering and the stone wall, one hue

The gilded inscription along the door lintel measures hue 264°, chroma 0.046. The grey stone tower wall a whole courtyard behind it is 264°, chroma 0.088, and the stone wall on the right is 264° as well. And the turquoise window that is Fontaine's signature holds just 9 pixels in the cyan window from 165° to 210°; all 26,728 of them fall between 210° and 270°, mean 244° — it reads turquoise and measures blue. When the only light source is the sky, the sky's hue is the picture's hue.

02

6,750 pixels that belong to nothing

The band from 300° to 360° holds 6,750 pixels here, 153 times the 44 of «The Duke's Office in Green Gloom» — which sounds like a family in good health. But the largest cluster, 1,913 pixels, lies on the cream stone steps along the bottom edge at chroma 0.031, less than half the frame's median of 0.059; and the one thing here that ought to be warm, the gilded bird emblem, leaves only 850 pixels at chroma 0.030 inside the 30°–90° window of its own rectangle. To judge whether a hue family is still alive, do not count pixels — measure whether its most chromatic cluster sits on an object.

03

Being outdoors does not count

«Leschots Clockwork Workshop in Sun and Shade», same city and same day, has two lights: the blown-out directly sunlit wall in the upper right (lightness 0.99, chroma 0.002) and the 285° skylight in the tower's shadow on the left. It gets all eight hue bands past 1% and 33,648 pixels between 300° and 360°. This picture has only the sky, and gets five bands and 6,750. Both are outdoors, under the same Fontaine sky. So what this ruler measures was never the presence of walls but the number of light sources: take one away and the colour wheel folds in half.

Take these colours with you

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

/* The Steambird in Blue Shade · The Steambird in Blue Shade — Teyvat Palette */
:root {
  --tower-blue: oklch(0.61 0.088 264); /* Tower Blue #6882b8 */
  --dome-blue: oklch(0.64 0.096 260); /* Dome Blue #698dc7 */
  --glass-blue: oklch(0.46 0.083 244); /* Glass Blue #2a5d83 */
  --cypress-blue: oklch(0.56 0.07 218); /* Cypress Blue #3f7f90 */
  --lawn-cyan: oklch(0.52 0.086 174); /* Lawn Cyan #247965 */
  --step-blush: oklch(0.61 0.031 319); /* Step Blush #8b7e8f */
  --gradient-the-steambird: linear-gradient(180deg, oklch(0.61 0.088 264) 0%, oklch(0.64 0.096 260) 16%, oklch(0.46 0.083 244) 42%, oklch(0.56 0.07 218) 62%, oklch(0.52 0.086 174) 82%, oklch(0.61 0.031 319) 100%);
}

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