蒙德昼田园自由明快

蒙德城·风和

Mondstadt, Fair Winds

色卡

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

重构渐变

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

0%89aca230%84a5a355%68a57a80%208fae100%007f9f

为什么和谐

和璃月港同一条公式——大冷底让小暖点(青蓝 68% 对暖色 1.1%)——但气质完全是另一座城:身份不在公式里,在点缀色相那 40° 的差里。

公式复现

68.1% 的青蓝(均值 216°)加 25% 的灰打底,暖色只有 1.1%,比璃月港(2.6%)还要克制。「冷底让暖点」这条公式跨城复用——既然公式一样,两座城为什么长得完全不同?

身份藏在 40° 里

蒙德的暖点是红瓦,实测 47°;璃月的是金杏,87°。同一个位置上的点缀色相差 40°,一边读成欧式童话,一边读成水墨江南。做系列主题时系统可以整套共用,身份色改一步色相就换了地域。

越往天际线越素

风车帆 C 0.040、大教堂石 C 0.036——城的上半身几乎无彩,轮廓靠形状对天;颜色(红瓦、绿树、湖青)全部集中在下半身。界面同理:顶部导航素一点,把彩度留给内容区,层级自然立住。

带走这组颜色

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

/* 蒙德城·风和 · Mondstadt, Fair Winds — Teyvat Palette */
:root {
  --lake-teal: oklch(0.606 0.104 222.3); /* 湖青 #218faf */
  --rampart-grey: oklch(0.696 0.036 192.7); /* 石垣灰 #84a5a3 */
  --meadow-green: oklch(0.668 0.09 152.9); /* 草原绿 #68a57a */
  --red-tile: oklch(0.731 0.063 46.7); /* 红瓦 #ca9c87 */
  --windmill-white: oklch(0.715 0.04 175.7); /* 风车白 #89aca2 */
  --gradient-mondstadt-city: linear-gradient(172deg, oklch(0.715 0.04 176) 0%, oklch(0.696 0.036 193) 30%, oklch(0.668 0.09 153) 55%, oklch(0.606 0.104 222) 80%, oklch(0.55 0.11 222) 100%);
}

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

色卡