Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Aaru's Shut in White Light
SumeruDaySolemnVastBleached

Aaru's Shut in White Light

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 172° (used by the hero and exports), while gallery cards share a uniform 135° sweep.

0%f9fae920%9a98b045%7c5e5670%684d4d100%c18246

Why it works

The chroma in this picture was not given by the light, it was cut into the stone by hand: the 4,000 brightest pixels in the frame measure a chroma of 0.003, bare paving 0.039 and the shaft of an obelisk 0.043, neither peaking past 0.075 — while on the inlaid slab underfoot the most saturated 3% runs to 0.109. When the light source itself has no colour, chroma stops being a property of the light and becomes a mark of what a hand has touched.

01

The sun has no colour

The top 12% of the sky measures L 0.98 at chroma 0.022, and the 4,000 brightest pixels in the frame measure 0.003 — white with nothing you could call a hue. The sun's own side is no different: the sky in the top-left corner (y<0.06) reads chroma 0.037 against 0.007 at the same height on the right, and direction is the only thing left to read in this light. White light tints nothing, so every colour in the frame belongs to the object it sits on — Salacia Plain Underwater proves the reverse: let a medium do the tinting and every material collapses into one hue. To let local colour speak, take the colour out of the light first.

02

The chroma ceiling is drawn by hand

Pull out the 4,000 most chromatic pixels and 3,800 of them crowd onto (0.50, 0.88) and (0.49, 0.80) — the inlaid slab in the middle of the ground at your feet, averaging 0.105–0.108 and peaking at 0.140. Other things made of the same stone: bare paving at 0.039 (peak 0.075), the shaft of the obelisk on the left at 0.043 (peak 0.070), and even the gilded winged emblem above the shrine reaches only 0.071 across its most saturated 3% — the chroma peak of this frame is not on the altar, it is under your shoes. All these hues fall inside one family, 20–63°, and the only thing separating them is chroma: a frame of one material under one light needs no second hue, a single line drawn in chroma is enough — and whatever crosses it reads at once as man-made.

03

The palest stroke is the one that leads

Across the plaza — the bottom 60% of the frame — 469 pixels fall between 165 and 270°, 0.09% of the picture, at chroma 0.036 peaking at 0.073: lower than the paving it lies on (0.042), a third of the inlay (0.109), and still the first line the eye follows. Frost Moon in Earthshine made the case that its molten seam, at 0.063, was already less chromatic than the atmospheric arc beside it at 0.072; here it goes further — the accent is lower than everything around it. It can still lead because nature offers not one cool pixel in this frame: the sky is white, the only cool on the table is the haze over the distant mesas (288°, 2.65%), and almost all of it is locked above the horizon — of the pixels landing in 270–330°, 22,919 sit at y<0.45 and only 1,356 below it. To make a thin line visible, don't brighten it first — clear the frame of the natural noise that shares its family.

Take these colours with you

CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.

/* Aaru's Shut in White Light · Aaru's Shut in White Light — Teyvat Palette */
:root {
  --bleached-sky: oklch(0.98 0.022 110); /* Blown-Out Sky #f9fae9 */
  --haze-violet: oklch(0.69 0.034 289); /* Distant Haze Violet #9a98b0 */
  --paving-tan: oklch(0.51 0.042 34); /* Paving Tan #7c5e56 */
  --step-shadow: oklch(0.45 0.037 20); /* Step Shadow #684d4d */
  --inlay-gold: oklch(0.66 0.109 63); /* Inlay Gold #c18246 */
  --ley-blue: oklch(0.67 0.059 215); /* Ritual Blue #6a9fac */
  --gradient-aarus-shut: linear-gradient(172deg, oklch(0.98 0.022 110) 0%, oklch(0.69 0.034 289) 20%, oklch(0.51 0.042 34) 45%, oklch(0.45 0.037 20) 70%, oklch(0.66 0.109 63) 100%);
}

A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.