Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Dragon-Queller in Flat Light
LiyueDayFaintGentleWindless

Dragon-Queller in Flat 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%b8e1ff26%a9c6d350%ef9c8470%6fdcf6100%bacc9f

Why it works

Once lightness is spent, you may decline to let chroma take over — silence both axes and the picture does not collapse, it becomes air. Dragon-Queller's total lightness travel is only 0.28 (p01 0.63 → p99 0.91), the narrowest of the four high-key Liyue landscapes; and when the frame's 4000 most chromatic pixels are split by hue into seven groups, every group's mean chroma lands between 0.103 and 0.107, a spread of 0.004. Set it against 〈The Inverted City in Dim Light〉: that picture's lightness travel is narrower still, 0.12 (p01 0.18 → p99 0.30), yet 124 pixels of gold hold the ceiling alone at 0.119, and a protagonist is born. Dragon-Queller lets nobody hold it alone, and gets fog instead.

01

There is no brightest thing

The 4000 brightest pixels scatter across seven cells at lightness 0.93–0.95, while their chroma spreads from 0.017 all the way to 0.091 — this picture cannot even assemble one agreed "brightest" patch. Neither end has room either: p01 0.63 is the highest floor of the four and p99 0.91 the lowest ceiling, 0.28 together, under six tenths of Mt. Laixin's 0.55. No light, and no dark anchor. Lightness here is abandoned whole.

02

Even the glowing branch stops at 0.106

The glowing blue-cyan branch in front of the left cliff measures L 0.84 / chroma 0.106 for its most saturated 3% inside the 165°–240° window. Among the frame's 4000 most chromatic pixels, the green group (the meadow below) is 0.106, the yellow-orange group (the gold crown) 0.107, the red group (the autumn trees in both bottom corners) 0.103 — the branch was granted no chroma privilege at all. It still reads as glowing because of the cliff behind it: take the block starting at (0.62, 0.05), 0.36 wide and 0.55 tall, and its 183,017 pixels — roughly a fifth of the frame — average a chroma of just 0.037, below the frame's median of 0.043. 〈Tequemecan Valley in Bright Day〉 aligned the mean chroma of three large hue bands to 0.091 / 0.092 / 0.094 so they would read as one place; what is aligned here is the peak of seven groups, so that chroma cannot stand in for lightness.

03

What is left is handed to shape

With both axes held down, only contour is left to recognise: the knotted trunk, the column of vertical joints in the cliff, the gold leaves lying sparsely over the crown. Warmth in 330°–90° amounts to 24,657 pixels, 2.80% of the frame, averaging chroma 0.065 — and none of it jumps, because nowhere does it cross that line at 0.107. 〈Dragonspine, Autumn Snow〉 wrote that colour may step aside entirely when contour is strong enough, but it said so in a picture 39.47% achromatic. Dragon-Queller is only 10.88% achromatic; what steps aside here is not the presence of colour but its height. To paint a layer of air instead of a patch of dark, hold lightness and chroma down together — hold only one and the other takes over on its own, growing a protagonist you never meant to give.

Take these colours with you

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

/* Dragon-Queller in Flat Light · Dragon-Queller in Flat Light — Teyvat Palette */
:root {
  --cliff-pale: oklch(0.81 0.037 226); /* Cliff Pale #a9c6d3 */
  --vein-cyan: oklch(0.84 0.106 215); /* Vein Cyan #6fdcf6 */
  --queller-gold: oklch(0.77 0.106 37); /* Queller Gold #ef9c84 */
  --riverside-green: oklch(0.82 0.064 126); /* Riverside Green #bacc9f */
  --far-sky: oklch(0.89 0.061 241); /* Far Sky #b8e1ff */
  --gradient-dragon-queller: linear-gradient(180deg, oklch(0.89 0.061 241) 0%, oklch(0.81 0.037 226) 26%, oklch(0.77 0.106 37) 50%, oklch(0.84 0.106 215) 70%, oklch(0.82 0.064 126) 100%);
}

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