LiyueDayWhite and OpenHard SunOrderly

Sword and Strongbox Secure Transport Agency, Sun-Bleached

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

0%c1c7b914%f9856c28%8bbe4248%96493a72%607b74100%68828f

Why it works

"In the sun or not" need not be written on the lightness axis at all: on one and the same wall, the sunlit stretch measures L 0.62 / chroma 0.014 / 130° and the shaded stretch L 0.59 / 0.036 / 231° — 0.03 apart in lightness, 2.6× apart in chroma, 101° apart in hue. All 62.42% of this picture's achromatic pixels are surfaces the sun is on: white light bleaches whatever it touches, and the shadow is the only light source here that emits a colour. To give a large pale material depth without dirtying it, do not paint the shadow with light and dark — bleach the lit side and dye the shaded side blue, and keep the lightness axis for composition.

The brightest surfaces have no colour at all

The sunlit paving at the centre of the square measures, over 17,630 pixels, L 0.82 / chroma 0.020 / 125°, and peaks at only 0.030. The lit stretch of white wall left of the gatehouse reads L 0.62 / chroma 0.014, the least chromatic surface in the frame. The tiled roof at lower right goes further still: L 0.57 / chroma 0.003. The 4000 brightest pixels scatter across six or seven cells and their chroma all falls between 0.015 and 0.024. This picture's 62.42% achromatic share is not a grey somebody mixed — it is what the sun left behind after it burned the stone white.

Everything with colour is in the shade

The 210°–270° range across the frame holds 209,221 pixels (22.7%), averaging L 0.48 / chroma 0.037 / 233°: the tall shaded wall on the left at (0.03, 0.30) reads L 0.59 / 0.036 / 231°, and the paving under the cast shadow reads L 0.56 / 0.033 / 177° at (0.28, 0.74) and L 0.53 / 0.030 / 185° at (0.62, 0.30). Same stone: 0.020 in the sun, 0.030 to 0.037 in shadow. 〈Schulz's Blacksmith by Forge Light〉 measured the reverse of this — that paving reads 194° in the sun and 190° under the shed, Δh of just 4° and ΔC under 0.005, because that picture had a forge fire to say "this part is different" for it. This one has nothing of the kind, so "out of the sun" has to find a channel of its own, and the channel it finds is chroma and hue, not lightness.

Four vermilions, and the sunlit one is twice as strong

The warm colour in this picture totals 14,179 pixels (1.54%), split across four places: the two vermilion banners standing before the gatehouse, the small triangular pennants hanging under the right-hand eaves, and the spatter of vermilion on the roof wall at upper left. Their hues are nearly identical (33° / 33° / 30° / 33°), yet the chroma splits into two tiers by whether the sun reaches them — three sit in shade, with most-chromatic-3% values of 0.107 / 0.101 / 0.088, while the spatter sits in full sun and measures L 0.74 / chroma 0.147 the same way, peaking at 0.175. The frame's ceiling of 0.184 works the same way, and it belongs neither to the vermilion nor to the stone but to that single tree clearing the roof ridge at upper right: its most chromatic 3% reads L 0.74 / chroma 0.162 / 129° — 8.07% of green holding up a picture that is 62.42% grey.

Take these colours with you

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

/* Sword and Strongbox Secure Transport Agency, Sun-Bleached · Sword and Strongbox Secure Transport Agency, Sun-Bleached — Teyvat Palette */
:root {
  --sunbleached-flagstone: oklch(0.82 0.02 125); /* Sun-Bleached Flagstone #c1c7b9 */
  --shadowed-flagstone: oklch(0.56 0.033 177); /* Flagstone in Shadow #607b74 */
  --shaded-wall: oklch(0.59 0.036 231); /* Shaded Wall #68828f */
  --banner-vermilion: oklch(0.5 0.107 33); /* Banner Vermilion #96493a */
  --sunlit-splash: oklch(0.74 0.147 33); /* Sunlit Splash #f9856c */
  --rooftop-tree: oklch(0.74 0.162 129); /* Tree over the Ridge #8bbe42 */
  --gradient-sword-and-strongbox-secure-transport-agency-point-of-interest: linear-gradient(200deg, oklch(0.82 0.02 125) 0%, oklch(0.74 0.147 33) 14%, oklch(0.74 0.162 129) 28%, oklch(0.5 0.107 33) 48%, oklch(0.56 0.033 177) 72%, oklch(0.59 0.036 231) 100%);
}

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