稻妻昼明丽花气市井

乌有亭·樱晴

Uyuu Restaurant in Sakura Sunlight

色卡

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

重构渐变

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

0%296fae22%b789d044%7e464262%343e4c76%162945100%867f93

为什么和谐

面积第一的那块颜色只管你看不见太阳的地方:蓝带占去 51.54%,几乎整片是天,实测彩度 0.120、色相 249°,可它只染到背光的一侧——店面木墙 259°、门口暖帘 258°,都紧挨着天;而被太阳照到的那片石板地是 301°–320°,离天五十度,离那棵樱(313°)不到十二度,彩度还随着靠近樱从 0.018 一路涨到 0.039。天光管阴影,反射光管受光面,两套账不换手。

最大的一块不是最艳的一块

全图最艳的 4000 个像素里,3138 个落在右侧那棵樱的树冠上(L 0.55、彩度 0.157、色相 308°),天只分到 216 个。可按面积算蓝带是 51.54%,樱冠那两条色带(紫 10.10% + 粉 6.12%)加起来才 16.22%,不到天的三分之一。两块面的均值彩度其实只差 0.007(0.120 对 0.113)——面积没能把浓度带上来。正因为面积第一和浓度第一在这张画里分了家,下面那件事才看得见。

地面倒向樱,不倒向天

同一片石板地量三处:左端离樱最远,L 0.68、彩度 0.018、色相 305°;中央 L 0.61、彩度 0.031、301°;樱树正下方 L 0.62、彩度 0.039、320°。色相全程锁在品红一侧,彩度沿着离樱的距离翻了一倍多。头顶那半幅天一度也没能把它拉过去,因为地面是被太阳直照的——直射光本身无色,它照到的面只等着最近那块亮东西给它上色。反射光的强度是距离的函数,天光不是。

背光的一侧全归天

店面那面深色木墙 L 0.36、彩度 0.028、色相 259°,门口那幅蓝暖帘 L 0.28、彩度 0.058、258°,天 249°——三者收在 10° 之内,而它们和石板地差着 42° 到 61°。同一幅画里两个色源各管一半。做场景配色时别急着定一个统一的环境色:先分出哪些面看得见天、哪些面只看得见太阳,再分别派色相——一张画可以有两个环境色,而且它们应该差得很开。

带走这组颜色

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

/* 乌有亭·樱晴 · Uyuu Restaurant in Sakura Sunlight — Teyvat Palette */
:root {
  --clear-sky: oklch(0.53 0.12 249); /* 晴天蓝 #296fae */
  --sakura-cloud: oklch(0.7 0.113 313); /* 樱云紫 #b789d0 */
  --petal-stone: oklch(0.61 0.031 301); /* 落瓣石 #867f93 */
  --eave-shadow: oklch(0.36 0.028 259); /* 檐影蓝 #343e4c */
  --indigo-noren: oklch(0.28 0.058 258); /* 藏青暖帘 #162945 */
  --lacquer-red: oklch(0.46 0.078 25); /* 漆盘朱 #7e4642 */
  --gradient-uyuu-restaurant: linear-gradient(180deg, oklch(0.53 0.12 249) 0%, oklch(0.7 0.113 313) 22%, oklch(0.46 0.078 25) 44%, oklch(0.36 0.028 259) 62%, oklch(0.28 0.058 258) 76%, oklch(0.61 0.031 301) 100%);
}

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

色卡