Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Leschots Clockwork Workshop in Sun and Shade
FontaineDayBrightOrderlyUnhurried

Leschots Clockwork Workshop in Sun and 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 215° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%fbf8f614%c89cb130%22908248%376a6e62%c15d5d78%aa8984100%535365

Why it works

A second light is insurance for hue. Two of them fall here at once, from opposite directions, one colourless and one coloured: the blown-out sunlit wall in the upper right (3,973 of the 4,000 brightest pixels crowd into a single cell, lightness 0.99, chroma 0.002) and the skylight in the tower's shadow on the left (lightness 0.45, chroma 0.028, hue 285°). All eight hue bands clear 1%, and 33,648 pixels sit between 300° and 360° — 1,463 times the 23 of the Narzissenkreuz Ordo across town. If you want every family in a palette to stay recognisable, do not adjust the palette; add a second light source at a different colour temperature.

01

The pink is really pink, the red really red

The pink awning over the stall on the right takes 11,336 pixels of the 300°–360° window all by itself, at hue 348° and chroma 0.060; the red skirt of the clockwork doll in the niche measures 22° at chroma 0.129 across its most chromatic 3%, peaking at 0.149. Same nation, same kind of red cloth: the red velvet chair in «The Duke's Office in Green Gloom» measures 49°, and the two pink banners in «The Narzissenkreuz Ordo in a Shaft of Light» measure 38° and 23°. Here the red got to stay red and the pink got to stay pink.

02

Two lights cancel each other's ledger

The sun here is colourless: the blown wall measures chroma 0.004. The skylight is violet-blue: the tower's shadow on the left is 285° at chroma 0.028, which is why the violet band reaches 9.75%. One pushes every lit surface toward neutral, the other pushes every shaded surface toward 285°, and neither takes the picture. The frame's chroma median is only 0.033, near enough to the 0.029 of that green-gloom room — the quiet here is not paler colour, it is two lights cancelling out.

03

Eight hue bands, not one collapsed

Red 2.42%, orange 10.19%, yellow 8.88%, green 1.93%, cyan 9.24%, blue 17.85%, violet 9.75%, pink 1.32% — all eight clear 1%, while that green-gloom room is left with two (yellow 20.47%, green 43.06%). The difference is not that this picture holds more things; both are full of paint and cloth. The difference is that here every family has a light to speak for it. When a scene's colour reads as one undifferentiated block no matter how you tune it, go and count its light sources before you touch a colour again.

Take these colours with you

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

/* Leschots Clockwork Workshop in Sun and Shade · Leschots Clockwork Workshop in Sun and Shade — Teyvat Palette */
:root {
  --awning-rose: oklch(0.74 0.06 348); /* Awning Rose #c89cb1 */
  --blown-white: oklch(0.98 0.004 43); /* Blown White #fbf8f6 */
  --shadow-violet: oklch(0.45 0.028 285); /* Shadow Violet #535365 */
  --doll-red: oklch(0.6 0.129 22); /* Doll Red #c15d5d */
  --cypress-teal: oklch(0.59 0.097 182); /* Cypress Teal #229082 */
  --window-teal: oklch(0.49 0.055 203); /* Window Teal #376a6e */
  --brick-ochre: oklch(0.66 0.041 29); /* Brick Ochre #aa8984 */
  --gradient-leschots-clockwork-workshop: linear-gradient(215deg, oklch(0.98 0.004 43) 0%, oklch(0.74 0.06 348) 14%, oklch(0.59 0.097 182) 30%, oklch(0.49 0.055 203) 48%, oklch(0.6 0.129 22) 62%, oklch(0.66 0.041 29) 78%, oklch(0.45 0.028 285) 100%);
}

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