
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.
Once two large hue families have cut the wheel in two, an accent has exactly one seat: the meadow at 132° and the sky at 235° are 103° apart, the midpoint of the short arc is 183.5°, and the point opposite it, 3.5°, sits 128.5° from each family. The green's complement at 312° is only 77° from the sky; the blue's complement at 55° is only 77° from the meadow. This picture fills all three positions — violet chairs at 312° (Cmax 0.154), amber reed heads at 56° (Cmax 0.155), and at 3° that crimson parasol: 1.42% of the frame, Cmax 0.220, the ceiling of the whole picture. To place an accent against two large colours, don't reach for either one's complement; find the point equidistant from both.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Hexenzirkel's Island in the Sky at Flowering Noon · Hexenzirkel's Island in the Sky at Flowering Noon — Teyvat Palette */
:root {
--deep-sky: oklch(0.63 0.136 244); /* Deep Sky #2e90d5 */
--ridge-haze: oklch(0.78 0.095 227); /* Ridge Haze #71c4e7 */
--hill-green: oklch(0.7 0.121 132); /* Hill Green #82ae5c */
--parasol-crimson: oklch(0.71 0.137 359); /* Parasol Crimson #e57a9f */
--chair-violet: oklch(0.45 0.086 304); /* Chair Violet #60487c */
--reed-amber: oklch(0.7 0.075 56); /* Reed Amber #c39371 */
--cosmos-pink: oklch(0.58 0.097 332); /* Cosmos Pink #9c6494 */
--gradient-hexenzirkels-island-in-the-sky: linear-gradient(180deg, oklch(0.63 0.136 244) 0%, oklch(0.78 0.095 227) 40%, oklch(0.7 0.121 132) 68%, oklch(0.58 0.097 332) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.