Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
The Duke's Office in Green Gloom
FontaineEnclosedSevereStagnant

The Duke's Office in Green Gloom

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%14180c16%1c1e1130%2a240c52%af843368%7b401d100%5c6232

Why it works

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.

01

Five materials, one hue

The gilded beast-head seal at centre measures hue 103°, the masonry around it 115°, the band of teal glaze along the top of the wall 123°, and the two crimson triangular panels on the left and right bookcases 96° and 101°. Gilding, grey stone, teal glaze and crimson lacquer — four colours that contradict each other in the fiction — are packed into the 27° between 96° and 123°, the same family as the frame's largest band (green, 43.06%, hue 112°, lightness 0.29). No single material can be all four of those things at once, so this hue belongs to none of them. It belongs to the light.

02

How far it is dragged is set by how much light it gets

Same crimson cloth and lacquer, two outcomes. The red velvet on the chairback takes the central light head on at lightness 0.44 and is dragged only as far as 49°, still on the warm side. The two triangular panels above the bookcases sit at lightness 0.26, and they were dragged clean across grey into the light's own green band. The whole frame holds 44 pixels between 300° and 360°, mean lightness 0.07 — a room full of red with not one red pixel in it. To keep a colour legible under a coloured light, do not add chroma to it; add light.

03

Even a hue a person painted on cannot be kept

«Wenut Tunnels by Sandlight» measured the other half of this: there, `165°–345°` holds not a single pixel and one sandstone hue walks 47° monotonically. But that picture contains only sandstone, so «the ambient colour belongs to the light» came free rather than being won. Here the gilding, the teal glaze and the crimson lacquer are all identity colours a person deliberately applied, and under one light they are gathered into the same 27°. What colour you paint a prop is not yours to decide once the light has a hue — to protect a prop's identity, give it a lamp of its own rather than louder paint.

Take these colours with you

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.