Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Hexenzirkel's Island in the Sky at Flowering Noon
MondstadtDayBrightUnhurriedIn Full Bloom

Hexenzirkel's Island in the Sky at Flowering Noon

Palette

Click a swatch to copy its HEX; hover for the OKLCH value.

Reconstructed gradient

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.

0%2e90d540%71c4e768%82ae5c100%9c6494

Why it works

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.

01

The parasol sits on the degree you can calculate

Across the whole frame, 345°–15° holds just 12,530 pixels (1.42%) at hue 3°. Of those, 8,896 fall inside the parasol's box and the remaining 3,634 are red reed heads in the lower half of the meadow — and the picture's chroma ceiling of 0.220 is on the parasol. The calculated best seat is 3.5°; the measurement says 3°. Under the parasol are a white-clothed table, a gramophone and stacks of open books, and apart from this one object there is nothing red anywhere in the frame. Before you pick colours, measure the hue of your two large ones, take the midpoint of the short arc and add 180° — that is where the accent belongs.

02

Both complement points are occupied, and neither wins

290°–335° holds 8,406 pixels: the violet of the high-backed chairs along the table (hue 313°, measured L 0.45 / C 0.086), Cmax 0.154. 35°–75° holds 12,100 pixels: the amber reed heads standing in the grass (hue 56°), Cmax 0.155. That patch of reeds is almost exactly the size of the parasol's 12,530, yet its ceiling is 0.065 lower. The trouble with a complement is not that it sits too close to its own family — it is that it sits only 77° from the other one. The same step that walks away from one family walks straight into the second.

03

1.42% did not buy the focus with chroma headroom

The frame's median chroma is 0.118 and p99 is 0.148, so the headroom is only 0.030. The parasol is too small to reach p99 at all; its 0.220 is a patch outside the percentiles entirely. In «Bayt Al-Muazzam under Two Lights» the hardness of the focus was bought with hue distance — gold at 66° stands 168° from the blue mist at 258° — but that picture had only one family to escape, so «as far as possible» worked. With two families in the frame, «as far as possible» delivers you to one family's complement and leaves you with 77°. The maximum distance is not a complement; it is the 128.5° of the equidistant point.

Take these colours with you

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.