Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
鸣神岛·晴岚
稻妻昼澄澈疏朗浮岚

鸣神岛·晴岚

Narukami Island in Clear Haze

色卡

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

重构渐变

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

0%377db414%9591c532%e7f9fe56%4a708f78%50c2a4100%57a69a

为什么和谐

「暖」不必是色轮上的名次,也可以只是彩度差:整幅画在 330°–45° 上一个够格的像素都没有,而埃尔顿海沟里读作金子的三样东西好歹还占着离暖端最近的 145°,这里读作砂岩的崖壁却是 244°,和头顶的天(245°)同色相、明度只差 0.04——分开它们的只剩彩度,0.065 对 0.110。在一片够纯的冷场里,连「最靠近暖端」都不必占:把一块面的彩度砍掉四成,眼睛就会替你把它读成暖的。

01

砂岩是 244° 的蓝

崖面取三处、只统计蓝带像素以避开樱冠:L 0.53 / 彩度 0.065 / 244°,L 0.53 / 0.055 / 240°,连日光从左上越过左峰之后受光最足的中景那面,也只是 L 0.61 / 0.046 / 234°;头顶的天是 L 0.57 / 0.110 / 245°。同一个色相、明度只差 0.04,彩度是天的六成——把这两座峰单独裁出来看是石板青,放回画里就是被晒热的砂岩。诺思托伊区那篇在雾里记过一次同样的错觉(看着像红瓦的一片实测 L 0.78 / 0.086 / 237°),但那里差的是明度,这里明度几乎不差,分家全靠彩度。想画一块暖色的岩,不必蘸暖色:先从场里减掉它四成彩度。

02

真的暖色你没看见

对全图做 330°–45° 的暖色搜索,达到灰阈值的像素一个都没有;15°–90° 全部加起来 270 个,其中 115 个挤在左下台地那间木屋上,均值 L 0.71 / 彩度 0.035 / 80°——全画唯一真正蘸了暖色的地方,是一栋只有巴掌大的房子。塞洛海原那篇的暖色同样只有一百来个像素(106 个),却是全画唯一被看见的亮点,差别在艳度:那里彩度 0.084、色相 44°,这里 0.035、80°,弱到被身下的草吃掉。于是「暖」在这幅画里和暖色彻底脱了钩:真暖色不够艳等于不存在,而不含暖色的暖,只要面积够大、彩度够低,反而站得住。

03

先让天成为最艳的一块

这一招的前提是场既纯又艳:蓝带 78.44% 加青带 11.75%,九成像素挤在 165°–270° 这 105° 里;而最饱和的 4000 个像素有 3511 个落在 240°–270°、位置在 (0.42, 0.13)——全画最艳的东西是天,不是任何主体。眼睛拿画面里最强的那片色当基准,凡是彩度低于基准的面都被推向它的对面,崖壁于是「暖」了起来。冷场有多厚,决定候选可以离暖端多远:埃尔顿海沟的蓝底占 54.58%(数字引自该篇),已经足够把 145° 的黄绿捧成金子,但那三样东西毕竟还站在离暖端最近的位子上;这里的冷场厚到九十个百分点出头,连 244° 这种和天同族的色相都能被推过去。想复制,先确认你的底色是画面里最饱和的一块;底色不够艳,减彩度只会得到灰。

带走这组颜色

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

/* 鸣神岛·晴岚 · Narukami Island in Clear Haze — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.57 0.11 245); /* 天顶蓝 #377db4 */
  --sandstone-blue: oklch(0.53 0.065 244); /* 砂岩青 #4a708f */
  --cumulus-white: oklch(0.97 0.02 219); /* 积云白 #e7f9fe */
  --young-grass: oklch(0.67 0.08 183); /* 新草绿 #57a69a */
  --pine-teal: oklch(0.74 0.113 173); /* 松青 #50c2a4 */
  --sakura-violet: oklch(0.68 0.076 288); /* 樱紫 #9591c5 */
  --gradient-narukami-island: linear-gradient(180deg, oklch(0.57 0.11 245) 0%, oklch(0.68 0.076 288) 14%, oklch(0.97 0.02 219) 32%, oklch(0.53 0.065 244) 56%, oklch(0.74 0.113 173) 78%, oklch(0.67 0.08 183) 100%);
}

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