
Click a swatch to copy its HEX; hover for the OKLCH value.
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.
Shallow water has no hue of its own. It is a slider strung between the seabed and the sky, and depth decides where the slider stops: the same jade water reads 164° at the shore, 200° out in the bay, 227° in the furthest channel — and the sky is 237°. Across that whole 63° journey, chroma only wanders between 0.050 and 0.099. Do not pick a single "water blue"; fix the two ends first, then take a value between them according to depth.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Bishui Plain, Sunlit Shallows · Bishui Plain, Sunlit Shallows — Teyvat Palette */
:root {
--sky-blue: oklch(0.81 0.072 237); /* Sky Blue #95c9ea */
--haze-pale: oklch(0.93 0.059 208); /* Haze Pale #baf4fd */
--grey-cliff: oklch(0.66 0.082 232); /* Grey Cliff #5b9bbc */
--bay-blue: oklch(0.75 0.097 200); /* Bay Blue #57c1c6 */
--shore-shallow: oklch(0.85 0.05 164); /* Shore Shallow #b1d9c5 */
--plain-green: oklch(0.76 0.112 139); /* Plain Green #8cc27d */
--ginkgo-crown: oklch(0.92 0.17 106); /* Ginkgo Crown #f4eb4f */
--gradient-bishui-plain: linear-gradient(180deg, oklch(0.81 0.072 237) 0%, oklch(0.93 0.059 208) 12%, oklch(0.66 0.082 232) 28%, oklch(0.85 0.05 164) 50%, oklch(0.76 0.112 139) 72%, oklch(0.92 0.17 106) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.