
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.
When the base is already rich, the cheapest way to make a subject is to give ground on all three channels at once: the airship measures L 0.52, chroma 0.080, hue 234°, and the sky immediately either side of it measures L 0.66 / 0.114 / 241° and L 0.63 / 0.121 / 243° — same family, 0.11 and 0.14 darker, and only two-thirds to seven-tenths of their chroma. In a frame that is 4.85% achromatic with a chroma median of 0.096, saturation is a property of the air and the ground; the one field that gives it up becomes the only thing readable as an object.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Easybreeze Holiday Resort in Floating Clarity · Easybreeze Holiday Resort in Floating Clarity — Teyvat Palette */
:root {
--zenith-blue: oklch(0.56 0.162 254); /* Zenith Blue #1d74d0 */
--mid-sky: oklch(0.64 0.121 243); /* Mid Sky #3f93cf */
--airship-teal: oklch(0.52 0.08 234); /* Airship Teal #347090 */
--far-sea: oklch(0.86 0.089 217); /* Far Sea #8ae0f7 */
--cloud-white: oklch(0.98 0.012 157); /* Cloud White #f2fbf5 */
--meadow-green: oklch(0.7 0.139 141); /* Meadow Green #6bb35f */
--painted-path: oklch(0.69 0.097 67); /* Painted Path #c48f57 */
--gradient-easybreeze-holiday-resort: linear-gradient(180deg, oklch(0.56 0.162 254) 0%, oklch(0.64 0.121 243) 22%, oklch(0.91 0.068 213) 42%, oklch(0.86 0.089 217) 56%, oklch(0.71 0.082 197) 78%, oklch(0.7 0.139 141) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.