
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.
The sky you can see in a picture is usually not the sky lighting it. This aerial view has its top edge pressed against the horizon, and the whole of that sky measures L 0.87 / chroma 0.070 — 0.075 / 0.073 / 0.073 taken left, centre and right, with not one pixel past 0.099. Meanwhile 3610 of the frame's 4000 most chromatic pixels crouch on the unlit rock face of the central spire at L 0.53 / chroma 0.191 / hue 264°, peaking at 0.234. The shaded face is 2.7 times more saturated than its only light source, because what colours it is the zenith outside the frame. Do not pick a shadow's colour off the sky in your picture — that reading has already been rewritten by the air.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Fontaine Research Institute of Kinetic Energy Engineering Region in Clear Daylight from Above · Fontaine Research Institute of Kinetic Energy Engineering Region in Clear Daylight from Above — Teyvat Palette */
:root {
--haze-sky: oklch(0.87 0.07 238); /* Haze Sky #a9dcfd */
--far-sea: oklch(0.84 0.094 235); /* Far Sea #8cd5ff */
--ridge-shade: oklch(0.53 0.191 264); /* Ridge Shade #3061d8 */
--lit-rock: oklch(0.65 0.089 242); /* Lit Rock #5c96c1 */
--shoal-pool: oklch(0.68 0.086 188); /* Shoal Pool #51aaa2 */
--slope-green: oklch(0.74 0.121 147); /* Slope Green #74c07d */
--gradient-fontaine-research-institute-of-kinetic-energy-engineering-region: linear-gradient(180deg, oklch(0.87 0.07 238) 0%, oklch(0.84 0.094 235) 18%, oklch(0.53 0.191 264) 34%, oklch(0.65 0.089 242) 52%, oklch(0.68 0.086 188) 76%, oklch(0.74 0.121 147) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.