Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Komore Teahouse against the Sun
InazumaDayStillPlainSparse

Komore Teahouse against the Sun

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 200° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%dcd9df20%37425942%67808062%1e273480%101b58100%6b4b6d

Why it works

Once the sun is inside the frame, not one surface faces it. The sun's own cluster of 3,986 pixels measures L 1.00, chroma 0.001, while the roof sits at 261°, the timber at 259°, the path at 262° and the sky at 263° — all four inside 4°. 42.28% of pixels fall under the achromatic threshold, and the chroma ceiling of 0.133 is the lowest of the four pictures in this batch. Every material is left with only its shaded hue position, the cherry included: the whole frame holds just 4,206 pixels at 315°–345°, 0.48% of it, where the canopy in 〈Royal Hot Springs in Blazing Daylight〉 gave its lit half 40.9%. Backlight is not a kind of light. It deletes the picture's lit half outright.

01

Four materials inside four degrees

The corner of sky at upper left that still holds colour measures L 0.38, chroma 0.042, hue 263°. The washed-out sky to the right of the sun measures L 0.72, chroma 0.036, 263° — lightness travelled 0.34 while hue and chroma did not move at all. Lower down: the teahouse's tiled roof at L 0.28, chroma 0.057, 261°; the backlit timber and lattice at L 0.27, chroma 0.027, 259°; the flagstone path at the door at L 0.37, chroma 0.049, 262°. Sky, tile, wood and stone hold their hues inside the four degrees of 259°–263°, and 40.91% of the frame lands in the blue band. When no surface takes direct light, every material retreats to one ambient colour and the only difference left between them is lightness.

02

The cherry is down to 2,626 pixels on the ground

A layer of fallen blossom is scattered at the left end of the path. Measure that rectangle through two windows: 270°–315° holds 24,177 pixels at L 0.43, chroma 0.035, hue 285°; 315°–345° holds only 2,626 at L 0.46, chroma 0.067, 325° — a lit half of 9.8%. The other two pictures in this batch give 30.3% and 40.9%; 〈Aisa Bathhouse in Blossom Light〉 gives 5.2%. Same petals, same pair of hue positions: once the lit half goes to zero, it stops being one of the picture's colours. The cheapest way to delete a colour is not to grey it down but to put the light behind it.

03

The deepest patch is darker than the picture's ordinary

The most chromatic 3% of the frame averages L 0.45, chroma 0.094, hue 247°, and its deepest cluster of 3,129 pixels lands on the indigo noren at the shop door: L 0.26, chroma 0.111, 269° — a full 0.08 below the frame's lightness median of 0.34. In the other three pictures of this batch the deepest cluster sits above its own median (0.43 against 0.32, 0.56 against 0.43, 0.52 against 0.47). Only here is the sign negative. With no lit half, colour can only come from things that carry their own pigment, and all of those are on the shaded side. In a backlit composition, do not expect the light to hand you colour; dye whatever needs colour beforehand.

Take these colours with you

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

/* Komore Teahouse against the Sun · Komore Teahouse against the Sun — Teyvat Palette */
:root {
  --hidden-sun: oklch(0.89 0.008 310); /* Hidden Sun #dcd9df */
  --upper-sky: oklch(0.38 0.042 263); /* Upper Sky #374259 */
  --backlit-timber: oklch(0.27 0.027 259); /* Backlit Timber #1e2734 */
  --dyed-noren: oklch(0.26 0.111 269); /* Dyed Noren #101b58 */
  --garden-pine: oklch(0.58 0.029 196); /* Garden Pine #678080 */
  --fallen-petal: oklch(0.46 0.067 325); /* Fallen Petal #6b4b6d */
  --gradient-komore-teahouse-outside: linear-gradient(200deg, oklch(0.89 0.008 310) 0%, oklch(0.38 0.042 263) 20%, oklch(0.58 0.029 196) 42%, oklch(0.27 0.027 259) 62%, oklch(0.26 0.111 269) 80%, oklch(0.46 0.067 325) 100%);
}

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