Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Royal Hot Springs in Blazing Daylight
InazumaDayOpenBalmyFull spring

Royal Hot Springs in Blazing Daylight

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%2c6eb016%cb95cf34%74599d56%22416474%632c2c100%a69eab

Why it works

A bluer sky does not buy a richer picture. Same Commission-style architecture, same sky, same cherry tree: the zenith here measures chroma 0.123 against 0.087 in 〈Tenryou Commission Headquarters in Navy Daylight〉, nearly half again as deep, yet this frame's chroma median is lower (0.041 against 0.056) and its achromatic share eight points higher (24.98% against 16.58%). The whole difference is on the ground. Measure both courtyards through one identical rectangle: there L 0.42, chroma 0.058, 268°; here L 0.71, chroma 0.021, 311°. How much colour a picture has is decided by how much ground the sun reaches, not by how blue the sky is.

01

The lit half buys lightness, not chroma

Measure the canopy through a pair of hue windows: 270°–315° holds 62,369 pixels at L 0.52, chroma 0.109; 315°–345° holds 43,157 at L 0.74, chroma 0.102. The lit half gained 0.22 in lightness and lost 0.007 in depth. The same pair in 〈Tenryou Commission Headquarters in Navy Daylight〉 runs 0.117 down to 0.100, a loss of 0.017. In both bright pictures, being lit adds lightness and subtracts chroma — pink is not a deeper violet, it is a lighter, paler one. To paint blossom in sun, drop the chroma first and push the lightness after; reverse the order and you get plastic.

02

One flagstone court, one in shadow and one in sun

Measure both courtyards through the identical rectangle (0.35, 0.86, 0.24, 0.12), 26,488 pixels each. 〈Tenryou Commission Headquarters in Navy Daylight〉 gives L 0.42, chroma 0.058, hue 268° — the blue the sky sends down. This one gives L 0.71, chroma 0.021, 311°, with the chroma already below the achromatic threshold of 0.025. The white wall on the left, taking direct sun head-on, goes further still: L 0.96, chroma 0.025. Almost all of this picture's 24.98% achromatic pixels arrive this way. No one laid down a field of grey; the sun washed the colour off the ground.

03

Bluer sky, paler picture

The zenith measures L 0.53, chroma 0.123, hue 251°, and 3288 of the 4000 most chromatic pixels land in the sky at 240°–270°, position (0.58, 0.13) — the sky is the most saturated surface in the frame. The chroma median is still only 0.041. The roof fittings hand in the same blank paper: search their 5,504 pixels at 15°–105° and 5 remain, while the block measures L 0.38, chroma 0.039, 250°. How rich a picture reads is not written on its most saturated patch, it is written in the median — and the median is set by lit area. To make a picture rich, give it shadow first.

Take these colours with you

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

/* Royal Hot Springs in Blazing Daylight · Royal Hot Springs in Blazing Daylight — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.53 0.123 251); /* Zenith Blue #2c6eb0 */
  --sunlit-crown: oklch(0.74 0.102 324); /* Sunlit Crown #cb95cf */
  --shaded-crown: oklch(0.52 0.109 301); /* Shaded Crown #74599d */
  --bleached-court: oklch(0.71 0.021 311); /* Bleached Court #a69eab */
  --navy-keep: oklch(0.37 0.07 252); /* Bathhouse Navy #224164 */
  --vermilion-rail: oklch(0.37 0.08 22); /* Vermilion Rail #632c2c */
  --gradient-royal-hot-springs: linear-gradient(180deg, oklch(0.53 0.123 251) 0%, oklch(0.74 0.102 324) 16%, oklch(0.52 0.109 301) 34%, oklch(0.37 0.07 252) 56%, oklch(0.37 0.08 22) 74%, oklch(0.71 0.021 311) 100%);
}

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