Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
塔拉塔海谷·垂光
枫丹昼蓊郁幽潜生息

塔拉塔海谷·垂光

Thalatta Submarine Canyon under Descending Light

色卡

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

重构渐变

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

0%cff5e818%42d3e746%207c8972%077382100%46913f

为什么和谐

介质变暗会连彩度一起交出去,材质变暗只交明度:从水面往海床走,水体明度 0.80 掉到 0.51、彩度跟着 0.122 掉到 0.087,而同一批水草彩度纹丝不动(0.147 → 0.143),只把明度从 0.74 交到 0.53——最深处水草与水的明度差只剩 0.02,彩度差却涨到 0.056。背景是介质的时候,对比不用你加,它自己会长。

01

水掉两样,草只掉一样

把画面横切成五条,只统计 165°–270° 的水体:明度 0.80 → 0.66 → 0.60 → 0.56 → 0.51,彩度 0.122 → 0.114 → 0.097 → 0.091 → 0.087,而色相钉死在 206°–212° 的 6° 里。同样五条只统计 90°–165° 的水草(顶上那条绿像素只有 11301 个,不到第二条的四分之一,从第二条起数):明度 0.74 → 0.69 → 0.59 → 0.53,彩度却是 0.147 → 0.144 → 0.140 → 0.143。光走得越深,水本身越接近「没有光」,而没有光就没有颜色;水草只是被照得少了而已。想让远处的背景退下去,别只把它调暗——把它的彩度按同一比例一起收走。

02

明度用完了,彩度自己接上

第二条里水草比水亮 0.08、艳 0.033;到最底下一条,亮只剩 0.02,艳却涨到 0.056。明度这根通道在往深处走的路上已经被「离水面多远」占满——旧日之海那一篇把这件事说完了,水里的明度就是深度计——分界只能改挂到彩度上,而彩度恰好是水在下沉时松手的那一根。全图最饱和的 4000 个像素(彩度 0.197、色相 134°)聚在 (0.82, 0.76),右下角那丛高株海带,正落在画面最暗的五分之一里;最亮的 4000 个反而在 (0.06, 0.03) 的光束根部,彩度只有 0.044。要在暗部做区分,别去提亮,去比谁还留着彩度。

03

岩壁不是石头的颜色,是水的颜色

中央那面把画面劈成两半的岩壁,实测 L 0.54、彩度 0.084、色相 209°——和它上方开阔水域的 208° 是同一个数,只是暗一档,彩度还比水更低:一块离得够远的固体会停止做材质、开始做介质,这也是全图彩度低于 0.025 的像素只有 0.01% 的原因。诺思托伊区站在同一片枫丹的水面之上,越远越亮、彩度从 0.106 降到 0.079;这里在水面之下,越深越暗、0.122 降到 0.087——两边彩度都在掉,幅度也接近,反过来的只有明度那一根。所以画纵深先问一句介质比物体亮还是暗:亮就往上走,暗就往下走,彩度那一根从来不问介质是谁。

带走这组颜色

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

/* 塔拉塔海谷·垂光 · Thalatta Submarine Canyon under Descending Light — Teyvat Palette */
:root {
  --shaft-white: oklch(0.94 0.044 172); /* 束光白 #cff5e8 */
  --upper-water: oklch(0.8 0.122 208); /* 上层水 #42d3e7 */
  --canyon-wall: oklch(0.54 0.084 209); /* 壁岩青 #207c89 */
  --deep-water: oklch(0.51 0.087 211); /* 深层水 #077382 */
  --weed-carpet: oklch(0.59 0.14 142); /* 藻毯绿 #46913f */
  --kelp-crown: oklch(0.74 0.197 134); /* 昆布梢黄 #73c429 */
  --gradient-thalatta-submarine-canyon: linear-gradient(165deg, oklch(0.94 0.044 172) 0%, oklch(0.8 0.122 208) 18%, oklch(0.54 0.084 209) 46%, oklch(0.51 0.087 211) 72%, oklch(0.59 0.14 142) 100%);
}

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