Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
回声之子秘藏之所·火夜
纳塔夜火照赭暗窄口

回声之子秘藏之所·火夜

Children of Echoes Secret Space, Firelit Night

色卡

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

重构渐变

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

0%d8401d20%4c221c46%301b1876%271c1b100%535d78

为什么和谐

一块对立色相要给多大,取决于它领的什么活:回声之子这张里 200°–300° 的冷只有 3512 个像素、占 0.40%,几乎全在峡谷深处那扇门上,而门自己的彩度 0.026 压在 0.025 的灰阈值上,明度 0.46 也远不是全图最亮——它一条通道都不占优,只占一个别人没有的色相,却足够把眼睛领过去。〈清籁岛·雷眼〉那条要把 83.9% 的紫从深夜改读成黄昏的暖带占 2.3%,是这里的近六倍:改一幅画的性质按百分之几给,做一个路标按千分之几给。

01

火把彩度预算花光了

左上那盆火是全图的彩度天花板:最艳的 4000 个像素有 3410 个落在 (0.15, 0.25),均值 L 0.59 / 彩度 0.194,峰值 0.233。火下那根彩绘图腾柱 L 0.31 / 0.064,被火照到的左下岩台 L 0.25 / 0.034,没被照到的右侧峡壁 L 0.24 / 0.018——同一个色相(26° 到 34°)摊在四个彩度档上,整幅画就铺完了,而 345°–90° 的暖带一共占 44.06%。门的 0.026 排在这条阶梯最后一档,只有全图彩度中位数 0.025 的 1.04 倍。画里一旦有一个真正的光源,彩度这条通道就不再对别人开放。

02

0.40% 的冷,是全图唯一的对立事件

把 200°–300° 从整张图里挑出来,只有 3512 个像素,均值 L 0.48 / 彩度 0.046 / 色相 270°。它分两处:峡谷深处那扇一巴掌大的门,和图腾柱腰上那道窄窄的彩绘条——取 (0.23, 0.36) 起 9% 宽、2.5% 高的一条,落在 200°–280° 内的 206 个像素实测 L 0.33 / 彩度 0.080 / 色相 270°。彩绘那道比门本身还艳一倍,却因为贴在最亮的那根柱子上、被 44.06% 的暖围死,反而读作装饰;门那道被整片 L 0.24 的暗壁托着,读作出口。同样的色相、同样的面积级别,放在哪儿决定它是花纹还是入口。

03

剂量表:改时刻 2.3%,做路标 0.40%

〈清籁岛·雷眼〉那道 L 0.85 / 色相 42° 的暖带占 2.3%,它的任务是把一整片紫从「深夜」改读成「黄昏」——要改的是全画的性质,所以得够大,还得够亮。这里的任务只是「告诉你路在哪儿」,0.40% 就够,而且它连彩度和明度都不必占优。下次往画面里加对立色之前先问它要干什么:改性质的按百分之几给,做路标的按千分之几给。给多了,路标就变成第二个主角,而一幅画里只能有一个地方值得走过去。

带走这组颜色

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

/* 回声之子秘藏之所·火夜 · Children of Echoes Secret Space, Firelit Night — Teyvat Palette */
:root {
  --cold-canyon-ochre: oklch(0.24 0.018 26); /* 背火岩 #271c1b */
  --firelit-ledge: oklch(0.25 0.034 28); /* 火照岩 #301b18 */
  --totem-ochre: oklch(0.31 0.064 30); /* 图腾赭 #4c221c */
  --flame-orange: oklch(0.59 0.194 34); /* 焰橙 #d8401d */
  --moss-chartreuse: oklch(0.3 0.055 95); /* 苔黄绿 #362d07 */
  --gate-violet: oklch(0.48 0.046 270); /* 门紫 #535d78 */
  --gradient-tribal-secret-space-children-of-echoes-location-context: linear-gradient(150deg, oklch(0.59 0.194 34) 0%, oklch(0.31 0.064 30) 20%, oklch(0.25 0.034 28) 46%, oklch(0.24 0.018 26) 76%, oklch(0.48 0.046 270) 100%);
}

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