
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.
Chroma in the blue-violet half is paid for in lightness; in the green-cyan half it is not — so a blue picture that refuses to go dark is condemned to be pale. Kannazuka has the highest lightness floor of the four Inazuma frames (L p01 0.50), and its most chromatic 3% of blue stops at L 0.63, chroma 0.122. The Arsenal, Lit from Below drops the same 210°–270° window to L 0.42 and the same family of blue climbs to 0.211. Unable to afford intensity, this frame pays in area instead: 17.19% cyan plus 77.93% blue — ninety-five percent of the picture saying one thing.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Kannazuka in Hazy Daylight · Kannazuka in Hazy Daylight — Teyvat Palette */
:root {
--open-sky: oklch(0.68 0.11 240); /* Open Sky #51a1d5 */
--miasma-violet: oklch(0.65 0.155 281); /* Miasma Violet #8081ea */
--cliff-shadow: oklch(0.58 0.079 242); /* Cliff Shadow #4e80a5 */
--haze-meadow: oklch(0.71 0.082 196); /* Haze Meadow #5db2b2 */
--sandbar-teal: oklch(0.64 0.074 204); /* Sandbar Teal #5099a1 */
--lagoon-blue: oklch(0.66 0.099 227); /* Lagoon Blue #459ec1 */
--gradient-kannazuka: linear-gradient(180deg, oklch(0.68 0.11 240) 0%, oklch(0.65 0.155 281) 22%, oklch(0.58 0.079 242) 42%, oklch(0.71 0.082 196) 62%, oklch(0.64 0.074 204) 80%, oklch(0.66 0.099 227) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.