
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.
Catching the eye is not the same as being saturated. The only warm thing in this picture covers 0.24% of the frame at chroma 0.063 — lower than the cold blue arc beside it (0.072). It becomes the focus because it is the one hue that does not belong to the blue family, in a field that is 35.2% achromatic and 56.5% blue.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Frost Moon in Earthshine · Frost Moon in Earthshine — Teyvat Palette */
:root {
--void-black: oklch(0.16 0.022 264); /* Void Black #080d17 */
--atmos-arc: oklch(0.32 0.072 264); /* Atmospheric Arc #203157 */
--regolith-grey: oklch(0.54 0.046 270); /* Regolith Grey #646e8a */
--molten-scar: oklch(0.66 0.063 47); /* Molten Scar #b38771 */
--star-white: oklch(0.96 0.02 216); /* Star White #e4f6fa */
--gradient-frost-moon: linear-gradient(180deg, oklch(0.16 0.022 264) 0%, oklch(0.32 0.072 264) 58%, oklch(0.54 0.046 270) 82%, oklch(0.45 0.048 263) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.