纳塔幽闭炬影深径

沃陆之邦秘藏之所·幽炬

Collective of Plenty Secret Space, Torchlit Dark

色卡

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

重构渐变

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

0%281f1e18%322f1338%46271e56%5c698370%322a1f100%c05722

为什么和谐

终点是路指出来的,不是光指出来的:阶梯尽头那扇门实测 L 0.52 / 彩度 0.045 / 色相 264°,而全图最艳的 4000 个像素一个不剩全在两支火把上(彩度 0.149 与 0.154);通向门的最后一级台阶彩度 0.022,跌破了 0.025 的无彩线,是整条路上最灰的一块。要指定一个焦点,不必让它在任何一条通道上领先——把一条会聚的路铺到它脚下,再把路的最后一段压到全画最低。

最艳的四千个像素,一个都不在门上

两支火把左右夹住阶梯,实测几乎是同一件东西的两份拷贝:左边 L 0.58 / 彩度 0.149 / 色相 44°,右边 L 0.58 / 0.154 / 45°。全图最艳的 4000 个像素全部落在它们身上,重心在 (0.50, 0.82) 到 (0.53, 0.81) 之间。〈衡准大厅·焰照〉量过同样的一对——左火盆 906 像素、右火盆 865 像素,明度都是 0.84,彩度 0.118 对 0.122——结论是两个一模一样的光互相注销「最亮」这个身份,焦点让给中轴那 0.50% 的青,赢的是色相独占。这幅画里注销照样发生,可接手的不是任何一个色相:270°–315° 的紫带占了全图 3.95%、均值彩度 0.067,高过门核心的 0.045,而门核心矩形里落在 260°–300° 的只有 10049 个像素——门既没独占那个色相,也不是那一族里最艳的一块。接手的是台阶的尽头。

路的最后一级,是全画最灰的一块

从画框下缘往门走,台阶四级实测 L 0.38 / 0.38 / 0.33 / 0.29,彩度 0.075 / 0.075 / 0.051 / 0.022——门槛前那一级已经落到 0.025 的无彩线以下,而全图彩度中位数正是 0.023。最亮的 4000 个像素只落在两处:门那几格 2586 个,两支火把 1414 个,中间这段台阶一个都没有。终点不是被照亮的,是被够不着照亮的:光在近端,路在中段暗下去,门在远端自己亮着。想让一样东西读作「尽头」,先把它前面那一段抽干——不是把它加强,是把它的邻居减弱。

第六条通道不在颜色里

这扇门在纳塔六族的秘藏之所里是同一件资产,绝对色几乎不动:〈悬木人秘藏之所·夜绿〉量到 L 0.48 / 彩度 0.054 / 257°,是那幅画彩度中位数 0.023 的 2.3 倍;〈烟谜主秘藏之所·霞照〉量到 L 0.57 / 0.070 / 295°,彩度和它自己的中位数一模一样,靠色相被看见。这一张 L 0.52 / 0.045 / 264°,对中位数 0.023 不到两倍,夹在两者中间——在「门凭什么被看见」那条彩度的尺上,它确实不占新位置。可它被看见得比哪一张都省力,而右上角那片罩住整面崖壁的部族涂鸦(实测 L 0.30 / 彩度 0.044 / 色相 103°,几乎和门一样艳、面积大得多)谁也不看:它不在路上。做界面同理——一个要在多种主题下复用的组件,别指望靠自己的颜色被找到;给它一条指向它的动线,并把动线的最后一段做成对比最低的一段。

带走这组颜色

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

/* 沃陆之邦秘藏之所·幽炬 · Collective of Plenty Secret Space, Torchlit Dark — Teyvat Palette */
:root {
  --vault-dark: oklch(0.25 0.014 27); /* 洞顶暗 #281f1e */
  --cliff-ochre: oklch(0.31 0.05 36); /* 崖赭 #46271e */
  --tribal-green: oklch(0.3 0.044 103); /* 部族绿 #322f13 */
  --torch-flame: oklch(0.58 0.149 44); /* 炬焰橙 #c05722 */
  --gate-blue: oklch(0.52 0.045 264); /* 门芯蓝 #5c6983 */
  --threshold-grey: oklch(0.29 0.022 71); /* 门槛灰 #322a1f */
  --gradient-tribal-secret-space-collective-of-plenty-location-context: linear-gradient(180deg, oklch(0.25 0.014 27) 0%, oklch(0.3 0.044 103) 18%, oklch(0.31 0.05 36) 38%, oklch(0.52 0.045 264) 56%, oklch(0.29 0.022 71) 70%, oklch(0.58 0.149 44) 100%);
}

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

色卡