须弥昼敞亮熙攘通透

宝商街·漏晴

Treasures Street under a Seam of Sky

色卡

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

重构渐变

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

0%d1eef48%428dc528%508c3e42%37563860%714b36100%366174

为什么和谐

上下靠色相分开,前提是两端的彩度先对齐:同一对矩形量宝商街的上下缘,彩度是 0.052 对 0.060——差 0.008,而色相 159° 对 233°,隔了 74°。放到全图更干净:90°–165° 的绿共 113,979 个像素、均值彩度 0.062;而 190°–280° 的青蓝共 238,308 个、均值 0.064——两大色族的彩度只差 0.002,色相差 85°。彩度一旦不等,色相差就会被读成「一个亮一个暗」;对齐了,它才读作两个来源的光——右上角那道天缝,和它在脚下石板上的转手。

两大色族,只差色相

全图 90°–165° 的绿共 113,979 个像素,均值 L 0.42 / 彩度 0.062 / 色相 145°;190°–280° 的青蓝共 238,308 个,L 0.50 / 彩度 0.064 / 色相 230°。两族相隔 85°,彩度只差 0.002,明度差 0.08。这就是这张画敢把上下交给色相的原因:两端在另外两根轴上几乎重合,那 85° 才不会被误读成明暗。做多色相配色同理——先把要对话的两族彩度调到同一档,再拉开色相;顺序反过来,你以为在换色相,观众读到的是换亮度。

天只剩一条缝,账照样发到脚下

天在这张画里只是右上角一道被树冠和瓦檐夹出来的缝:那块占画宽 16%、画高 8% 的矩形实测 L 0.62 / 彩度 0.113 / 色相 244°;而脚下那条石板路 L 0.47 / 彩度 0.057 / 色相 229°——彩度掉到 0.50 倍,色相只挪了 15°,路面那块矩形 49,536 个像素里有 45,575 个(92.0%)落在 190°–280° 里。〈万端珊瑚侦探社·荫昼〉的判据在须弥照样成立:判断一片蓝是天还是影,量彩度,转手一次掉到一半以下而色相几乎不动。所以这条路不是灰路,是被天染过的路——它有色相立场,才配和绿瓦对话。

最亮的和最艳的分了家

最亮的 4000 个像素里 3,812 个挤在右上那两格(L 0.93 / 彩度 0.030 与 0.034),是天缝里的云;最艳的 4000 个里 2,514 个是 120°–150° 的绿瓦(L 0.58 / 彩度 0.128),全图彩度最大值 0.179 也在绿带里,而蓝带的最大值只有 0.158。明度天花板归天、彩度天花板归瓦,谁也没有同时占满两根轴——这正是那 85° 能被读成对话而不是压制的条件。至于街本身的颜色:全图 330°–90° 的暖色只有 17,001 个像素(1.93%),均值 L 0.45 / 彩度 0.061 / 色相 50°,橙袍、黄花和摊幡加起来不到画面的五十分之一。想在一场色相对话里放点缀,让它站在第三个色相上、面积压到 2% 以内,它就不会把对话打断。

带走这组颜色

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

/* 宝商街·漏晴 · Treasures Street under a Seam of Sky — Teyvat Palette */
:root {
  --eaves-cloud-white: oklch(0.93 0.032 211); /* 檐上云白 #d1eef4 */
  --seam-sky-blue: oklch(0.62 0.113 244); /* 隙间天蓝 #428dc5 */
  --eave-edge-jade: oklch(0.58 0.128 139); /* 檐口翠 #508c3e */
  --leaf-tile-green: oklch(0.42 0.062 145); /* 叶瓦绿 #375638 */
  --market-warm: oklch(0.45 0.061 50); /* 市集暖点 #714b36 */
  --skylit-roadstone: oklch(0.47 0.057 229); /* 天光路石 #366174 */
  --gradient-treasures-street: linear-gradient(200deg, oklch(0.93 0.032 211) 0%, oklch(0.62 0.113 244) 8%, oklch(0.58 0.128 139) 28%, oklch(0.42 0.062 145) 42%, oklch(0.45 0.061 50) 60%, oklch(0.47 0.057 229) 100%);
}

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

色卡