Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Quahuacan Cliff under Cumulus
NatlanDayLoftyCrispBracing

Quahuacan Cliff under Cumulus

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%4a84e426%eefbff44%729ddc62%88935c100%845085

Why it works

The two ends of the palette live in the air, not on any object: the deep blue along the top edge measures L 0.62, chroma 0.158, and less than three-tenths of the frame's height below it the same sky arrives at the cloud core, L 0.98, chroma 0.015 — one sky owning both the lightness extreme and the chroma extreme. The five patches of red sandstone measured here run from L 0.42 to 0.54 and yet hold chroma between 0.064 and 0.102 throughout; none of them ever touches an end. Hand the extremes to the surface with no edges, and identity is what stays available to the things that have them.

01

One sky runs both channels to the end

Sampling a column down the left of the frame (x 0.05–0.25) in four steps from the top edge: L 0.68 / 0.72 / 0.77 / 0.87, chroma 0.136 / 0.115 / 0.093 / 0.055, hue 262° / 257° / 251° / 228°. The patch directly overhead is deeper still — 6% square from (0.66, 0.06) measures L 0.62, chroma 0.158 — and all 4000 of the frame's most chromatic pixels lie in that blue band, averaging 0.173. All three channels move monotonically together, and the terminus is the cumulus at frame centre: the brightest 4000 pixels fall at (0.52, 0.28) and (0.64, 0.25), averaging L 0.98 and chroma 0.015. These are not several colours; they are one surface. To get both your most saturated colour and your brightest one, don't build two swatches, build a gradient long enough to hold both.

02

Five rocks, 0.12 apart in lightness, chroma unmoved

The same red sandstone, ordered by lightness: the shaded canyon floor L 0.42 / 304° / 0.074, the cliff body below centre L 0.45 / 358° / 0.079, the mid right wall L 0.50 / 28° / 0.064, the sunlit clifftop upper right L 0.51 / 326° / 0.102, the cliff body lower right L 0.54 / 31° / 0.098. Lightness spreads over 0.12; chroma wanders between 0.064 and 0.102 with no correlation to it at all. The hot-air balloon on the left obeys the same logic: L 0.54, chroma 0.038 — pale not because it stands in shadow, but because canvas has no colour to begin with. Thalatta Submarine Canyon measured the dark end of the same law (the water gives up 0.122→0.087 with depth, the weed barely moves, 0.147→0.143). A medium's chroma is a readout of how far it is from the light; a material's chroma is its own identity.

03

The far mesas have changed citizenship to air

The distant ridges left of centre (7% square from 0.33, 0.24) measure 258°, chroma 0.105, L 0.69 — slightly more chromatic than the sky directly above them (L 0.77, chroma 0.093), because that is where the air is thickest and there is rock behind it. None of the five near rocks measured here reaches 0.105. So distance in this picture is not sandstone made pale; it is sandstone handed wholesale to the sky's gradient to take its value from. To paint depth, don't subtract chroma along the object's own hue — move it onto the hue of the air.

Take these colours with you

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

/* Quahuacan Cliff under Cumulus · Quahuacan Cliff under Cumulus — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.62 0.158 260); /* Zenith Blue #4a84e4 */
  --cloud-core: oklch(0.98 0.015 218); /* Cloud Core #eefbff */
  --far-mesa-blue: oklch(0.69 0.105 258); /* Far Mesa Blue #729ddc */
  --cliff-ochre: oklch(0.51 0.102 326); /* Cliff Ochre #845085 */
  --terrace-green: oklch(0.64 0.078 118); /* Terrace Green #88935c */
  --balloon-drab: oklch(0.54 0.038 320); /* Balloon Drab #79687d */
  --gradient-quahuacan-cliff: linear-gradient(180deg, oklch(0.62 0.158 260) 0%, oklch(0.98 0.015 218) 26%, oklch(0.69 0.105 258) 44%, oklch(0.64 0.078 118) 62%, oklch(0.51 0.102 326) 100%);
}

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