
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.
Hang the values upside down: the storm cloud presses overhead at L 0.42 while the sea of mist underfoot is brighter at L 0.69 — we expect a bright sky over a dark ground, and contradicting that expectation is ominous on its own. The oppression here is structural; not one hue had to change.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Ochkanatlan, Lowering Sky · Ochkanatlan, Lowering Sky — Teyvat Palette */
:root {
--storm-slate: oklch(0.424 0.074 263.1); /* Storm Cloud Black #384d77 */
--tower-blue: oklch(0.528 0.066 258.3); /* Tower Shadow Blue #536c92 */
--mist-sea: oklch(0.689 0.077 254.6); /* Mist Sea Blue #7a9eca */
--mesa-green: oklch(0.831 0.072 123.7); /* Clifftop Green #bed09c */
--scarlet-wing: oklch(0.664 0.059 9.6); /* Crimson Wing #b4858b */
--gradient-ochkanatlan: linear-gradient(180deg, oklch(0.424 0.074 263) 0%, oklch(0.528 0.066 258) 40%, oklch(0.689 0.077 255) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.