须弥昼荫翳闲适葱茏

迪亚法饭店·筛光

Djafar Tavern in Sifted Light

色卡

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

重构渐变

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

0%0e483912%63ab4230%28654d48%e27e2164%2d3c3080%a6a077100%2f5661

为什么和谐

阴影的色相是头顶那件东西的签名:同一片露台石地,巨树冠底下量到 L 0.34 / 彩度 0.029 / 色相 150°,而穿过树隙那道光落下来的地方是 L 0.70 / 彩度 0.057 / 101°——受光那一处报的是太阳,49° 之外那一片报的是树叶。证据在同一张画的下缘:檐外那道石阶明度只比露台高 0.06,色相却是 217°,离画面上四分之一那块天的 239° 只差 22°。同一批四张须弥城店面的受光铺地色相全在 100°–115° 之间,谁照都一样;要让一个空间一眼就是这个地方,能改的只有它头顶挂着什么。

两块石头,两个头顶

树冠底下那片露台 6,480 个像素 L 0.34 / 彩度 0.029 / 色相 150°;檐外那道石阶 20,304 个像素 L 0.40 / 彩度 0.044 / 217°。明度只差 0.06,色相差 67°。露台压在巨树的冠(实测 172°)和那几片绿釉瓦壳顶(164°)底下,石阶抬头看得见树隙里那块 239° 的天。同一张画、同一种石头、同一轮太阳,分开它们的既不是明暗也不是材质,是各自看得见谁。画檐下和露天的地面,别共用一个阴影色——按每块面头顶是什么分配色相。

光只落进来一道

全图明度中位数 0.42,而穿过树隙落在露台正中的那道光斑 L 0.70 / 彩度 0.057 / 101°,它左右两侧的同一片石地是 L 0.33 和 L 0.37。这也是这张画只有 7.45% 无彩、却有 63.88% 绿的原因:除了那一道,没有一块面接得到未经树叶滤过的光,连石头都得报绿。想让一个场景闷得有理由,别去压明度中位数,去掐掉直射光的入口——剩下的颜色会自己收敛到滤光片那一族。

伞是招牌,不是光

那一排珊瑚色遮阳伞是这家饭店最认得出的东西,可它在光的账上不出现:罩住整排伞的 0°–50° 窗口只有 3,848 个像素、彩度 0.077、峰值 0.110,而全图天花板 0.194 归右上角那一撮唯一被直射日光打到的树叶(L 0.67 / 彩度 0.157 / 137°)。全图 330°–60° 一共 12,924 个像素(1.47%),峰值 0.165 是门左那盏点着的灯笼——一个自己会发光的东西。挂上去的布只改变别人看见什么;要让一块颜色真的进入一个空间,它得挡在光路上。同一批的〈健康之家·篷荫〉里一块 54,237 像素的绿布篷做到了,〈兰巴德酒馆·敞晴〉那幅 53,418 像素的红幡没有。

带走这组颜色

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

/* 迪亚法饭店·筛光 · Djafar Tavern in Sifted Light — Teyvat Palette */
:root {
  --canopy-ink-green: oklch(0.36 0.063 172); /* 树冠墨绿 #0e4839 */
  --glazed-shell-green: oklch(0.46 0.076 164); /* 釉瓦壳绿 #28654d */
  --shaded-terrace: oklch(0.34 0.029 150); /* 荫下露台 #2d3c30 */
  --skylit-steps: oklch(0.43 0.048 217); /* 天光石阶 #2f5661 */
  --sifted-sunbeam: oklch(0.7 0.057 101); /* 筛落的光 #a6a077 */
  --sunlit-leaf: oklch(0.67 0.157 137); /* 受光叶 #63ab42 */
  --lantern-amber: oklch(0.69 0.156 57); /* 灯笼琥珀 #e27e21 */
  --gradient-djafar-tavern: linear-gradient(180deg, oklch(0.36 0.063 172) 0%, oklch(0.67 0.157 137) 12%, oklch(0.46 0.076 164) 30%, oklch(0.69 0.156 57) 48%, oklch(0.34 0.029 150) 64%, oklch(0.7 0.057 101) 80%, oklch(0.43 0.048 217) 100%);
}

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

色卡