Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
Salacia Plain Underwater
FontaineDayLimpidTeemingStill current

Salacia Plain Underwater

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

0%139dc734%2cb8b268%1e8f37100%4bc444

Why it works

The medium *is* the filter: underwater, achromatic pixels come to 0.01%, and three hue bands (green 36%, cyan 30%, blue 34%) all fit inside the 81° from 145° to 226° — every material has been passed through the same water, and the warmth that escaped amounts to a hundred-odd pixels, 0.012% of the frame.

01

Not one pixel is grey

Pixels below chroma 0.025 make up 0.01%, against a median of 0.131. An air scene always has grey in it — Dragonspine is 63% — and water has none, because the light was filtered before it ever reached a material. To paint a scene with a medium, decide the medium's colour first and the materials' second: do it the other way round and the material colours never dissolve into the environment.

02

Separation comes from lightness, not hue

Lit plants at L 0.73, shaded plants at L 0.57, hue barely moving (142° against 146°); mid-ground water at L 0.71, the upper water and distance at L 0.65. Every layer inside one blue-green is allotted by lightness — the same law as Enkanomiya's mist, except that one drops chroma to nothing while this one keeps a median of 0.131 and still lets lightness do all the work.

03

A hundred-odd pixels of orange, the one permitted exception

Count every warm pixel between 15° and 70° and there are 106 of them: 0.012% of the frame, averaging L 0.66, chroma 0.084, hue 44°. They are visible in all this green because the water failed to dye them — in a frame under one colour cast, the single exception has to be small enough not to unsettle the unity and warm enough not to be assimilated. To place a highlight inside a single tone: count its area in ten-thousandths, and move its hue towards the complement.

Take these colours with you

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

/* Salacia Plain Underwater · Salacia Plain Underwater — Teyvat Palette */
:root {
  --weed-green: oklch(0.727 0.2 142.3); /* Weed Green #4bc444 */
  --deep-weed: oklch(0.571 0.16 146.3); /* Deep Weed #1e8f37 */
  --water-teal: oklch(0.71 0.113 191); /* Water Teal #2cb8b2 */
  --far-blue: oklch(0.65 0.121 226); /* Far Blue #139dc7 */
  --fish-amber: oklch(0.66 0.084 44); /* Fish Amber #be8168 */
  --gradient-salacia-plain: linear-gradient(190deg, oklch(0.65 0.121 226) 0%, oklch(0.71 0.113 191) 34%, oklch(0.571 0.16 146.3) 68%, oklch(0.727 0.2 142.3) 100%);
}

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