须弥夜神秘生机幽邃

雨林·夜光

Rainforest Bioluminescence

色卡

点击色块复制 HEX;悬停查看 OKLCH 值。

重构渐变

从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 200°(hero 与导出使用),画廊卡片统一以 135° 斜向展示。

0%0b1c2c40%00363a70%006552100%2eb184

为什么和谐

发光体配色的范式:极暗的底 + 高明度高饱和的光源色。暗部不是黑,而是带蓝的深绿;荧光感不靠特效,靠明度差本身。

暗部有颜色

最深处 L 只有 0.22,却仍带着 c 0.04 的蓝——纯黑会杀死氛围。深色 UI 的底色是同一件事:永远给背景一点色相,哪怕肉眼几乎读不出来。

明度差即发光感

荧光青与底色的明度差达 0.55。不需要 glow 滤镜,对比本身就在发光。想让一个元素『亮起来』,先检查它和周围的 L 差够不够大。

紫是绿的解药

大面积绿容易闷,蕈紫(305°)作为三分色点缀制造神秘感,面积同样压在 5% 以下。绿色系设计里最好用的第二色相,往往不是黄和蓝,而是紫。

带走这组颜色

CSS 变量、Tailwind v4 主题或 SVG,一键复制到你的项目。

/* 雨林·夜光 · Rainforest Bioluminescence — Teyvat Palette */
:root {
  --bioluminous-cyan: oklch(0.78 0.12 180); /* 荧光青 #4ad0ba */
  --moss-glow: oklch(0.62 0.11 165); /* 苔光绿 #359b75 */
  --deep-canopy: oklch(0.36 0.06 170); /* 深林绿 #144738 */
  --midnight-blue: oklch(0.24 0.045 245); /* 夜幕蓝 #0a2133 */
  --mushroom-violet: oklch(0.55 0.1 305); /* 蕈紫 #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%);
}

1080×1350 的 PNG,原图、色卡与色值都在里面——存下来直接发。