
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
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.
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.