璃月夜喧暖夜阑团圆

九略茶馆·灯夜

Jiulue Teahouse on Lantern Night

色卡

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

重构渐变

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

0%2e445f20%4d223740%fbd17e54%d7673868%78343c100%637480

为什么和谐

热闹是从中性色的账上花出来的:同一间九略茶馆,无彩像素从平日的 56.13% 掉到 25.82%,让出的 30 个百分点被暖色(5.71% → 27.74%)和夜蓝(28.81% → 40.91%)两头分光,画面反而比平日更暗(明度中位数 0.54 → 0.47)——想让一个场面变热闹,先数你有多少灰可花,而不是把底色调亮。

灰是这场节的预算

平日的九略茶馆有 56.13% 的像素彩度不足 0.025:白墙、青瓦、石庭;灯夜只剩 25.82%。这 30 个百分点没有一分留在原地——暖色带(345–90°)从 5.71% 涨到 27.74%,蓝带(210–270°)从 28.81% 涨到 40.91%,两端同时变宽,中间被抽空,彩度中位数因此从 0.021 翻到 0.045。要办一场节,先数清楚手上有多少块不说话的面:它们才是能花的钱。

更热闹,却更暗

明度中位数从 0.54 落到 0.47,p99 从 0.87 落到 0.81——这场节没有把任何东西提亮。变的是明度顶上装的东西:平日最亮的 4000 个像素是 L 0.90、彩度 0.016 的石板,灯夜最亮的一档仍在 L 0.88,彩度却是 0.112,来自两侧那几面彩绘灯屏(峰值 0.199,全图最高)。同一个明度顶,一个装白,一个装黄。热闹不是「更亮」,是把明度顶让给带颜色的东西。

灯照到哪儿,哪儿才是暖的

庭中那片铺地整体仍是 238° 的冷灰,可它有 14.7% 的像素落在 15–90° 之间、均值 41°:那是灯笼在石板上洒开的一摊摊光,不是把地整体调暖。没被灯照到的东西则跟着夜色走——左缘那株红枫平日实测 17°、彩度 0.134,今夜是 351°、彩度 0.072,朝品红转了 26°,明度掉了 0.20。想让界面「过节」,别去调暖底色:把中性面让出来,暖色只给光源和它照到的那一摊,底色继续往冷里推。

带走这组颜色

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

/* 九略茶馆·灯夜 · Jiulue Teahouse on Lantern Night — Teyvat Palette */
:root {
  --night-blue: oklch(0.38 0.054 255); /* 夜蓝 #2e445f */
  --court-at-night: oklch(0.55 0.027 238); /* 石庭夜青 #637480 */
  --banner-red: oklch(0.42 0.096 15); /* 幡红 #78343c */
  --lantern-amber: oklch(0.64 0.153 42); /* 灯笼橙 #d76738 */
  --lit-screen-gold: oklch(0.88 0.112 83); /* 灯屏黄 #fbd17e */
  --night-maple: oklch(0.32 0.072 351); /* 夜枫 #4d2237 */
  --gradient-lantern-rite-festival-5-3-jiulue-teahouse: linear-gradient(180deg, oklch(0.38 0.054 255) 0%, oklch(0.32 0.072 351) 20%, oklch(0.88 0.112 83) 40%, oklch(0.64 0.153 42) 54%, oklch(0.42 0.096 15) 68%, oklch(0.55 0.027 238) 100%);
}

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

色卡