Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
稻妻夜肃杀戏剧电光

无想刃狭间·雷暴

Musoujin Gorge Storm

色卡

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

重构渐变

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

0%19112745%332a5872%724aab88%ca66c3100%efadd1

为什么和谐

在单一色相家族内做出戏剧性:紫到品红只移动了 50°,全部张力来自明度与饱和度的骤变——雷暴的『闪』,是 L 和 C 的暴力跳变,不是色相的冲突。

01

窄色域,高对比

整个画面的色相集中在 290°–350°,冲突感不靠色相靠明度(0.2 → 0.82)。情绪可以极强烈,画面依旧统一——想要『燥而不乱』,先把色域收窄。

02

品红是紫的高光

电光不是『更亮的紫』,而是向品红偏移的紫。真实光照会移动色相;给渐变的亮端加一点色相偏移,质感立刻从『调亮』变成『发光』。

03

90/10 面积律

80% 的画面压在 L < 0.35 的暗部,电光只占一线。克制成就冲击力——高潮元素的面积越小,它越响。

带走这组颜色

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

/* 无想刃狭间·雷暴 · Musoujin Gorge Storm — Teyvat Palette */
:root {
  --lightning-magenta: oklch(0.68 0.18 335); /* 电光品红 #d967c4 */
  --raiden-violet: oklch(0.52 0.16 300); /* 雷电紫 #794db6 */
  --sakura-pink: oklch(0.82 0.08 350); /* 绯樱粉 #edafcb */
  --ink-violet: oklch(0.32 0.07 292); /* 墨紫 #342b53 */
  --storm-night: oklch(0.2 0.04 300); /* 夜黑紫 #191125 */
  --gradient-inazuma-storm-night: linear-gradient(160deg, oklch(0.2 0.045 300) 0%, oklch(0.32 0.08 290) 45%, oklch(0.5 0.15 300) 72%, oklch(0.66 0.17 330) 88%, oklch(0.82 0.09 345) 100%);
}

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