Teyvat PaletteTeyvat colour cards
Scene library
GitHub
Gallery
SumeruNightMysteriousAliveFathomless

Rainforest Bioluminescence

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%0b1c2c40%00363a70%006552100%2eb184

Why it works

The standard recipe for anything that glows: an extremely dark ground plus a high-lightness, high-chroma light colour. The shadow is not black but a deep green carrying blue, and the fluorescence comes from the difference in lightness itself rather than from any effect.

01

Shadows have colour

The deepest point sits at L 0.22 and still carries C 0.04 of blue — pure black would kill the atmosphere. A dark interface's ground colour is the same proposition: always give the background some hue, even an amount the eye can barely read.

02

A difference in lightness *is* the glow

The fluorescent cyan stands 0.55 in lightness above the ground colour. No glow filter is needed; the contrast is already glowing. To make an element light up, check first whether its L differs enough from its surroundings.

03

Violet is green's antidote

Large areas of green stifle easily. The fungal violet (305°) acts as a triadic accent and manufactures the mystery, with its area likewise held under 5%. In a green-led design, the most useful second hue is often neither yellow nor blue but violet.

Take these colours with you

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

/* Rainforest Bioluminescence · Rainforest Bioluminescence — Teyvat Palette */
:root {
  --bioluminous-cyan: oklch(0.78 0.12 180); /* Fluorescent Cyan #4ad0ba */
  --moss-glow: oklch(0.62 0.11 165); /* Moss Glow Green #359b75 */
  --deep-canopy: oklch(0.36 0.06 170); /* Deep Forest Green #144738 */
  --midnight-blue: oklch(0.24 0.045 245); /* Night Curtain Blue #0a2133 */
  --mushroom-violet: oklch(0.55 0.1 305); /* Fungal Violet #7f62a0 */
  --gradient-sumeru-rainforest-night: linear-gradient(200deg, oklch(0.22 0.04 250) 0%, oklch(0.3 0.06 200) 40%, oklch(0.45 0.09 175) 70%, oklch(0.68 0.13 165) 100%);
}

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