璃月昼清润丰茂山居

春茗茶坊·翠昼

Chunming Teaworks in Verdant Daylight

色卡

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

重构渐变

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

0%376e6f18%4f6c7338%378e7e58%dfe4d476%608872100%62ad5f

为什么和谐

面积够不够定主色,是有倍数门槛的:这幅画 150°–180° 有 282,997 个像素,比 120°–150° 的 149,431 个多出 89%,可最艳的 4000 个像素里前者只有 353 个、后者 3,487 个——多出来的那八成面积一票也没换到。〈璃沙郊·金昼〉里 4.6 倍的面积压得住顶端体量,这里 1.89 倍压不住。审一套配色,面积领先不到两倍就别拿面积定主色。

面积在这幅画上判平手

全图 90°–165° 的绿有 314,656 个像素,165°–210° 的青有 314,576 个——相差 80 个,占比 35.74% 对 35.73%。那是一整面山的茶园草坡,对上一整面山的树冠与崖壁。第三个角色早早出局:茶坊自己的粉墙是那 17.14% 无彩的主体,最亮的 4000 个像素实测 L 0.91 / 彩度 0.021,而全图 330°–30° 只有 42 个像素——一座璃月的茶坊,连一点朱红都没有。主色只可能在绿和青之间产生,而数面积这条路在这里直接断了;换 30° 一格重数,众数还落在青那边。

多出八成,交不出色相

最艳的 4000 个像素里,120°–150° 占 3,487 个,150°–180° 只有 353 个——9.9 倍,方向和面积正好相反。这 3,487 个的落点均值在 (0.20, 0.50),画左那片顺着山势铺下来的茶园草坡:矩形 (0.02, 0.55) 起、宽 0.15 高 0.12 实测 L 0.68 / 彩度 0.134 / 143°,最艳的 3% 到 0.161。青那一族没有一块面能这样受光——近处那棵大树 (0.24, 0.20) L 0.59 / 0.087 / 179°,山那头的崖壁 (0.86, 0.20) L 0.50 / 0.058 / 198°。两族的天花板于是是 0.216 对 0.157。

面积得赢过一个倍数才算数

〈璃沙郊·金昼〉里蓝带 529,098 个像素对绿带 115,260 个,4.6 倍的面积压住了「最艳 4000 里绿 3,244 / 蓝 573」这个反号,主色仍旧判给蓝。这幅画把倍数降到 1.89,就压不住了。所以「哪一族最大」和「哪一族贴着天花板那一撮最厚」不但要分开报,还得看第一项领先多少:领先不到两倍,面积就只是背景的大小,不是主色的资格。做界面同理——想让一个颜色当主色,不必让它铺满最大的那块面,让它在受光处比邻居厚一档就够。

带走这组颜色

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

/* 春茗茶坊·翠昼 · Chunming Teaworks in Verdant Daylight — Teyvat Palette */
:root {
  --tea-terrace-green: oklch(0.68 0.134 143); /* 茶园绿 #62ad5f */
  --canopy-teal: oklch(0.59 0.087 179); /* 树冠青 #378e7e */
  --far-cliff-slate: oklch(0.5 0.058 198); /* 远崖苍 #376e6f */
  --stone-step: oklch(0.59 0.056 160); /* 石阶灰 #608872 */
  --roof-slate: oklch(0.51 0.036 216); /* 黛瓦 #4f6c73 */
  --plaster-white: oklch(0.91 0.021 119); /* 粉墙白 #dfe4d4 */
  --gradient-chunming-teaworks: linear-gradient(190deg, oklch(0.5 0.058 198) 0%, oklch(0.51 0.036 216) 18%, oklch(0.59 0.087 179) 38%, oklch(0.91 0.021 119) 58%, oklch(0.59 0.056 160) 76%, oklch(0.68 0.134 143) 100%);
}

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

色卡