Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
坠星山谷·晴远
蒙德昼开阔清朗远意

坠星山谷·晴远

Starfell Valley in Clear Air

色卡

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

重构渐变

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

0%56acdb30%93b9d952%dcef5668%93b384100%358050

为什么和谐

〈蒙德城·风和〉说这座城的身份藏在红瓦那 47° 里;从坠星山谷望过去,同一批屋顶实测 243°,整片城区在暖色窗口里只剩十几个噪点——身份色被空气全额没收,那座城还是蒙德。色名是轮廓说出来的,不是色相说出来的。

01

红瓦是蓝的

远处那排屋顶夹在风车与大教堂之间,实测 L 0.77、C 0.061、h 243°——比头顶的天空(235°)还要蓝 8 度。把整个城区丢进 315–90° 的暖色窗口里筛,五万个像素只剩 13 个,均值 317°;放大到全画,红色带里最饱和的那一撮也只有彩度 0.058。〈蒙德城·风和〉里那 47° 的红瓦在这里一片不剩,而没人会认错这是哪座城——十字风车帆和教堂尖顶已经把话说完了。远景不必替观众保管固有色:把色相整个交给空气,留下轮廓就够。

02

金色的树是绿的

谷底那一圈黄叶树绕着中央小湖排开,最亮的 3% 实测 h 116°、L 0.91、C 0.174,牢牢待在绿带里;全画色相低于 90° 的像素只有 0.16%,均值 85°,而它们正是这些树的叶尖。它之所以读作金,是因为脚下的前景树冠是 L 0.54、C 0.106——同一个绿家族之内,明度抬了 0.37、彩度抬了六成,眼睛就替它换了个色名。想要一块「新颜色」,先把明度和彩度推到家族的极值,再考虑动色相。

03

这幅画里没有灰

左右两侧的崖壁看着是灰的,实测 241° 与 228°、彩度 0.066 和 0.068,只有天空(235°、彩度 0.108)的六成——是被稀释的天,不是中性色;全图真正无彩(C<0.025)的像素只有 4.70%。三处被叫错的颜色其实是同一件事:红瓦、金树、灰岩,没有一个保住自己的固有色,46% 的蓝带和 38% 的绿带把它们全部收编了。配场景色板时先定这一天的两个色相带,再问每个物体离它多远——不要先给每个物体它「应该」的颜色。

带走这组颜色

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

/* 坠星山谷·晴远 · Starfell Valley in Clear Air — Teyvat Palette */
:root {
  --clear-sky: oklch(0.71 0.108 235); /* 晴空蓝 #56acdb */
  --hazed-town: oklch(0.77 0.061 243); /* 霭城蓝 #93b9d9 */
  --cliff-shadow: oklch(0.54 0.066 241); /* 岩影蓝 #4a7492 */
  --false-gold: oklch(0.91 0.174 116); /* 叶梢金 #dcef56 */
  --meadow-green: oklch(0.73 0.075 136); /* 坡草绿 #93b384 */
  --canopy-green: oklch(0.54 0.106 153); /* 林荫绿 #358050 */
  --gradient-starfell-valley: linear-gradient(180deg, oklch(0.71 0.108 235) 0%, oklch(0.77 0.061 243) 30%, oklch(0.91 0.174 116) 52%, oklch(0.73 0.075 136) 68%, oklch(0.54 0.106 153) 100%);
}

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