
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.