Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Domus Aurea, Gold Made of Light
FontaineSolemnPlain RadianceVast

Domus Aurea, Gold Made of Light

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%70595f15%6a7dcd32%b69c8345%d8c29062%7e707384%647690100%cecbbc

Why it works

Gold is arranged, not mixed. In this hall named for gold, the most chromatic 4000 pixels are 4000/4000 blue and violet, and not one of them is gold — the metal covers 235,968 pixels (26.80%) yet caps at chroma 0.085, below the frame's own chroma p99 of 0.113. More than one per cent of this picture is more saturated than its most golden gold pixel. Gold's identity is written instead on a lightness ramp built from three hue bands: red at 5.38% averaging L 0.49, orange at 8.42% averaging L 0.54, yellow at 13.00% averaging L 0.70 — while chroma only climbs from 0.031 to 0.047. To make a surface read as metal, spend the whole budget on how finely the light-and-dark layers are cut, and hand the chroma to the window beside it that light is passing through.

01

Gold is three hue bands stacked into one ramp

Red, 345°–15°, holds 5.38% at an average L 0.49; orange, 15°–45°, holds 8.42% at L 0.54; yellow, 45°–90°, holds 13.00% at L 0.70 — lightness climbs 0.21 while chroma only moves from 0.031 to 0.038 to 0.047. These are not three different things but the dark groove, the flank and the lit ridge of the same gold column. Measured on its own, the column's 12,123 warm pixels average L 0.71 / chroma 0.046, and its own most chromatic 3% (442 pixels) reads L 0.82 / 0.070 — the highlight travels up in lightness, hardly at all outward in chroma. Paint metal by first deciding how finely to cut its tonal layers; do not go looking for the saturation knob.

02

Means cannot tell materials apart; the ceilings differ 2.2 times

The warm half, 345°–90°, holds 235,968 pixels at a mean chroma of 0.041; the cool half, 240°–315°, holds 301,397 pixels at a mean of 0.050 — a difference of 0.009, so any palette sorted by mean chroma would file the gold columns and the stained glass on the same step. Their ceilings, however, are 0.085 against 0.185: 2.2 times apart. Of the most chromatic 4000 pixels, 2,047 sit in 270°–300° and 1,953 in 240°–270°, together 4000/4000, with no gold squeezing in at all. To report how much a material weighs in a picture, report how high its most chromatic cluster reaches; the mean will only tell you that everything in this room is pale.

03

Reflection goes up, transmission goes out

The most chromatic 3% of the tall central window (388 pixels) measures L 0.60 / chroma 0.124 / hue 271°, peaking at 0.128; the most chromatic 3% of the gold column facing it, lit just as well, measures L 0.82 / 0.070. «Chenyu Vale: Upper Vale, Backlit» measured this rule already: reflection washes colour toward white, while transmission multiplies the light's lightness by the material's own hue. This picture pushes it to the scale of a whole frame — a reflective material covering 26.80% of the picture casts no vote at all in the chroma census. The third material is more absolute still: on the central axis the stone statue's body reads L 0.56 / 0.018 and its plinth L 0.65 / 0.011, and 1,364 of the brightest 4000 pixels are the floor at its feet, L 0.94 / 0.007. Choosing a material is choosing a channel: give lightness to read as metal, chroma to read as light, and neither to read as stone.

Take these colours with you

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

/* Domus Aurea, Gold Made of Light · Domus Aurea, Gold Made of Light — Teyvat Palette */
:root {
  --bronze-groove: oklch(0.49 0.031 2); /* Bronze Groove #70595f */
  --window-core: oklch(0.61 0.124 272); /* Window Core #6a7dcd */
  --column-gold: oklch(0.71 0.046 67); /* Column Gold #b69c83 */
  --ridge-gold: oklch(0.82 0.07 86); /* Ridge Gold #d8c290 */
  --stone-rider: oklch(0.56 0.018 7); /* Stone Rider #7e7073 */
  --floor-inlay: oklch(0.56 0.047 258); /* Floor Inlay #647690 */
  --light-pool: oklch(0.84 0.02 96); /* Light Pool #cecbbc */
  --gradient-domus-aurea: linear-gradient(180deg, oklch(0.49 0.031 2) 0%, oklch(0.61 0.124 272) 15%, oklch(0.71 0.046 67) 32%, oklch(0.82 0.07 86) 45%, oklch(0.56 0.018 7) 62%, oklch(0.56 0.047 258) 84%, oklch(0.84 0.02 96) 100%);
}

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