Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
诺思托伊区·雾昼
枫丹昼空濛澹远水国

诺思托伊区·雾昼

Nostoi Region in Hazy Daylight

色卡

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

重构渐变

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

0%82c4ff46%9edeff66%69a6e7100%58b0dc

为什么和谐

纵深可以只用两个梯度做出来:越远越亮、越远越淡。整幅画 99.3% 的像素是同一族蓝、明度只在 0.68–0.89 这 21 个百分点里活动,而近水彩度 0.106 到远山 0.079、明度 0.72 到 0.87——一个暖色像素都没有,空间照样成立。

01

两个梯度,方向相反

前景湖面 L 0.72 / 彩度 0.106;中景崖壁 0.71 / 0.115;最远的山 0.87 / 0.079。往远处走明度升 0.15、彩度降 0.027,两条曲线一升一降,交点就是「远」。这是空气透视被拆开之后剩下的最小配方,也解释了为什么把远景单纯调淡(只降彩度)会显得像蒙了一层灰:那样只做了一半,亮度没跟上。

02

整幅画没有一个暖色像素

对全图做 330°–90° 的暖色搜索,达到灰阈值的像素**一个都没有**;蓝带 99.26%,无彩像素仅 0.10%。中间那座岛上看着像红瓦屋顶的一片,实测 L 0.78、彩度 0.086、色相 237°——它和湖水同族,只是暗一点。一幅画不需要暖色来「透气」;真正需要的是明度上还留着余量:最亮处 0.93 是那道瀑布,彩度掉到 0.041,负责给画面一个呼吸口。

03

同样 99% 的蓝,可以是两种画

旧日之海那一篇也是 99% 的蓝,彩度中位数 0.153;这里是 0.097,明度窗口只有 0.21 宽。两幅都不吵,但走的是相反的路:一幅把彩度推到高位而不给明度反差,一幅把明度压进窄窗而让彩度做梯度。单色相不是一种风格,是一间有很多房间的屋子——你选住哪间,画面的性格就由那间房决定。

带走这组颜色

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

/* 诺思托伊区·雾昼 · Nostoi Region in Hazy Daylight — Teyvat Palette */
:root {
  --near-water: oklch(0.72 0.106 233); /* 近水蓝 #58b0dc */
  --cliff-blue: oklch(0.71 0.115 251); /* 崖影蓝 #69a6e7 */
  --air-blue: oklch(0.8 0.109 247); /* 空气蓝 #82c4ff */
  --far-ridge-pale: oklch(0.87 0.079 231); /* 远岭淡 #9edeff */
  --falls-white: oklch(0.93 0.041 220); /* 瀑帘白 #cbeffb */
  --gradient-nostoi-region: linear-gradient(180deg, oklch(0.8 0.109 247) 0%, oklch(0.87 0.079 231) 46%, oklch(0.71 0.115 251) 66%, oklch(0.72 0.106 233) 100%);
}

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