
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 180° (used by the hero and exports), while gallery cards share a uniform 135° sweep.
A coloured light does not lay a filter over the materials; it drags the hue that opposes it across grey and onto its own side. Gilding 103°, masonry 115°, teal glaze 123°, the crimson lacquer on the bookcases 96° and 101° — five materials that have nothing to do with one another in the fiction, all inside 27°, while the 60°-wide window from 300° to 360° holds 44 pixels in the entire frame. A hue census reads the lighting, not the inventory of materials.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* The Duke's Office in Green Gloom · The Duke's Office in Green Gloom — Teyvat Palette */
:root {
--gilt-glow: oklch(0.64 0.11 80); /* Gilt Glow #af8433 */
--ember-red: oklch(0.44 0.095 49); /* Ember Red #7b401d */
--desk-green: oklch(0.48 0.07 115); /* Desk Green #5c6232 */
--faded-crimson: oklch(0.26 0.039 96); /* Faded Crimson #2a240c */
--moss-brick: oklch(0.23 0.024 115); /* Moss Brick #1c1e11 */
--glazed-teal: oklch(0.2 0.023 123); /* Glazed Teal #14180c */
--gradient-the-dukes-office: linear-gradient(180deg, oklch(0.2 0.023 123) 0%, oklch(0.23 0.024 115) 16%, oklch(0.26 0.039 96) 30%, oklch(0.64 0.11 80) 52%, oklch(0.44 0.095 49) 68%, oklch(0.48 0.07 115) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.