FontaineDayElegantRationalLimpid

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

0%d7e8ee30%92cee760%5aa8d4100%2e5e9a

Why it works

The “prestige” formula: a monochromatic blue with a gold accent. The blue drifts slowly towards violet as lightness falls (220° → 255°), so what goes deeper reads as depth rather than as going black.

Hue follows lightness

From the zenith down to deep water, hue moves gently from 220° to 255°. Darkening a single hue in place muddies easily; give the hue a little drift on the dark end of a gradient and the depths gain a genuinely underwater sense of distance.

Gold and blue, complementary and restrained

Gilt gold (85°) is very nearly the complement of the blue, yet appears only along the architectural trim — small in area, and close to the lead colour in lightness. That is why it lands on prestigious rather than gaudy. If you want complements to look expensive, align their lightness first.

The mood is set by the lightness key

The frame's centre of lightness sits above 0.7 — a high-key scene. The rational, orderly feel of the court city is set by brightness before anything else; hue is only the footnote. Take the same hues down in value and the emotion changes completely.

Take these colours with you

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

/* Court of Fontaine at Noon · Court of Fontaine at Noon — Teyvat Palette */
:root {
  --cloud-white: oklch(0.94 0.015 220); /* Cloud White #e1eef2 */
  --azure-sky: oklch(0.82 0.07 225); /* Sky Cyan #92cee7 */
  --fountain-blue: oklch(0.68 0.11 235); /* Spring Water Blue #4aa3d2 */
  --gilded-brass: oklch(0.72 0.11 85); /* Gilt Gold #c49f4d */
  --deep-sea: oklch(0.45 0.1 255); /* Deep Sea Blue #2b568b */
  --gradient-fontaine-court-noon: linear-gradient(185deg, oklch(0.92 0.02 220) 0%, oklch(0.82 0.07 225) 30%, oklch(0.7 0.1 235) 60%, oklch(0.48 0.11 255) 100%);
}

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