璃月昼繁盛暖意山水

璃月港·晴昼

Liyue Harbor at Midday

色卡

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

重构渐变

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

0%c5f5fb28%9ec8e255%60aec478%479ebf100%0072a3

为什么和谐

让色的艺术:87% 的画面让给青蓝与灰,2.6% 的暖色就成了整座城——主角的存在感不是加饱和度加出来的,是底色让出来的。

主角只有 2.6%

全图暖色相(20°–110°)只占 2.6% 的像素,却是视线的全部落点——屋檐、金杏、幡旗挤在画面中带一条窄区里,四周是 48% 的青蓝加 39% 的灰。冷底越大,暖点越贵:想让一个颜色当主角,先问底色让了它多少,而不是它自己有多饱和。

连灰都被逼成了橙

实测三处屋顶,彩度只有 0.009–0.011——几乎是纯灰。它们看上去是暖橙,是大片青蓝底(均值 218°)借给它们的同时对比。做 UI 一样成立:冷蓝底上的中性灰按钮自带暖意,不必真的调橙。

三层冷也有远近

青蓝系自己分了三档:雾天 L 0.94、石林 L 0.81、港水 L 0.66,而彩度随明度下降从 0.05 升到 0.10——最深的地方最饱和,水才有了深度。冷色做底不等于一片平,把饱和度交给暗部,层次就出来了。

带走这组颜色

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

/* 璃月港·晴昼 · Liyue Harbor at Midday — Teyvat Palette */
:root {
  --sky-haze: oklch(0.939 0.05 205); /* 晴岚 #c5f5fb */
  --karst-white: oklch(0.812 0.057 235.3); /* 石林白 #9ec8e2 */
  --harbor-teal: oklch(0.66 0.096 226.1); /* 港湾青 #479ebf */
  --ginkgo-gold: oklch(0.78 0.073 86.8); /* 金杏 #ccb581 */
  --coral-red: oklch(0.62 0.071 12); /* 珊瑚朱 #ac747b */
  --gradient-liyue-harbor: linear-gradient(172deg, oklch(0.939 0.05 205) 0%, oklch(0.812 0.057 235) 28%, oklch(0.71 0.083 218) 55%, oklch(0.66 0.096 226) 78%, oklch(0.52 0.12 235) 100%);
}

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

色卡